Card
A flexible container for grouping related content, with optional header, footer, and action areas.
Create project
Deploy your new project in one click.
Card content goes here. Use it to group related information.
Footer area
<.card></.card>Examples
Basic
Header, content, and footer.
Create project
Deploy your new project in one click.
Card content goes here. Use it to group related information.
Footer area
<.card class="w-[360px]">
<.card_header>
<.card_title>Create project</.card_title>
<.card_description>Deploy your new project in one click.</.card_description>
</.card_header>
<.card_content>
<p>Card content goes here. Use it to group related information.</p>
</.card_content>
<.card_footer>
<span class="text-sm text-muted-foreground">Footer area</span>
</.card_footer>
</.card>With action
A card_action placed in the header aligns to the top-right.
Notifications
You have 3 unread messages.
Check your inbox for the latest updates from your team.
<.card class="w-[360px]">
<.card_header>
<.card_title>Notifications</.card_title>
<.card_description>You have 3 unread messages.</.card_description>
<.card_action>
<button class="text-sm font-medium text-primary hover:underline">Mark all read</button>
</.card_action>
</.card_header>
<.card_content>
<p>Check your inbox for the latest updates from your team.</p>
</.card_content>
</.card>Props
| Name | Type | Default | Values |
|---|---|---|---|
| class | :string | ||
| rest | :global | ||
| inner_block (slot) | :slot |