Key figures

The list

zone_polygon: 412,908
overlay_polygon: 1,104,551
precinct_polygon: 88,240
lga_boundary: 77

A pipeline stage's output

Code

<GdKeyFigures :figures="[
  { label: 'zone_polygon', value: '412,908' },
  { label: 'overlay_polygon', value: '1,104,551' }
]" />

The figures are mono, right-aligned and tabular-nums, and that is the whole reason this is a component rather than two spans. Set 412,908 above 1,104,551 in the body face and the thousands separators land in different places, so comparing them means counting digits. On a shared right edge the longer number is visibly longer.

With a note

Councils codified: 411of 537
Parcels in fabric: 11.42M+184k
Sources fresh: 96.2%

Denominators and deltas

What it is not

Not GdDataTable. That is for rows a person sorts, pages and selects. This is a fixed handful of facts about one thing, and a table's header, borders and machinery would be four times the furniture for the same eight words.
Not GdMetricCard. A metric card is one big number a page is about. These are supporting detail — and eight metric cards is a dashboard, not a list.

Props

PropTypeDefault

figuresrequiredGdKeyFigure[]—

`{ label, value, note? }`. `value` is preformatted — separators and units are the caller's call, because only the caller knows whether 77 is a count or a percentage.

densebooleanfalse

Tighten the rows for a side panel, where vertical space is the scarce thing.