[Library] How it works

Catalogue accessStandard

Steps ledger

A process set as a printed schedule: a ruled column-head row (No., Stage, What happens) and then five full-width rows, each one a display numeral, a title and a short description in three columns, hairlines in currentColor between them and a closing rule under the last. The numerals and the column heads make it read in order, which is what lets the same table serve as a conference agenda. 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 "how it works" section built as a table of ruled rows rather than as a row of cards. Five stages, each one a numeral, a title and a short description, under a column-head row and between hairlines that run the full measure of the section.

The signature moment

It reads as a printed schedule

The signature is the column-head row. Above the first stage sits a strip of three tiny, widely-tracked uppercase labels: No., Stage, What happens. It costs almost nothing and it changes what the section is. Without it, five numbered rows are a list. With it, the eye reads a document that has columns, which means the rows are entries and the order is load-bearing.

That is also what gives the pattern its second job. The same table is a conference agenda. Change No. to Time, put 09:30 where 01 is, and the process becomes a running order without touching a single style. Nothing in the markup knows which of the two it is: the numeral column is a paragraph, not an ordered list, precisely so it can hold a time, a date or a week number instead of a count.

It is deliberately not the other ledger in the catalogue. faq-ledger is a two-column question and answer where the reader picks a row and skips the rest; this one is read top to bottom, and the numeral column is the reason. It is also not steps-run, which threads four steps across a single hairline.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. Serif theme, geometric sans theme, either way the numerals and the labels are set in your face, and the tracking on the labels is what carries the schedule feeling rather than a chosen face.
  • Your colours. The ground asks for base, the type asks for contrast, and both fall back to core's white and black, which no theme can remove. Every rule in the table is currentColor, so the hairlines are whatever colour your text is: they cannot resolve to nothing, and they cannot drift away from the type when you recolour the section.
  • Your spacing scale. Section padding and row padding are spacing presets, so a theme with a generous scale gets an airier schedule and a tight one gets a denser one.

What it decides for itself

  • Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so the hairlines run as long rules rather than as short dashes in a body column.
  • Its own ground and its own vertical padding. It states both, because it is built to sit between other sections on a page and cannot borrow air from a neighbour or assume what colour that neighbour is.
  • The three column widths, 12/30/58. The numeral column is narrow enough that the numbers form a hard vertical edge down the left, and wide enough that a two-digit numeral or a time never wraps.
  • The reading measure inside the wide column. The description sits in a nested constrained group at 34rem, so the copy runs at about 65 characters instead of the 700px the column would otherwise give it.
  • The display ramp. The numerals are a clamp() running to 3.25rem at line-height 1, set against 13px labels with 0.2em tracking. The scale collision between those two is what stops the table looking like a spreadsheet.
  • The closing rule. The last row carries a bottom border as well as a top one, so the table closes instead of trailing off.

Below 782px WordPress stacks the columns, and each stage becomes numeral, then title, then description, still between its hairlines. The column-head row stacks with them and reads as three small labels at the top of the table.

What to change first

  1. The five stages. Titles are one or two words on purpose; the description is one sentence that says what happens and what the reader ends up holding. Add or delete a row by duplicating a row group, and remember to move the bottom border onto whichever row is last.
  2. The numerals. They are plain text. 01-05, Week 1-Week 5, or 09:30-16:00 all fit the column as authored.
  3. The column heads. No. / Stage / What happens is the schedule reading. If you want a quieter section, delete that one row group and the table becomes a plain ruled list.
  4. The heading and the lede. The heading is built for six to nine words. The lede is held to 40rem so it breaks into two or three lines rather than running the full band.
  5. The footnote. The tracked line under the table is optional. It exists to put one condition on the whole schedule; delete it and nothing shifts.
  6. The ground. Ship the base on a light page and the night-schedule variation where the page needs a hard change of ground.
Notes87 words
  • Core blocks only: group, paragraph, heading, columns, column. No plugin, no script, nothing to keep updated.
  • Every colour is a fallback chain ending on a colour WordPress itself guarantees, and every rule is currentColor, so nothing in the table can resolve to nothing.
  • The numeral column is not a core/list. An ordered list would renumber itself and would refuse a time, and it would put the count inside the same block as the title, which is exactly the three-column separation this pattern is for.
Display type18 words

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

  • paragraph at clamp(2rem, 3.6vw, 3.25rem)
Back to the library

Continue exploring

Next in How it works

Explore all 4 How it works patterns