Cards
A container for one subject you could act on — a parcel, a project, a plan, a metric. Six variants, one horizontal form, and a specimen card for when the thing itself is the argument.
Card, row or banner
If the thing is one of many in a scannable list, it is a list row, not a card. If it is a message about the view rather than a subject in it, it is a banner. Those two questions decide almost every "which component?" argument this system will have — the design's own cut: under about eight items, each needing two or more lines and its own actions, where the user is choosing between them, cards; a long or unbounded set of same-shaped things where the job is to find one, rows. Rows scan; cards don't.
Variants
Basic is the default — reach for it before anything else. Everything below it adds exactly one idea.
Basic
Title and body only. The default — reach for this before anything else.
Media
A tinted preview panel above the content.
Selectable
Chosen from a set. Border widens; the fill never changes.
Says what the absence means, never just "no data".
Horizontal
Same component, media rotated to the side. Three media widths: a 50% split when the card is the hero of its section, a 132px panel for a list of projects, and no panel at all when the glyph is just an identifier.
18 Kedron Brook Road
L3 SP221704 · 1,204 m²Five-lot subdivision tested. Frontage and rear access both clear; one easement crosses lot 4.
220 Days Road
L1 RP44201 · 607 m²Rear deck under 10 m² and below 1 m — exempt. Nothing to lodge.
Specimen card
For comparing options where the thing itself is the argument — subdivision layouts, plan variants, siting choices. Three zones: a sunken preview at working size, a divided strip carrying the numbers you'd compare on, then an identified body. Never more than four across.
Rear lot keeps the jacaranda; the handle costs 3.5 m of frontage.
Even frontages, but lot 2 falls 20 m² under the minimum — needs a variation.
Every specimen in a set carries the SAME stats in the same order. The strip is a comparison instrument, and an instrument with per-card columns measures nothing.
States & actions
Selection widens the border rather than changing the fill, so it survives on any surface. The padding shrinks by the same pixel the border grows, so nothing moves.
- One primary action per card, leading the footer row; secondary beside it; overflow into a "⋯" menu past two.
- A linked card carries no buttons — one destination, signalled by the chevron. Mixing the two makes every click a gamble.
- Hover on an interactive card darkens the border and, on media cards, deepens the shadow one step. Never a lift or a scale.
- The media tint is decoration. Nothing about the card's content may depend on which tint it got.