A stats block makes the case in numbers: a few figures, each with a few words under it. The figure is the heading here, large and in ink; the label is quiet. Four is a good number of them.
Stats
<section class="container-inline px-lg py-4xl" aria-labelledby="stats-title"> <div class="flex flex-col gap-2xl max-w(1040) mx-auto"> <header class="flex flex-col gap-sm max-w(560)"> <p class="eyebrow">In numbers</p> <h2 class="heading heading-2xl" id="stats-title">Quiet, at a very large scale.</h2> </header> <dl class="grid gap-xl m(0) grid-cols(2) grid-cols(4)@container(--4xl) pt-xl bt(1) bt-solid b-line-hair"> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Deployments a day</dt> <dd class="m(0) heading heading-2xl">2.4M</dd> </div> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Median build</dt> <dd class="m(0) heading heading-2xl">38 s</dd> </div> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Regions</dt> <dd class="m(0) heading heading-2xl">14</dd> </div> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Uptime, last year</dt> <dd class="m(0) heading heading-2xl">99.99%</dd> </div> </dl> </div></section>Blocks are markup to copy. They take the page's own text color and size; the previews set fg-text-body text-sm on the body. Each block is a size container, so it reflows by its own width.
#What is in it
- A description list. Each label is a
<dt>and its figure a<dd>, in a<div>inside a<dl>, so the pair is announced as a pair. The label comes first in the source, as a description list requires;flex-col-reverseon the group draws the figure over it. Both orders read well, which is what makes reversing them safe. - The figure borrows the heading's type.
heading heading-2xlon the<dd>gives it the size, the ink and the tight tracking of a title without making it one. - Two columns, then four.
grid-cols(2) grid-cols(4)@container(--4xl): four across from 56rem of block. - A hairline over the row,
bt(1) bt-solid b-line-hair, ties the figures to the header above.
For a figure in an application, with a label over it and a change beside it, use the stat component; see the dashboard layout.
#On sheets
Each figure on a sheet in a tray, 4px apart.
On sheets
<section class="container-inline px-lg py-4xl" aria-label="Atlas in numbers"> <dl class="tray grid gap(4) max-w(1040) mx-auto m(0) grid-cols(2) grid-cols(4)@container(--4xl)"> <div class="sheet sheet-raised flex flex-col-reverse gap-3xs p-lg"> <dt class="fg-text-muted">Deployments a day</dt> <dd class="m(0) heading heading-2xl">2.4M</dd> </div> <div class="sheet sheet-raised flex flex-col-reverse gap-3xs p-lg"> <dt class="fg-text-muted">Median build</dt> <dd class="m(0) heading heading-2xl">38 s</dd> </div> <div class="sheet sheet-raised flex flex-col-reverse gap-3xs p-lg"> <dt class="fg-text-muted">Regions</dt> <dd class="m(0) heading heading-2xl">14</dd> </div> <div class="sheet sheet-raised flex flex-col-reverse gap-3xs p-lg"> <dt class="fg-text-muted">Uptime, last year</dt> <dd class="m(0) heading heading-2xl">99.99%</dd> </div> </dl></section>#Beside an argument
When the numbers support a claim, put the claim beside them: the words in one column and a two-by-two of figures in the other, from 56rem of block.
Beside an argument
<section class="container-inline px-lg py-4xl" aria-labelledby="stats-split-title"> <div class="grid gap-2xl items-center max-w(1040) mx-auto grid-cols(2)@container(--4xl)"> <header class="flex flex-col gap-sm"> <p class="eyebrow">Reliability</p> <h2 class="heading heading-2xl" id="stats-split-title">We publish the numbers we are held to.</h2> <p class="lead">Measured from outside our network, every minute, and posted on a public status page.</p> <a class="link self-start mt-xs" href="#">See the status page</a> </header> <dl class="grid gap-xl row-gap-2xl grid-cols(2) m(0)"> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Deployments a day</dt> <dd class="m(0) heading heading-2xl">2.4M</dd> </div> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Median build</dt> <dd class="m(0) heading heading-2xl">38 s</dd> </div> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Regions</dt> <dd class="m(0) heading heading-2xl">14</dd> </div> <div class="flex flex-col-reverse gap-3xs"> <dt class="fg-text-muted">Uptime, last year</dt> <dd class="m(0) heading heading-2xl">99.99%</dd> </div> </dl> </div></section>#Accessibility
- Write the unit into the figure ("38 s", "99.99%"), so it reads without its label.
- A number that changes over time needs a date somewhere near it.
- Do not animate the figures counting up. It delays the one thing the block is for, and it is motion with no meaning.