Cards
Surface container with rounded corners, hairline outline, and standard padding. Mobile breaks the outline to the edges; desktop pulls it back in. Flush drops the padding so tables and lists can sit edge-to-edge.
Canonical
Quote summary
The everyday card. Standard padding, hairline outline, rounded corners on desktop — bleeds to the edges on mobile so the outline stays out of the narrow viewport.
The default. Use whenever a content block needs its own surface and spacing in a feed of sections.
Variants
3 variantsStandard padding inside the card.
- Row content sits edge-to-edge
- Another row
Brochure cards keep their outline on every viewport.
States
2 statesDefault surface, default outline.
A card can carry custom classes — here lowered opacity for a disabled section.
Props
3 attributes| Attribute | Values | Notes |
|---|---|---|
| koala-card | — | Presence flag. Required to activate the helper on the <div>. |
| koala-card-flush | — | Drops the inner padding so tables, lists, and dividers sit edge-to-edge inside the card. |
| koala-card-brochure | — | Keeps the outline on mobile (no -mx-4 bleed). Used on marketing pages where the card sits inside a centred column. |
Do & don't
A single card per content section.
Nested card — double outline.
Brand top-strip
Optional koala-card-strip-label + koala-card-strip-icon
attributes render a plum-tinted header strip across the top of the card. Use for category labels on
cards that benefit from one (Sale & purchase, Sale only, Awaiting client, etc.) — not on every card.
14 Lavender Hill, SW11 5RW
Q-AB12CD · Quote sent 3 days ago
£1,240inc. disbursements
22 Birch Lane, SE1 3RW
T-XY98ZW · Sent for review 5 days ago
3 questionnaires outstanding.
| Attribute | Notes |
|---|---|
| koala-card-strip-label | Text for the strip. When omitted, no strip renders (default behaviour preserved). |
| koala-card-strip-icon | Optional IconName. Renders before the label. |