[Library] Stats

Catalogue accessStandard

Stat stack

Five figures read down instead of across: each one is a full-width ruled row with a wide-tracked label and a line of basis on the left, and the figure set at display size and flush right, so the figures line up into one hard vertical edge down the whole section. The right alignment is set on the type rather than on the layout, so the edge survives the phone. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

Five figures read down a page rather than across a band. A masthead sets the heading against a short line of orientation, then each figure gets a full-width ruled row: a wide-tracked label with one line of basis under it on the left, and the figure itself set at display size and flush to the right edge. A closing rule carries the source note. Core blocks only, so there is nothing to install and nothing to keep updated.

The signature moment

The hard right edge

The figures are flush right, and because every row shares the same right edge the five of them stack into one unbroken vertical line down the section. The labels rag on the left and the notes under them are different lengths; the numbers are the one thing in the section that agrees. That edge is the pattern.

Two decisions make it, and both are deliberate:

  • The unit lives in the figure's own text, not in a block beside it. 240+, 98% and 3.4× are one string each, so the glyph sitting on the edge is the last glyph of the figure. A separate unit block, which is how stat-row does it, would put a small mark on the edge and the digits behind it, and the line would go soft.
  • The alignment is set on the TYPE, not on the layout. The figure is a right-aligned paragraph inside its column, rather than a flex item pushed right by space-between. Text alignment does not stop working when the columns stack, which is what makes the phone case work; see below.

What it inherits from your theme

  • Typeface. The pattern states no font family anywhere. Heading, labels, notes and figures all take whatever your theme sets, serif or sans.
  • Palette. The ground asks for your base, falling back to a colour WordPress itself guarantees; the type asks for your contrast on the same terms. No accent slug appears anywhere, in any rung: this section is entirely text on a ground, and an accent's brightness is unknowable.
  • The rules. Every hairline is a group's own top border in currentColor, so the rules follow your text colour wherever your theme puts it, including in a dark style, and they cannot resolve to nothing. They are borders rather than separators on purpose: a border spans the row it belongs to and needs no style class to be full width.
  • Spacing scale. Section padding, row padding and the gap under each label are core spacing presets, so the stack breathes at your theme's rhythm.

What it decides for itself

  • Full bleed, 1240px inner. The section spans the viewport and holds its content to its own measure, so the rules run the width of the page's column rather than the width of the viewport.
  • 62/38. The label side is wide enough for a two-line note and the figure side is narrow enough that even a short number sits well out at the edge. It is not a half split, because a half split would read as a table.
  • The ramp. Display figures at clamp(2.75rem, 6.4vw, 5.25rem) with tight negative tracking and a 0.9 line-height, against labels at a 15px floor with 0.16em tracking and nothing in between them. That collision is the second half of the design, after the edge.
  • One tone for all text. Notes are not set in a lighter grey; the only slugs that could supply one have unknowable brightness. Size, weight and tracking carry the hierarchy.
  • Its own ground and its own padding, so it can sit between any two sections on a page without borrowing air from either.

What you change first

  1. The figures. Keep each to five glyphs or fewer, unit included, so it holds one line at 390. This is the only edit that can break the signature.
  2. The labels and their notes. The note is what makes the section read as reported rather than asserted: it says what the number was measured against. Delete every one of them and you get a plainer, quieter version of the same stack, but delete them one at a time and the rows go uneven.
  3. The count. Five rows is the shape it is drawn for. Three still reads; above seven the stack starts to want a page of its own.
  4. The masthead. The heading and the line beside it are one row, bottom aligned. If you drop the line, widen the heading column to 100% rather than leaving an empty half.
Why this is not stat-row, or its stacked variation166 words

stat-row is four figures across one tonal band, locked to a single horizontal baseline, unit small beside each number. Its lock is horizontal and it is read across. This one is read down, and its lock is vertical.

Its stacked-ledger variation is the closest thing in the catalogue and is still the opposite composition: there the figure leads at the left margin and the label is pushed away from it, so the left edge is the strong one and the labels rag right. Here the label leads, the figure answers at the far side of the row, and the right edge is the strong one. Put the two side by side and they read as a heading with a value against a value with a heading.

This one also carries a line of basis under every label, which stat-row has nowhere: a dense two-line left side against a single enormous numeral is the density contrast the row shape gives you and the band shape does not.

What happens at 390152 words

This is the layout that usually breaks on a phone, so it was decided rather than discovered.

Below 782px WordPress stacks the two columns of every row. The label and its note take the full width, and the figure drops onto its own line underneath still right-aligned, because right alignment is a property of the paragraph and not of the column that was holding it. So on a phone each row reads as label, basis, then the figure hanging off the right margin, and the vertical edge the section is built on is still there, running down the right-hand side of the whole stack. Nothing overflows and nothing centres itself.

The figure's clamp() floor is 2.75rem, which holds four glyphs on one line at 390 with room to spare. Five glyphs fit; six will wrap, and a wrapped figure is the one thing that would break the edge, so keep them short.

Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(2.75rem, 6.4vw, 5.25rem)
Back to the library

Continue exploring

Next in Stats

Explore all 10 Stats patterns