Stat row: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/stat-row.html Core Patterns (https://patternpaste.com/patterns/) Stats (https://patternpaste.com/patterns/stats/) Catalogue access Standard # Stat row Four key figures across one tonal band, each set at display size with its unit small and tight beside it, every figure locked to a single baseline and sitting on a hairline that makes that baseline visible. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The numbers and the labels. Keep each figure to four glyphs or fewer so it stays on one line at tablet width, and keep labels to two or three words. - The units. They are separate blocks, so a unit can be deleted outright and the figure keeps its position. - The count. Delete a cell for three across, which is the other composition this band is drawn for. - The source note. It is what makes the row read as reported rather than asserted. The signature moment ## Baseline-locked data The four figures have unequal digit counts and four different units, and they still sit on one line across the whole band. That lock is the pattern. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The hairlines. - Spacing scale. ### Set by this pattern - Proportion. - The grid. - One tone for all text. 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 Four key figures across one band on a tonal wash: a short masthead, then a row of four cells, each one a figure at display size with its unit beside it, a hairline beneath, and one wide-tracked label under that. A source note closes the section. Core blocks only, so there is nothing to install and nothing to keep updated. ### The signature moment: baseline-locked data The four figures have unequal digit counts and four different units, and they still sit on one line across the whole band. That lock is the pattern. It is built rather than drawn, because copy-paste markup carries no CSS of its own and none of the alignment tools that would normally do this job (align-items: baseline, a grid row, a subgrid) can be expressed in a block attribute. So the alignment is a property of the composition: - The figure is always the first block in its cell, and all four figures carry identical typography. Equal columns start at the same y, so identical first line boxes put every baseline at the same height. Nothing has to be measured or nudged, and the lock survives a buyer editing the copy. - Nothing sits above a figure. No eyebrow, no rule, no icon. Anything above one cell's figure that is a different height in another cell would break the row, so that slot is kept empty by design. - The line-height on the figures is 0.85, which pulls the paragraph's box bottom down to within a pixel or two of the baseline in any face the buyer's theme sets. That is what lets the hairline below it act as the baseline: at margin-top: 0 the rule lands where the digits sit, not where the line box happens to end. - The hairline makes the lock visible. Four collinear rules across the band are the datum the eye reads the row by, and they are the reason the alignment is noticed rather than merely correct. - The unit is a separate block, not part of the figure's text. It sits in a nowrap flex row with the figure, aligned to the same bottom edge, so it can never wrap away from its number and never widens the figure's own line. It is set small, uppercase and lightly tracked with a 0.35rem gap: tight against the figure without touching it. Its own line-height is tuned so its baseline lands on the same rule. The figures carry no colour of their own beyond your contrast chain. Weight, size and tracking do the hierarchy, so the section still reads as data in a theme with a full palette and in one with none. ### Why this is not the feature grid Both patterns set numerals large, and that is where the resemblance ends. - feature-grid uses numerals as structure. 01, 02, 03 are index labels promoted to display size; they hang *below* a rule that acts as a header, and each introduces a heading and a paragraph of copy. Remove the copy and the numerals have nothing to index. - stat-row uses numerals as data. Each figure is a measured value with a unit, it sits *on* its rule rather than under one, there is no heading and no sentence inside any cell, and the four cells are read across the row rather than down a list. The row is dense where the band is airy, and the tonal wash and the closing source note frame it as a report rather than a set of features. If a future variation ever makes a single figure the whole composition, that belongs to error-404 and not here. Make it yoursVariations and the edits to make first ### What you change first - The numbers and the labels. Keep each figure to four glyphs or fewer so it stays on one line at tablet width, and keep labels to two or three words. - The units. They are separate blocks, so a unit can be deleted outright and the figure keeps its position. A prefix unit, a currency symbol for example, works by dragging the unit block ahead of the figure inside the same row. - The count. Delete a cell for three across, which is the other composition this band is drawn for. Five will crowd the figures at this measure; at that point step the figure size down. - The source note. It is what makes the row read as reported rather than asserted. If you delete it, delete the eyebrow too, or the masthead is left top-heavy. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The pattern states no font family anywhere. The figures, the labels and the heading all take whatever your theme sets, serif or sans. The baseline lock does not depend on the face, which is why the line-height is tuned rather than the position. - Palette. The wash is your base-2 where your theme has one, falling back to your base and then to a colour WordPress itself guarantees. Text is your contrast on the same terms. No accent slug appears anywhere in the section, in any rung, because an accent's brightness is unknowable and this band is entirely text on a ground. - The hairlines. Drawn in the separator's own currentColor, so they follow your text colour wherever your theme puts it, including in a dark style. - Spacing scale. Band padding, the gutters and the gap under each rule use the core spacing presets, so the section breathes at your theme's rhythm. ### What it decides for itself - Proportion. The figure scale, the negative tracking on it, the 0.85 line height and the small tracked label are the pattern's own. That ramp is the design. - The grid. Four equal cells, full-bleed ground, 1240px constrained inner. Below 782px WordPress stacks the cells to one column; each cell is self-contained, so a stacked stat keeps its figure, its rule and its label together and the section becomes a legible list rather than a broken row. - One tone for all text. Labels are not set in a lighter grey, because the only slugs that could supply one have unknowable brightness. Size, weight and tracking carry the hierarchy instead. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(3rem, 7vw, 4.75rem) Questions ## Stat row: common questions Does Stat row need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will Stat row match my theme? Choose by variation. Tonal band and Night band take your theme’s palette; Ledger paper brings its own colours. How many variations does Stat row have? 3: Tonal band, Ledger paper and Night band. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Stat row 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. 12KB of core-block markup, 6 blocks (column, columns, group, heading, paragraph, separator), 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 3 Colour From your theme or its own palette Type From your theme Motion None Blocks column, columns, group, heading, paragraph, separator Presets color 6, spacing 6, font-size 1 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 quadrant Four figures in a 2x2 inside a 1px currentColor plate, one hairline running the full width between the rows and one running the full height between the columns, both meeting the frame so the four figures sit in four panes of a window. Stats Preview pattern (https://patternpaste.com/pattern/stat-quadrant.html) 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 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. Stats Preview pattern (https://patternpaste.com/pattern/stat-stack.html)