[Library] Stats

Catalogue accessStandard

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. 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

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.

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.

What you change first

  1. 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.
  2. 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.
  3. 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.
  4. 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.
Why this is not the stat row and not the stat stack128 words

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.

Mechanics worth knowing330 words
  • 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.
The variations88 words
  • 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.
Contrast109 words

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 type18 words

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

  • paragraph at clamp(2.125rem, 5.4vw, 4.25rem)
Back to the library

Continue exploring

Next in Stats

Explore all 10 Stats patterns