Cards
Use the koala-card tag helper
for white card containers with border and rounded corners.
Cards go edge-to-edge on mobile and have rounded corners on larger screens.
Standard card
The default card includes p-4 sm:p-6 padding,
a border, and responsive rounded corners.
Card title
This is a standard card with default padding. Use it for form sections, detail panels, and content areas.
<div koala-card>
<h3 class="font-semibold text-gray-900 dark:text-white mb-2">Card title</h3>
<p class="text-gray-500 dark:text-gray-400">Card content here.</p>
</div>
Flush card
Use koala-card-flush to remove padding.
Ideal for tables and content that needs custom padding.
Table header
Content with custom padding inside a flush card.
<div koala-card koala-card-flush>
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="font-semibold ...">Table header</h3>
</div>
<div class="p-4">
<p>Content with custom padding.</p>
</div>
</div>
Card with extra classes
Extra class attributes are merged onto the output.
Use this for spacing, width constraints, or layout modifications.
This card has mb-6 merged onto its classes.
This card follows after the margin.
<div koala-card class="mb-6">
<p>Card with extra margin-bottom.</p>
</div>
<div koala-card>
<p>Following card.</p>
</div>
Card link
Use koala-card-link on an
<a> element for interactive cards
with hover animation (lift + shadow + border darken).
<a href="/partner/quotes" koala-card-link>
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clickable card</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Description text.</p>
</a>
Flush card with table
The most common use of flush cards: wrapping a table so the border sits on the card edge.
| Name | Status |
|---|---|
| Acme Solicitors | Active |
| Beta Legal | New |
<div koala-card koala-card-flush>
<div class="overflow-x-auto">
<table class="w-full min-w-[400px]">
<!-- Table content -->
</table>
</div>
</div>