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

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

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

Review card

shape=Rounded — documents and enquiries

The edit fields for this row — category, summary, visibility.

Visible to the client

The name, address and contact tabs for this person.

API

koala-review-card-header shape PillRounded

koala-review-card-header icon IconName

koala-review-card-header avatar-text string

koala-review-card-header avatar-text-expression Alpine expression

koala-review-card-header avatar-tone PrimarySecondaryTertiaryDangerSuccessWarningInfoSurface

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

koala-review-card-header click-expression Alpine expression

koala-review-card-header disabled bool

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

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