Key figures

A few headline numbers, each with a label: people registered, cards issued, districts inspected. The line beside each is the pack's accent colour.

When to use

For three to six numbers that show the scale of the work, on a home page or at the top of a statistics page.

When not to use

For more than six numbers, or numbers people need to compare across rows: that is a table. For an amount of money someone has to pay, use the currency display.

<dl class="ag-stats ag-mb-0">
  <div class="ag-stats__item">
    <dt class="ag-stats__label">Households supplied</dt>
    <dd class="ag-stats__value">2,418,000</dd>
  </div>
  <div class="ag-stats__item">
    <dt class="ag-stats__label">Districts inspected this quarter</dt>
    <dd class="ag-stats__value">142</dd>
  </div>
  <div class="ag-stats__item">
    <dt class="ag-stats__label">Leaks repaired within two days</dt>
    <dd class="ag-stats__value">87%</dd>
  </div>
</dl>
<p class="ag-caption ag-mb-0">Figures as at 30 September 2026.</p>

How it works

• A description list. Each figure is a div holding the label, then the value.
• On screen the value sits above its label. In the markup the label comes first.
• The figures wrap to fit: three across on a desktop, one on a phone.
• Always say when the figures were taken, in a caption under the list.
• Write the number in the page. Do not count it up with an animation.

Accessibility

• The label is read before the number, so a screen reader says "Households supplied, 2,418,000".
• A number that counts up from zero is read as a stream of changing digits, or as zero. A number that was never filled in is read as nothing at all.
• The accent line is decoration and carries no meaning.

Pack fields

color.accent, for the line beside each figure.