Steps run: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/steps-run.html Core Patterns (https://patternpaste.com/patterns/) How it works (https://patternpaste.com/patterns/steps/) Free Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - 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. - The copy. One sentence each, 80 to 100 characters. - The heading and the eyebrow. The heading is built for eight to twelve words. - 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. - The closing note. The last line is fine print about timing. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed with its own measure. - The five-column grid. - Three steps, because four will not hold a sentence on a tablet. - The band's side padding and the gutters are clamp(), not presets. - Where the thread sits. - The display ramp. - Contrast. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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. Make it yoursVariations and the edits to make first ### The variation - 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. ### What to change first - 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. - The copy. One sentence each, 80 to 100 characters. Longer and the three columns stop reading as a row. - 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. - 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. - The closing note. The last line is fine print about timing. Delete it if the section is not about a schedule. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(3.5rem, 6vw, 5rem) Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - 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. Questions ## Steps run: common questions Does Steps run need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will Steps run match my theme? Choose by variation. Paper run and Night run take your theme’s palette; Denim and lemon and Folio bring its own colours. How many variations does Steps run have? 4: Paper run, Denim and lemon, Folio and Night run. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Steps run free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. Which WordPress version does it need? 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Timeline Availability calendar The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark. An open month carries a heavy top rule and a filled mark, a nearly full one a heavy rule and names the days left, and a booked month is struck through with an empty mark. A short line on how dates are held and one underlined link sit beside the heading. States no colour and no font of its own. (https://patternpaste.com/pattern/availability-calendar.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section How it works Access Free Plugin None, core blocks only Variations 4 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, heading, paragraph, separator Presets color 5, spacing 6, font-size 3 WordPress 7.0+ Continue exploring ## Next in How it works Explore all 9 How it works patterns (https://patternpaste.com/patterns/steps/) Shot in Twenty Twenty-Five How it works No plugin needed ### 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. How it works Preview pattern (https://patternpaste.com/pattern/steps-ledger.html) Shot in Twenty Twenty-Five How it works No plugin needed ### 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. How it works Preview pattern (https://patternpaste.com/pattern/steps-screens.html) Shot in Twenty Twenty-Five How it works No plugin needed ### Process switchback Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order. How it works Preview pattern (https://patternpaste.com/pattern/steps-switchback.html)