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

Link & edit

koala-card on <a>

Create a quote

Whole card is the hit target, hover lifts it.

koala-card-edit-href

Branch details

London Bridge

List scaffold

koala-list-header / koala-list-rows / koala-list-row

Priya Shah

priya.shah@hartleyshaw.co.uk

List table

koala-list-table + koala-list-card

Jane Doe

£1,8402 days ago

Q-OQKBLK

Instructed

Purchase 12 Birch Lane, SW1A 1AA

Priya Shah

£1,5605 days ago

Q-44GH2X

Accepted

Sale 8 Mulberry Way, BN1 4QP

Table cells

koala-th / koala-tr / koala-td

Reference	Property	Amount
Q-1001	123 High Street, London	£2,400
Q-1002	45 Oak Avenue, Bristol	£1,820

API

koala-card-flush bool

koala-card-brochure bool

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-edit-href URL

koala-card-edit-tray bool

koala-list-header grid-class Tailwind grid classes

koala-list-header breakpoint SmLg

koala-list-rows rows-id string

koala-list-row href URL

koala-list-row grid-class Tailwind grid classes

koala-list-row breakpoint SmLg

koala-list-row delegate bool

koala-list-table columns ListCardColumn[]

koala-list-table rows-id string

koala-th-flush bool

koala-td-primary bool