[Library] How it works

Catalogue accessStandard

Steps cards

Four plated steps in a row, each one sitting lower than the one before it: the plates are grid children stretched to their row and each carries its own bottom margin, so the feet step down in a straight diagonal whatever the copy does to the words above them. A tracked step label, a short title and one sentence inside each plate, ruled in currentColor. The grid takes a 16rem minimum column, so the row is four across on a desktop, two on a tablet and one on a phone, where the steps become a plain numbered run. 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 plated steps in a row, each one sitting a little lower than the one before it. A process section for a page that wants the stages as objects rather than as a table or a thread.

The signature moment

The feet descend

The plates step down, and it is the feet that do it. Each plate carries its own bottom margin, 4.5rem, 3rem, 1.5rem and none, so the bottom edges land on a straight diagonal running down to the right. The sequence is read as a stair before any of the labels are read, which is the one thing a row of four equal cards cannot do.

The mechanism matters, because the obvious way to build a stair is a descending top margin, and that one lies. A plate's height depends on how long its sentence is, so top offsets put the tops on a diagonal and leave the feet wherever the copy happened to end. Here the plates are the children of a grid, and a grid item's default align-self is stretch, so every plate is exactly as tall as its row and its bottom margin lifts its foot by a known amount. A foot is row bottom - its own margin, whatever the sentence above it does. Rewrite all four descriptions to different lengths and the stair survives, with the tops staying level rather than going ragged.

It was four bottom-aligned columns until 2026-08-22, which drew the same diagonal and could not reflow: at 820 a Columns block is still four across, and each plate had about 174px to hold a sentence, laddering the copy to 13 characters a line over eight lines in Twenty Twenty-Four. The grid gives the same stair at 1280, two plates a row at 820 with the descent carrying on across the rows, and one plate a row on a phone.

The drops are clamp(0rem, 3.6vw, 4.5rem) and friends rather than fixed lengths, so the stair is a full step at 1400, a shallow one at 900, and closes to nothing by the time the columns stack.

It is deliberately not the other two steps patterns. steps-ledger is a printed schedule of ruled rows read top to bottom; steps-run is one horizontal thread of display numerals; this one is four objects on a diagonal, and its numbers are small tracked labels precisely so it does not become a third numeral pattern.

What it inherits from your theme

  • The typeface. No font family is stated, in the base or in the variation.
  • Your colours. The band asks for base behind contrast, both ending on a colour WordPress itself guarantees, so neither can resolve to nothing. Every plate rule is currentColor, so the plates follow the type: recolour the section and the boxes recolour with it.
  • Your spacing scale. Band padding, plate padding, the gap inside a plate and the gutters are all spacing presets.

What it decides for itself

  • Full bleed with its own 1240px measure, its own ground and its own vertical padding, because it is built to sit between other sections.
  • The four drops, which are the pattern. They are stated on the plates, not on the columns, so the column keeps its own box and the plate is the thing that moves.
  • A small tracked label instead of a display numeral. Step 01 at 13px against a 26px title is the ramp; the loud numeral belongs to the other two patterns in this section.
  • One sentence per plate. Four plates of roughly equal copy keep the tops nearly as straight as the feet, which is what makes the stair read as a decision rather than as an accident.
  • A grid with a 16rem minimum column, not four columns. The row is four across where four plates have room, two where they do not, and one on a phone, and the change happens at the width the copy runs out of room rather than at the single 782px line core draws for a Columns block. The tracks are equal, so the plates are exactly equal in width; on a phone the drops close to almost nothing and it becomes a plain run of four numbered plates.

What to change first

  1. The four stages. The copy here is a hiring process, which is the second job this shape does well: a label, a one-word stage, one sentence of what actually happens. Swap it for a service process and nothing moves.
  2. The drops. They are the design. Set all four to 0 and you have a plain row of plates; steepen the first to 6rem and the diagonal gets aggressive. Keep them descending, and keep the last one at nothing so the row has a baseline.
  3. The count. Duplicate or delete a plate, then reset the drops so they still descend evenly. Three plates want roughly 3rem, 1.5rem, none. Nothing else has to change: the grid fits as many plates a row as the width allows.
  4. The label column. Step 01 can be Week 1, Stage A or a date. It is a paragraph, not a list, so nothing renumbers behind your back.
  5. The variation. Ship stair-ruled on a page that already has enough boxes on it: the plates keep the descent and lose three of their four sides.
What needs the plugin35 words

Nothing. Core blocks only: group, paragraph, heading. The row is a group with a grid layout, so there is no Columns block in the pattern at all. No script, no stylesheet, nothing to keep updated.

Notes83 words
  • Every colour is a fallback chain ending on a colour WordPress guarantees, and every rule is currentColor.
  • The stair is invisible to a screen reader and carries no meaning of its own: the order is in the labels and in the document order, and the diagonal is decoration on top of a correctly ordered run.
  • On a phone the grid is one plate a row, so it reads as four plates in a column with the labels doing the counting.
Display type40 words

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

  • body copy in the 16rem grid cards at clamp(0.9375rem, 1.05vw, 1rem): on the theme's medium a four-up card in Twenty Twenty-Four drops under 20 characters a line
Back to the library

Continue exploring

Next in How it works

Explore all 4 How it works patterns