# Steps screens > A software walkthrough in four columns: a 16:10 frame with an example photograph 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. Example images are included and can be replaced in the editor. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/steps-screens.html Section: How it works Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: group, heading, image, paragraph Keywords: steps, process, onboarding, screenshots, how it works, product tour, setup ## Variations (2) ### Numeral on the seam (the default) Identical markup in every theme. Four screens with the numeral riding the seam under each one, the frames ruled in currentColor so they follow your text, and the chip on your contrast with your base on it. ### Titles on the seam Identical markup in every theme. The chip grows into a full-width bar and takes the step title up onto the seam with it, so under each screen there is one sentence and nothing else. A denser run for a page that already has a heading above it. --- ## 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 include example photographs to show the composition, with the aspect ratio and `scale: cover` already set. Choose Replace to use your own screenshots; the examples are photographs, not software screenshots. ## 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 needs the plugin Nothing. Core blocks only: group, columns, column, image, paragraph, heading. No script, no stylesheet, nothing to keep updated. ## 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. ## Notes - Every colour is a fallback chain ending on a colour WordPress guarantees, and every rule is `currentColor`. - Example image URLs travel with the copied markup. Replace these photographs with screenshots of the process you are explaining. - 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 type Off the theme's ladder on purpose, because the size is the composition: - paragraph at 2rem ## Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose **Replace** to use your own Media Library files. See [image credits](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.