Stat list

How

A list where each item is a large display number over a small uppercase label, divided by a rule above each one.

When

At the end of a case study, for numbers that are already stated in the prose above. Never to introduce a number the reader has not been given context for.

Where

Inside a band, after the block it summarises. Two or three items, never more, because the point is that each one reads as a headline.

In code

src/components/ui/StatList.astro.

---
import StatList from '../../components/ui/StatList.astro';
---
<StatList
  three
  items={[
    { value: '15 min', label: 'Per merchant, from most of a day' },
    { value: '17', label: 'Payment flows supported' },
    { value: '38', label: 'Merchant program' },
  ]}
/>

Prop	Type	Default	What it does
items	array	required	{ value, label } pairs. Two or three.
three	boolean	false	Three across instead of two.
large	boolean	false	The bigger display size for the numbers.

The two sizes

large exists because one page runs its numbers bigger than the rest. That used to be a copy of the whole rule block in that page’s own stylesheet, which is how two sizes become three. It is a named variant now, so the difference is a decision someone made rather than a divergence nobody noticed.

Use large where the stats are the closing statement of the page. Leave it off where they support a point the prose already made.

Content

The value is short enough to read at display size: 20+, 15 min, 38. The label says what the number counts, as a fragment rather than a sentence, because a screen reader reads the pair in order and “38” then “Merchant program” already reads correctly.

Every number here has to be one that can be said out loud in an interview. A number that needs a caveat belongs in the prose, with the caveat.

Do

• Repeat numbers the prose above already gave.
• Keep values short enough to read at display size.
• Write labels as fragments, not sentences.

Don’t

• Ship four or more items.
• Introduce a number that has no context above it.
• Copy the rule block into a page to change the size.

Checks before you ship

1. Two or three items, not four.
2. Every number appears in the prose above as well.
3. At 390px wide the items stack to one column.
4. Reading value then label out loud makes sense.