Components Cards

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 variants

Standard padding inside the card.

Default

koala-card

List header

Row content sits edge-to-edge
Another row

Flush

koala-card-flush

Brochure cards keep their outline on every viewport.

Brochure

koala-card-brochure

States

2 states

Default surface, default outline.

Default

A card can carry custom classes — here lowered opacity for a disabled section.

With extra classes

Extra classes append to the standard card classes.

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.

Do Use a card for each content block on a page. The hairline outline gives the block its own surface and lets sections breathe.

Nested card — double outline.

Don't Don't nest cards. Two outlines stacked together compete and confuse the hierarchy. Use a section heading or hairline inside one card.

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.

Sale & purchase

14 Lavender Hill, SW11 5RW

Q-AB12CD · Quote sent 3 days ago

£1,240inc. disbursements

Awaiting client

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.