Stat quadrant: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/stat-quadrant.html Core Patterns (https://patternpaste.com/patterns/) Stats (https://patternpaste.com/patterns/stats/) Free Standard # 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. Each pane is a tracked label, the figure at display size with its unit small beside it, and a caption of four or five words. The quadrant holds on a phone rather than stacking, so the window never becomes a list. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The four figures, their units and their labels. Keep a label to one or two words so it holds one line in half a phone, and keep a caption to four or five words for the same reason. - The heading and the footnote. The footnote is where the basis of the figures goes; a statistics section that does not say what it measured is decoration. - The plate. Delete the frame (the border key on the group holding the two rows, and the has-border-color class with it) and the quadrant becomes a free-standing cross of two rules, which is a quieter section and still reads. - The number of panes. This shape is four. The signature moment ## The hairlines cross Nothing here is a card. The panes have no borders of their own; the two rules that divide them are per-side borders on the cells, and every one of them runs edge to edge. The horizontal rule is the bottom border of the two top cells, which butt against each other, so it arrives at the frame on both sides. The vertical rule is the left border of the two right-hand cells, stacked one above the other, so it arrives at the frame top and bottom. They cross in the middle of the plate and the crossing is the whole design: a window, and the reason the plate carries no padding of its own. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing scale. ### Set by this pattern - The crossing rules and the frame - The cell padding - Proportion. - The footnote is held to 30rem 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 figures in a 2x2, inside a plate drawn as a 1px currentColor frame. One hairline runs the full width between the two rows, one runs the full height between the two columns, and both meet the frame, so the section reads as a window with four panes rather than as four boxes that happen to be near each other. Each pane carries a small tracked label, the figure at display size with its unit set small and tight beside it, and a caption of four or five words. ### The signature moment: the hairlines cross Nothing here is a card. The panes have no borders of their own; the two rules that divide them are per-side borders on the cells, and every one of them runs edge to edge. The horizontal rule is the bottom border of the two top cells, which butt against each other, so it arrives at the frame on both sides. The vertical rule is the left border of the two right-hand cells, stacked one above the other, so it arrives at the frame top and bottom. They cross in the middle of the plate and the crossing is the whole design: a window, and the reason the plate carries no padding of its own. Put padding on the plate and the rules stop short of the frame, and the cross floats in the middle of a box, which is what four cards look like. The air is therefore carried by each cell instead, which is also what keeps the rules touching when the figures are of different heights. ### Why this is not the stat row and not the stat stack The stats section now holds three readings of the same job and they are three different shapes. stat-row reads across: four figures in one line, each on its own short hairline, so the section is a band. stat-stack reads down: five full-width ruled rows with the figures flush to one hard right edge, so the section is a ledger. stat-quadrant reads as a block: two by two, divided by rules that meet a frame, so the four figures are one object with four parts and no first or last. Take the row for a strip under a hero, the stack when there are more than four figures and the labels need room, and the quadrant when the four are a set and want to be looked at together. Make it yoursVariations and the edits to make first ### The variations - Night plate. The plate inverts, not the band. The group carrying the frame takes your contrast as its ground and your base as its text, so the quadrant becomes a solid block sitting in an unchanged page and the two hairlines read as cuts in it rather than as rules on it. One axis moves, colour, and the composition, sizes and copy are identical to the base. Both slugs exist in every stock block theme, which is why this arrives everywhere and a tinted plate would not. ### What you change first - The four figures, their units and their labels. Keep a label to one or two words so it holds one line in half a phone, and keep a caption to four or five words for the same reason. - The heading and the footnote. The footnote is where the basis of the figures goes; a statistics section that does not say what it measured is decoration. - The plate. Delete the frame (the border key on the group holding the two rows, and the has-border-color class with it) and the quadrant becomes a free-standing cross of two rules, which is a quieter section and still reads. - The number of panes. This shape is four. Six is two rows of three, which means adding a third cell to each row and moving the vertical rule to the two middle cells; anything that is not a rectangle is the row or the stack instead. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. No font family is stated anywhere, in the base or the variation. - Palette. The band's ground and text are your base and contrast, each written as a fallback chain ending on a colour WordPress itself guarantees. No accent slug appears in any rung, and the frame and hairlines name no colour at all. - Spacing scale. The band's vertical padding, the space under the heading and the gap above the plate are core spacing presets, so the section's rhythm resizes with your theme. ### What it decides for itself - The crossing rules and the frame, which is the design and the one thing to leave alone. - The cell padding, clamp(1.125rem, 2.2vw, 2.25rem), stated rather than taken from a preset because it has to survive being half of a phone. - Proportion. The figures at clamp(2.125rem, 5.4vw, 4.25rem) on a 0.85 line height with -0.045em tracking; the units at 15 to 19px, uppercase; the labels at 14 to 15px with 0.18em tracking; the captions at 15 to 16px on a 1.55 line height. Nothing sits between the label and the figure, and that gap is what makes the pane read as a stamp. - The footnote is held to 30rem, in a nested constrained group rather than by a padding-right trick, so the basis line reads at about 70 characters instead of running the full 1240px band. ### Contrast Every pair in the base is your contrast on your base; in Night plate the panes are your base on your contrast, which is the same pair inverted. The figures are large display text, 34px and up at every width, and are claimed at 3:1. The labels, the units and the captions are body text and are held to 4.5:1, which is why the captions floor at 15px and the labels at 14px rather than sitting on core's 13px small preset. The frame and the hairlines are structural marks in currentColor and carry no text. Measured per host theme against the colours that actually resolve, not the authored chains. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.125rem, 5.4vw, 4.25rem) Technical notesBlock mechanics, responsive behaviour and constraints ### Mechanics worth knowing - The quadrant does not stack on a phone. Both core/columns rows carry isStackedOnMobile: false, which serialises to the is-not-stacked-on-mobile class that core's own :not() selector tests, and that is the only way to beat core's flex-basis:100%!important stacking rule. It is a design decision rather than a preference: the borders that make the window are per-side, so a stacked quadrant would leave a rule down the left of two cells and no rule at all under the last one. Everything in a cell is sized to hold at 390 in half a phone: the figure floors at 34px, the label at 14px and the caption at 15px. - The frame implies its own border style. A uniform border is written as {"width":"1px","color":"currentColor"} and serialises to border-color:currentColor;border-width:1px with the has-border-color class, which is the form core's own CSS resolves to a solid rule. The per-side cell borders state "style":"solid" explicitly, because that is what core's save() writes for a side. - Every rule is currentColor. The frame and both hairlines follow whatever colour the text is, in the base and in the variation alike, so no rung can resolve to nothing and no accent can turn a structural mark pale. - The plate's block gap is zero and so is each row's. The two core/columns rows butt against each other and the cells butt against their neighbours; a gap anywhere in that chain opens a stripe of ground through the middle of the window and breaks both rules. - The figure and its unit are one flex row. A core/group with flexWrap: nowrap and verticalAlignment: bottom puts the unit on the figure's baseline instead of a line of its own, and the 0.3rem gap is stated because a theme's default gap is sized for paragraphs. - No cell states a width other than 50%. The quadrant is square by construction and the labels are short enough to hold one line at that width in a serif theme and a sans one. Questions ## Stat quadrant: common questions Does Stat quadrant 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 quadrant 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 quadrant have? 2: Window and Night plate. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Stat quadrant free? Yes. It is one of 64 free Core Patterns: copy it and it is yours to keep and edit. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Free 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 4, font-size 2 WordPress 7.0+ Continue exploring ## Next in Stats Explore all 16 Stats patterns (https://patternpaste.com/patterns/stats/) ### Stat pillars Three monolithic architectural pillars in 1px currentColor outline frames: each pillar carries a tracked index eyebrow, a figure at display scale, a dividing hairline, a bold metric label, and a full paragraph of empirical context. Stats Preview pattern (https://patternpaste.com/pattern/stat-pillars.html) ### 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. Stats Preview pattern (https://patternpaste.com/pattern/stat-row.html) ### 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)