Stat stack: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/stat-stack.html Core Patterns (https://patternpaste.com/patterns/) Stats (https://patternpaste.com/patterns/stats/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The figures. Keep each to five glyphs or fewer, unit included, so it holds one line at 390. - 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. - The count. Five rows is the shape it is drawn for. - The masthead. The heading and the line beside it are one row, bottom aligned. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The rules. - Spacing scale. ### Set by this pattern - Full bleed, 1240px inner. - 62/38. - The ramp. - One tone for all text. - Its own ground and its own padding Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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. ### 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. Make it yoursVariations and the edits to make first ### What you change first - 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. - 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. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.75rem, 6.4vw, 5.25rem) Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Stat stack: common questions Does Stat stack need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Stat stack match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Stat stack have? 2: Ruled stack and Night stack. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Stat stack free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 17KB of core-block markup, 5 blocks (column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Testimonials Quote wall Eight short testimonials at reading size in three columns of unequal width, three, two and three, each quote hanging under a currentColor hairline with a small portrait and its name tracked beneath it, eight distinct faces. The rules line up once across the top of the wall and never again, so the section reads as a mass of voices rather than as a row of cards. States no colour and no font of its own. (https://patternpaste.com/pattern/quote-wall.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Stats Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Stats Explore all 14 Stats patterns (https://patternpaste.com/patterns/stats/) Shot in Twenty Twenty-Five Stats No plugin needed ### Stat split An asymmetric editorial split pairing a narrative, action and replaceable WordPress workspace photograph with a four-row data ledger. Stats Preview pattern (https://patternpaste.com/pattern/stat-split.html) Shot in Twenty Twenty-Five Stats No plugin needed ### Stat ticker A high-density horizontal data ribbon framed by top and bottom hairlines, dividing four key metrics with vertical currentColor hairlines. Stats Preview pattern (https://patternpaste.com/pattern/stat-ticker.html) Shot in Twenty Twenty-Five Stats No plugin needed ### Stats cover floor A tall full-bleed cover with the heading high in the frame, a long stretch of photograph beneath it, and four figures standing in a ruled strip along the cover's bottom edge. Stats Preview pattern (https://patternpaste.com/pattern/stats-cover-floor.html)