Cards - Koala Design

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-border-default">
        <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>

Brochure card

Use koala-card-brochure for marketing and brochure sites. Unlike the default card, it does not go edge-to-edge on mobile — it stays rounded and bordered at all breakpoints.

Brochure card

Always rounded with consistent borders. No mobile full-bleed behaviour.

<div koala-card koala-card-brochure>
    <h3 class="font-semibold ...">Brochure card</h3>
    <p>Card content here.</p>
</div>

<!-- Brochure card with custom rounding -->
<div koala-card koala-card-brochure class="rounded-2xl">
    <p>Larger corner radius.</p>
</div>

<!-- Brochure flush card (no padding) -->
<div koala-card koala-card-brochure koala-card-flush>
    <p>Custom padding inside.</p>
</div>

Card link

Use koala-card-link on an <a> element for interactive cards with hover animation (lift + shadow + border darken).

Clickable card

Hover to see the lift animation and shadow.

Another card

Used for navigation grids like the overview page.

<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>

Card with edit button

Detail card with an absolute-positioned pencil edit button in the top-right corner. Replaces the <div koala-card class="relative"> + nested edit link + icon boilerplate that wraps every entity-detail card.

Branch details

Address, contact, CRM info goes here.

<koala-card-with-edit edit-href="@EditBranch.Route(branch.Id)">
    ...card body...
</koala-card-with-edit>

<!-- Plain x-target.push="main" link instead of side tray: -->
<koala-card-with-edit edit-href="..." tray="false">
    ...
</koala-card-with-edit>

Info row (icon + value)

A flex row with an optional icon and a value. Used inside detail cards to render lines like "📍 17 Acacia Avenue", "📞 0114 489 1169" without repeating the wrapper markup.

17 Acacia Avenue, Sheffield S1 2AB

support@example.com

0114 489 1169

<koala-info-row icon="MapPin">@address.Line1</koala-info-row>
<koala-info-row icon="Mail">@partner.EmailAddress</koala-info-row>

Detail page — 2 columns with sticky right rail

Detail-page archetype for entities with a primary tab body (left) and quick-glance metadata (right). Used by /partner/quotes/{id} and /conveyancing/quotes/{id}. Tabs sit ABOVE the left container so they visually anchor the active view; the right column is a sticky stack of independent cards (no wrapping container).

Active tab body

Tab content lives inside this single container. Switching tabs swaps the body in place.

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 flex flex-col">
        <partial name="_TabNav" model="quoteTabNav" />
        <div koala-card koala-card-flush> ...active tab body... </div>
    </div>
    <aside class="lg:col-span-1 lg:sticky lg:top-20 lg:self-start flex flex-col gap-4">
        <!-- Status CTA card (branded fill, primary action) -->
        <div koala-card> ...info card... </div>
        <div koala-card> ...info card... </div>
        <div koala-card koala-card-brochure koala-card-flush class="px-4 py-3"> ...strip... </div>
    </aside>
</div>

Notes. Use TabNavMode.Standalone so the tab strip renders its own bottom border above the card. The right rail is sticky on lg+ only — on mobile the cards stack below the left column. Modals triggered from right-rail icon buttons should be rendered at the page level (outside the sticky aside) and use form-target="main" so the response refreshes both columns.