PrimitivesContain & overlayCard

Card

Surface container: hairline outline, rounded corners, standard padding. Flush drops the padding for tables and lists; brochure keeps the outline on mobile instead of bleeding to the edges.

Surface

Default

Standard padding, hairline outline, rounded corners.

koala-card-flush

List header

Row content sits edge-to-edge
Another row

koala-card-brochure

Keeps its outline on every viewport, with no mobile bleed.

Header & footer

koala-card-header-label

Sale & purchase

14 Lavender Hill, SW11 5RW

Q-AB12CD, sent 3 days ago

header + footer

Estimate

Subtotal £1,033.33

VAT £206.67

Total £1,240 inc. VAT

Action band

koala-card-footer

Who owns the property?

The step's own content sits above the band; the card is flush, so the band runs to its edges.

layout="Actions" (the default)

Rename this branch

A form's actions range right.

The same band koala-modal-footer, koala-tray-footer and koala-bottom-sheet-footer draw on their own surfaces. Distinct from koala-card-footer-label above, which is the quiet brand band that mirrors the header.

Link & edit

koala-card on <a>

Create a quote

Whole card is the hit target, hover lifts it.

koala-card-edit

Branch details

London Bridge

List table

koala-table + koala-table-row + koala-table-cell

Client	Property	Status	Total
Jane Doe Q-OQKBLK 12 Birch Lane, SW1A 1AA Instructed £1,840
Jane Doe Q-OQKBLK	12 Birch Lane, SW1A 1AA	Instructed	£1,840
Priya Shah Q-44GH2X 8 Mulberry Way, BN1 4QP Accepted £1,560
Priya Shah Q-44GH2X	8 Mulberry Way, BN1 4QP	Accepted	£1,560

API

koala-review-card-body expanded-var Alpine variable (default expanded)

koala-card-flush bool

koala-card-brochure bool

koala-card-elevation RaisedFloatingOverlay

koala-card-header-label string

koala-card-header-icon IconName

koala-card-header-actions-html HTML string

koala-card-footer-label string

koala-card-footer-icon IconName

koala-card-footer-actions-html HTML string

koala-card-footer layout ActionsSpread

koala-card-footer class Tailwind classes

koala-card-edit native <a> or <button> edit action slot

koala-table columns IListColumn[] (label, width, align)

koala-table rows-id string

koala-table-row href URL

koala-table-row dial phone number

koala-table-cell copy-value string