[Library] How it works

Catalogue accessStandard

Steps screens

A software walkthrough in four columns: an empty 16:10 screenshot frame ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence. The chip is the section's mark: it inverts to your contrast with your base on it, so it reads as a tab pressed into the bottom edge of each screen. Image blocks ship empty for your own screenshots. 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 software walkthrough: four columns, each one an empty 16:10 screenshot frame above a numeral and a caption. It is the first pattern in the steps section with a picture in it, and it exists for the page that has to show the product rather than describe the service.

The signature moment

The numeral rides the seam

The numeral sits ON the seam between the frame and the caption, half in each. It is a small plate, inverted to your contrast with your base on it, whose top half covers the bottom edge of the screenshot frame and whose bottom half hangs into the caption. Nothing else in the section is inverted, so the four chips are the only dark marks on the band and the eye counts them before it reads a word.

That is also what makes the section legible as a sequence rather than as four pictures. Four framed screenshots side by side are a gallery; four framed screenshots each pinned by a numbered tab are steps, in an order, and the tab is what says which one you are on.

How the lap is built, and why it cannot collapse

A negative margin on a first child collapses into its parent's margin: block margins touch through a parent with no padding or border, and the overhang silently disappears. So the column is not a plain stack. Each column holds a vertical flex group (layout.type: flex, orientation: vertical, justifyContent: stretch, blockGap: 0) with three children in it: the frame, the numeral row, then the caption. A flex child's margins never collapse with its container's or with its siblings', so the numeral row's margin-top: -1.5rem moves it and nothing else.

The -1.5rem is exactly half the chip: the numeral is a fixed 2rem at line-height 1 inside 0.5rem of vertical padding, which is a 3rem box. It is deliberately not a clamp(), because the lap has to be half of a height that is known rather than half of a height that depends on the viewport.

The chip's ground is the contrast chain and its type is the base chain, which is a pair every theme defines, and it is opaque. Type never sits on the photograph: the numeral sits on its own plate, and the plate happens to lie over the picture.

It is not frame-quartet, which is four square plates with labels and no sequence, and not steps-run or steps-ledger, which carry no picture at all.

What it inherits from your theme

  • The typeface. No font family is stated anywhere, in the base or in the variation. The numerals, the titles and the captions are all set in your face.
  • Your colours. The band asks for base behind contrast, and the chip inverts that pair; both chains end on a colour WordPress itself guarantees, so neither can resolve to nothing. Every frame rule is currentColor, so the frames follow your text wherever your theme puts it.
  • Your spacing scale. The band padding, the frame mat, the gap under each chip and the gutters between columns are spacing presets, so a theme with a generous scale gets an airier run.
  • Your images. The frames ship empty, exactly as WordPress writes them before a file is chosen, with the aspect ratio and scale: cover already set. Point them at your own screenshots and the crop is done.

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 and cannot borrow air or colour from a neighbour.
  • 16:10. Wide enough to read as an application window and shallow enough that four of them fit across the band without the captions falling off the fold. A UI screenshot in a 4:3 frame reads as a photograph.
  • The mat. Each frame is a currentColor hairline with a small pad inside it, so the chip laps onto paper rather than onto pixels, and a screenshot with a white background still has an edge.
  • The type ramp. A tracked eyebrow, a display heading, a 40rem lede, then captions at a 15px floor. The chip's 2rem numeral against the 13px eyebrow is the scale collision the section is built around.
  • Four columns with no widths. Above 782px WordPress gives width-less columns an equal basis, so the four screens are exactly equal; below it they stack, and each step becomes frame, chip, caption in turn.
  • The closing note is held to 29rem, in a nested constrained group, so it reads at about 70 characters instead of running the full width of the four screens above it.

What to change first

  1. The four screenshots. Take them at the same window width or the run will look ragged even though the frames are identical.
  2. The captions. One title of one or two words, one sentence that says what the user does on that screen. Not what the screen contains.
  3. The numerals. They are plain text in a plate, so 01-04 can become 1-4, or A-D, or Day 1-Day 4. A longer string simply makes a wider chip; only the height is load-bearing.
  4. The count. Duplicate or delete a whole column. Nothing is numbered by WordPress, so the numerals are yours to renumber.
  5. The variation. Ship seam-bar where the section sits under a heading that has already introduced it and the titles can move up onto the seam.
What needs the plugin18 words

Nothing. Core blocks only: group, columns, column, image, paragraph, heading. No script, no stylesheet, nothing to keep updated.

Notes80 words
  • Every colour is a fallback chain ending on a colour WordPress guarantees, and every rule is currentColor.
  • The images are empty on purpose. A pattern never ships a photograph: the preview on the product page is our use of one, the markup you copy is not a distribution of one.
  • If you change the numeral's font size, change the negative margin on its row to half the chip's new height, or the lap stops being a lap.
Display type16 words

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

  • paragraph at 2rem
Back to the library

Continue exploring

Next in How it works

Explore all 4 How it works patterns