A three-part feature set: a display heading, one line of supporting copy, then an even three-column grid with generous gutters. Core blocks only, so there is nothing to install and nothing to keep updated.
The signature moment
Structural numerals
The index numbers are the structure, not decoration. 01, 02 and 03 are set at display size, larger than the headings they introduce, in the slot where a small uppercase label would normally sit. Each one hangs off a hairline rule that runs the full width of its column, so the three rules and the three numerals form the grid you actually read the section by. Remove the numerals and the pattern loses its shape, which is the test of whether a device is structural.
The numerals are large text and are colour-filled from your palette rather than from ours. Everything else in the section is held to a quiet floor so the numerals stay the one thing you remember.
What it inherits from your theme
Effectively all of the look:
- Typeface. The pattern states no font family anywhere. Headings, numerals and body copy all take whatever your theme sets, serif or sans.
- Palette. The ground is your
base, the text is yourcontrast, and the numerals prefer youraccent-2before falling back tocontrast. Each of these is a fallback chain ending on a colour WordPress itself guarantees, so the section paints in a theme with a full palette and still paints in a theme with none. - Spacing scale. Section padding, the gutters between columns and the gaps inside each column all use the core spacing presets, so they resize with your theme's own rhythm rather than fighting it.
- Rules. The hairline above each numeral is drawn in
currentColor, so it follows your text colour wherever your theme puts it, including in a dark style variation.
What it decides for itself
- Proportion. The numeral scale, the tight negative tracking on the display type and the relaxed line height on the small body copy are the pattern's own, because that ramp is the design.
- The grid. Three even columns with a wide gutter, full-bleed ground with a 1240px constrained inner. Below 782px WordPress stacks the columns to one, and the rule-plus-numeral pairing keeps each item reading as a distinct step rather than a run-on list.
- The intro measure. Heading and lede share a 640px measure inside the 1240px grid, so the supporting line reads at a comfortable length instead of running the full width of the section at tablet size. Widen it and the lede becomes a wall; the grid below is the wide element and the intro is not.
- Emphasis. The numerals are deliberately larger than the headings. That inversion is the point of the pattern.
What you change first
- The copy. Three headings and three sentences. Keep the headings to three or four words so they sit on one line beside a numeral that size.
- The count. Add or delete a column and renumber. Four columns still work at this measure; five will crowd the numerals, and at that point drop the numeral size a step.
- The numeral colour. It is a chain, so the fastest change is to swap the first rung for whichever accent slug your theme actually uses. If you would rather the numerals matched the body text, delete the colour attribute entirely and they inherit
contrast. - The section padding. The vertical padding uses the largest core spacing preset. Step it down if this section sits between two others that already carry their own air.
Display type18 words
Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(3.5rem, 6.5vw, 5.25rem)
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…