[Library] How it works

Catalogue accessStandard

Steps run

A process as one horizontal run: three display numerals across the band, each over a short title and a packed line of copy, with a single hairline threading the gaps between the numerals at numeral height so the row reads as a sequence rather than as three separate cards. The thread is currentColor, so it follows your text. Below 782px the columns stack and the same two hairlines become the rules between the steps. 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

A process section: three steps across one full-bleed band, each a display numeral over a short title and one packed line of copy. It is the horizontal answer to "how does this work", built to sit between a features section and a closing ask without borrowing air from either.

The signature moment

The thread between the numerals

The signature is the connecting rule. Between each pair of numerals sits a narrow column carrying nothing but a 1px hairline, set at numeral height rather than under the type. So the eye runs 01 --- 02 --- 03 and reads the row as one sequence, not as three independent cards that happen to be numbered. Remove the two hairlines and the section becomes a generic three-column grid; that is the test of whether the signature is doing any work.

The thread is a structural mark, so it is currentColor and never an accent. It cannot blank, it inverts with the band, and it follows whatever colour your theme puts the text in.

What the thread becomes at 390

Core stacks columns below 782px, and the thread columns stack with everything else. Each hairline goes full width and lands between the step above it and the step below it, so the same two rules that threaded the run horizontally become the two rules that divide it vertically. The sequence still reads; it just turns through ninety degrees. Nothing is hidden and nothing is duplicated: there is exactly one set of hairlines in the markup and it does both jobs.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The numerals, the titles and the copy are all set in yours.
  • Your colours. The band asks for base and the type asks for contrast, the two slugs every stock block theme defines, each on a fallback chain ending on a colour WordPress itself guarantees. The thread names no colour at all.
  • Your spacing scale. Band padding, the drop to the run and the gaps between the columns are spacing presets, so a theme with a generous scale gets a taller section without you touching it.

What it decides for itself

  • Full bleed with its own measure. The band spans the viewport and holds its content to 1240px, so it is a section rather than another column of text, and it states its own ground and its own vertical padding rather than relying on whatever section sits above it.
  • The five-column grid. Three step columns at 28% with two 8% thread columns between them. The step columns are deliberately narrow: the copy is meant to be one dense paragraph, not a description.
  • Three steps, because four will not hold a sentence on a tablet. It ran four at first. A Columns block does not stack until 782px, so at 820 the row was still four steps and three threads: measured in Twenty Twenty-Four, each step had about 91px and its sentence laddered to 14 characters a line over eight lines, in every theme measured. Four steps in one row cannot be rescued by narrowing the threads, because the widths are percentages of the same container. Three can, and does, with room to spare.
  • The band's side padding and the gutters are clamp(), not presets. Every other spacing in the section is your scale. These two are not, because they are what is left over after them: in Twenty Twenty-Four spacing|40 between seven columns took 324px out of a 754px band, and a step column cannot give back what the gutters have taken.
  • Where the thread sits. The hairline's top margin is a clamp() tuned to roughly half the numeral's line box, so it crosses the numerals at their own height at every width above the stacking point rather than sliding under them.
  • The display ramp. The numerals are a clamp() at line-height 0.85 with tight negative tracking, against a tracked uppercase eyebrow and 15px-floor copy. The scale collision between the numeral and its own caption is what gives the run its rhythm; the thread is what turns the rhythm into an order.
  • Contrast. Everything readable is a contrast-chain on a base-chain ground (inverted in the variation). The numerals are display-size and are claimed at the 3:1 floor; the titles, the copy and the closing note are body and are claimed at 4.5:1.

What to change first

  1. The three titles. They are one or two words on purpose; the column is about 350px wide at 1400 and a long title breaks into three lines and takes the thread's air with it.
  2. The copy. One sentence each, 80 to 100 characters. Longer and the three columns stop reading as a row.
  3. The heading and the eyebrow. The heading is built for eight to twelve words. The eyebrow is optional; delete it and the run still reads.
  4. The number of steps. Three is what the grid is tuned for, and it is tuned for three because of the tablet, not because of the desktop. For four, add one step column and one thread column and drop the step widths to about 21%, then measure the copy at 820 before you ship it: that is the shape this pattern was cut back from. Always add or delete numerals and threads in pairs, or the run ends on a hairline.
  5. The closing note. The last line is fine print about timing. Delete it if the section is not about a schedule.
The variation52 words
  • Night run (variations/night-run.html). The colour axis, and the only colour move the contract can guarantee: the ground becomes your contrast and the type your base. The thread inverts with it for free, because currentColor follows the type. Nothing else moves, so the buyer is choosing loudness and not a second design.
Notes99 words
  • Core blocks only: group, paragraph, heading, columns, column, separator. No plugin, no script, no stylesheet, nothing to keep updated.
  • Every separator carries is-style-wide. Without it Twenty Twenty-Four renders a separator as a centred 100px stub, and the thread would be two dashes in the middle of the gaps rather than two rules across them.
  • Every colour is a fallback chain ending on a colour core guarantees, so nothing in the band can resolve to nothing.
  • The preview shows stock-theme colours. Your site resolves whatever your theme.json and your Global Styles say, which is the point.
Display type18 words

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

  • paragraph at clamp(3.5rem, 6vw, 5rem)
Back to the library

Continue exploring

Next in How it works

Explore all 4 How it works patterns