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.

Update indicator

Optional corner dot

Shared updates

The indicator sits on the rounded corner.

Hidden indicator

All caught up

Omit the slot or set visible to false to render no dot.

Header with corner dot

Shared updates

Header clipping preserves the card edge and the indicator.

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-dot visible bool (default true); omitted slot renders no dot

koala-card-dot label string (default New updates); accessible name and tooltip

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