Basic card
Groups content on a white surface, together with a header, an actions area and a footer. It is the basic container for summaries, lists and forms in dashboards, and it can be collapsed and closed.
Basic usage
title and subtitle make up the card header; both are optional. Content goes in the default slot and is shown in a padded body.
<acun:card title="Kadıköy warehouse" subtitle="IST-04 · 148 orders">
<p class="text-sm text-gray-600 dark:text-zinc-400">112 orders shipped this month; 36 orders are waiting.</p>
</acun:card>| Prop | Values |
|---|---|
title | Card title |
subtitle | Short description below the title |
Equal-height cards
acun:card is a vertical flex box, and its body fills the remaining height (flex-1). When cards side by side in a grid stretch to the same height, their footers stay aligned even if the body texts differ in length; no extra class is needed.
<div class="grid gap-4 md:grid-cols-3">
<acun:card title="Kadıköy warehouse" subtitle="148 orders">
<p class="text-sm text-gray-600 dark:text-zinc-400">36 orders are waiting to ship.</p>
<acun:slot:footer><acun:button size="sm" variant="ghost">Show orders</acun:button></acun:slot:footer>
</acun:card>
<acun:card title="Ankara warehouse" subtitle="205 orders">
<p class="text-sm text-gray-600 dark:text-zinc-400">198 orders shipped this month. Because of the new carrier contract, Thursday pickups start two hours early; warehouse teams need to update their packing plans accordingly.</p>
<acun:slot:footer><acun:button size="sm" variant="ghost">Show orders</acun:button></acun:slot:footer>
</acun:card>
<acun:card title="Izmir warehouse" subtitle="64 orders">
<p class="text-sm text-gray-600 dark:text-zinc-400">All orders have shipped.</p>
<acun:slot:footer><acun:button size="sm" variant="ghost">Show orders</acun:button></acun:slot:footer>
</acun:card>
</div>Header actions
The actions slot sits to the right of the header; you can put a badge, a small button or a dropdown there. Examples with dropdowns are on the Cards with actions page.
<acun:card title="Open tickets" subtitle="38 tickets">
<acun:slot:actions>
<acun:badge variant="success">Up to date</acun:badge>
<acun:button size="sm" variant="ghost">All</acun:button>
</acun:slot:actions>
<p class="text-sm text-gray-600 dark:text-zinc-400">12 tickets are awaiting a reply today; 3 tickets are resolved.</p>
</acun:card>| Prop | Values |
|---|---|
actions | Slot; right of the header |
Collapsing and closing
collapsible adds an arrow to the header that collapses the body, and closable adds an X that hides the card. Both work only in the browser; when the page is reloaded, the card is open again.
<div class="grid gap-4 md:grid-cols-2">
<acun:card title="Shipping notes" collapsible>
<p class="text-sm text-gray-600 dark:text-zinc-400">Carriers are busy on the Anatolian side on Tuesdays; deliveries may be a day late.</p>
</acun:card>
<acun:card title="Announcement" closable>
<p class="text-sm text-gray-600 dark:text-zinc-400">The October sale starts on Monday, October 7. The support team should review the new return policy.</p>
</acun:card>
</div>| Prop | Values |
|---|---|
collapsible | true | false |
closable | true | false |
Without padding
:padding="false" removes the body padding; tables and lists reach the edges of the card. For a list, use acun:list-group together with flush.
<acun:card title="Recent orders" :padding="false">
<acun:list-group flush>
<acun:list-group.item>Ayşe Yılmaz · Wireless headphones <span class="ms-auto text-xs text-gray-500 dark:text-zinc-400">09:42</span></acun:list-group.item>
<acun:list-group.item>Mehmet Kaya · Smart watch <span class="ms-auto text-xs text-gray-500 dark:text-zinc-400">09:17</span></acun:list-group.item>
<acun:list-group.item>Zeynep Arslan · Laptop bag <span class="ms-auto text-xs text-gray-500 dark:text-zinc-400">08:55</span></acun:list-group.item>
</acun:list-group>
</acun:card>| Prop | Values |
|---|---|
padding | true | false |
Free-form content
Without a title, you can use the card as a free-form surface; welcome and summary cards are built this way.
<acun:card>
<div class="flex flex-wrap items-center justify-between gap-6">
<div class="max-w-md">
<h3 class="text-lg font-semibold text-brand-600 dark:text-brand-400">Good morning, Ayşe 👋</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-zinc-400">214 orders came in yesterday, 18% more than last week's average.</p>
<acun:button size="sm" variant="outline" class="mt-4">Open sales report</acun:button>
</div>
<acun:icon name="shopping-bag" size="24" stroke="1.2" class="text-brand-200 dark:text-brand-500/30" />
</div>
</acun:card>Composing from parts
If the header needs more than text (an icon, a badge, action buttons), or the body and footer need their own styling, write the card with the acun:card.header, acun:card.body and acun:card.footer parts. When the content starts with a part, the card draws only its box; the collapse and close buttons still appear in the header. If you give the header no title, the slot is the title itself. Give :collapsible="false" to a composed card that you place inside a collapsible card; otherwise the inner header shows the outer card's buttons.
<acun:card collapsible>
<acun:card.header subtitle="486 packages today · 3 carriers">
<acun:icon name="truck" size="4" class="text-brand-600 dark:text-brand-400" />
Shipment tracking
<acun:badge variant="success">Live</acun:badge>
<acun:slot:actions>
<acun:button size="sm" variant="white">
<acun:icon name="arrow-path" size="4" /> Refresh
</acun:button>
</acun:slot:actions>
</acun:card.header>
<acun:card.body>
<dl class="grid grid-cols-3 gap-4 text-sm">
<div>
<dt class="text-gray-500 dark:text-zinc-400">Delivered</dt>
<dd class="mt-1 text-lg font-semibold tabular-nums text-gray-900 dark:text-zinc-100">312</dd>
</div>
<div>
<dt class="text-gray-500 dark:text-zinc-400">In transit</dt>
<dd class="mt-1 text-lg font-semibold tabular-nums text-gray-900 dark:text-zinc-100">158</dd>
</div>
<div>
<dt class="text-gray-500 dark:text-zinc-400">Late</dt>
<dd class="mt-1 text-lg font-semibold tabular-nums text-red-600 dark:text-red-400">16</dd>
</div>
</dl>
</acun:card.body>
<acun:card.footer>
<span class="text-xs text-gray-500 dark:text-zinc-400">Last updated 09:42</span>
<acun:button size="sm" variant="soft" class="ms-auto">Go to shipping report</acun:button>
</acun:card.footer>
</acun:card>| Prop | Values |
|---|---|
acun:card.header | title, subtitle; slot: header content · actions slot |
acun:card.body | padding (default true) |
acun:card.footer | Footer |
Header with a badge, edge-to-edge body
A slot given together with title is appended to the header (e.g. a count badge). :padding="false" opens the body up to the edges; it suits lists and tables.
<acun:card>
<acun:card.header title="Support team">
<acun:badge>8 people</acun:badge>
</acun:card.header>
<acun:card.body :padding="false">
<ul class="divide-y divide-gray-100 border-t border-gray-100 text-sm dark:divide-zinc-800 dark:border-zinc-800">
<li class="flex items-center justify-between gap-3 px-5 py-3">
<span class="font-medium text-gray-900 dark:text-zinc-100">Ahmet Yılmaz</span>
<span class="text-gray-500 dark:text-zinc-400">Billing · 42 tickets</span>
</li>
<li class="flex items-center justify-between gap-3 px-5 py-3">
<span class="font-medium text-gray-900 dark:text-zinc-100">Elif Kaya</span>
<span class="text-gray-500 dark:text-zinc-400">Technical support · 37 tickets</span>
</li>
<li class="flex items-center justify-between gap-3 px-5 py-3">
<span class="font-medium text-gray-900 dark:text-zinc-100">Murat Demir</span>
<span class="text-gray-500 dark:text-zinc-400">Shipping and returns · 51 tickets</span>
</li>
</ul>
</acun:card.body>
</acun:card>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
title | null | Card title |
subtitle | null | Description below the title |
collapsible | false | Button that collapses the body |
closable | false | Button that hides the card |
padding | true | false: body without padding (tables, lists) |
card.header: title · subtitle | null | Title and secondary line; without title, the slot is the title itself (icon, text, badge) |
card.body: padding | true | false: body without padding |