Cards
Surface container with rounded corners, hairline outline, and standard padding. Pass koala-card-header-label to render a plum-tinted brand header across the top, and/or koala-card-footer-label for a matching footer at the bottom. 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
9 attributes| Attribute | Values | Notes |
|---|---|---|
| koala-card | — | Presence flag. Required to activate the helper on the <div> or <a>. |
| 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. |
| koala-card-header-label | string? | When set, renders a plum-tinted brand header across the top of the card with this label. Pair with koala-card-flush on tab cards so the band sits at the very top. Omit to render no header. |
| koala-card-header-icon | IconName? | Optional icon rendered before the header label. |
| koala-card-header-actions-html | string? | Pre-rendered HTML for the right side of the header (e.g. a Hoowla link from KoalaHoowlaTagHelper.BuildHtml(...)). Requires a header label. |
| koala-card-footer-label | string? | Mirrors the header at the bottom edge — same plum tint. Use for a closing summary line (total, status, etc.). |
| koala-card-footer-icon | IconName? | Optional icon rendered before the footer label. |
| koala-card-footer-actions-html | string? | Pre-rendered HTML for the right side of the footer. Requires a footer label. |
Do & don't
A single card per content section.
Nested card — double outline.
Brand header & footer
Pass koala-card-header-label to render a plum-tinted band
across the top of the card (the header — replacing the legacy manual title bar on tab cards), and
koala-card-footer-label for a matching band at the bottom.
Each band supports an optional -icon and an
-actions-html right slot for things like a Hoowla link.
Without a label, the corresponding band is not rendered.
14 Lavender Hill, SW11 5RW
Q-AB12CD · Quote sent 3 days ago
£1,240inc. disbursements
Header + matching footer
Subtotal £1,033.33
VAT £206.67
Case
Header with actions slot
The Hoowla link on the right is fed in via koala-card-header-actions-html using KoalaHoowlaTagHelper.BuildHtml(...).
Footer only
Use the footer on its own for a status cap — no header needed.
Card as link
Apply koala-card to an
<a> element to turn the whole card into a clickable surface
with a subtle hover lift. Use for index tiles (dashboard launch cards) where the entire card is the
affordance.
Card with edit affordance
Set koala-card-edit-href to render a pencil edit button
absolutely positioned in the top-right of the card. Defaults to tray-link behaviour; set
koala-card-edit-tray="false" for full-page navigation.
| Attribute | Values | Notes |
|---|---|---|
| koala-card-edit-href | string? | URL the pencil links to. When omitted, no pencil renders. |
| koala-card-edit-tray | bool | Defaults to true — opens the edit page in a side tray. Set false for main-page navigation. |