A flexible and extensible content container with multiple variants and options.
Default card with standard padding and rounded corners.
<x-ui::card>
This is a basic card.
</x-ui::card>Control the padding and border radius using the size prop.
<x-ui::card size="sm">Small Card</x-ui::card>
<x-ui::card size="md">Medium Card (Default)</x-ui::card>Cards can contain any elements, including headings, text, and buttons.
This card contains a heading, some descriptive text, and a footer button.
<x-ui::card>
<div class="space-y-4">
<x-ui::heading level="6">Card Title</x-ui::heading>
<x-ui::text variant="muted">This card contains a heading, some descriptive text, and a footer button.</x-ui::text>
<div class="pt-4 flex justify-end">
<x-ui::button size="sm">Action</x-ui::button>
</div>
</div>
</x-ui::card>