# 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. Canonical: https://patternpaste.com/pattern/stat-stack.html Section: Stats Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: column, columns, group, heading, paragraph Keywords: stats, statistics, numbers, metrics, ledger, results ## Variations (2) ### Ruled stack (the default) Identical markup in every theme. The stack on your base ground, rows separated by currentColor hairlines that follow your text colour. Every figure is flush to the same right edge, at every width. ### Night stack Identical markup in every theme. The colour axis, done the only way the contract guarantees: the section inverts to your contrast with your base on it, and the row rules follow the type because they are currentColor. Both slugs exist in every theme, so unlike a tinted wash this one arrives everywhere. --- ## 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. ## Why this is not `stat-row`, or its stacked variation `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 390 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. ## 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. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.75rem, 6.4vw, 5.25rem)