Steps ledger: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/steps-ledger.html Core Patterns (https://patternpaste.com/patterns/) How it works (https://patternpaste.com/patterns/steps/) Catalogue access Standard # Steps ledger , 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - 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. - The numerals. They are plain text. - The column heads. No. - The heading and the lede. The heading is built for six to nine words. - The footnote. The tracked line under the table is optional. - The ground. Ship the base on a light page and the night-schedule variation where the page needs a hard change of ground. 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. 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. - Its own ground and its own vertical padding. - The three column widths - The reading measure inside the wide column. - The display ramp. - The closing rule. 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 "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. Make it yoursVariations and the edits to make first ### What to change first - 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. - The numerals. They are plain text. 01-05, Week 1-Week 5, or 09:30-16:00 all fit the column as authored. - 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. - 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. - 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. - The ground. Ship the base on a light page and the night-schedule variation where the page needs a hard change of ground. ### The styled variation Cobalt and chalk keeps the printed schedule on chalk paper, with cobalt numerals, rules and Arial Narrow headings. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2rem, 3.6vw, 3.25rem) Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - 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. Questions ## Steps ledger: common questions Does Steps ledger need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Steps ledger match my theme? Choose by variation. Day schedule and Night schedule take your theme’s palette; Cobalt and chalk brings its own colours. How many variations does Steps ledger have? 3: Day schedule, Cobalt and chalk and Night schedule. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Steps ledger free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 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. 20KB of core-block markup, 5 blocks (column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) 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 Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 5, 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 ### Process delivery manifest A three-phase handoff unfolds through nested document frames: the brief contains the proof, and the proof contains the final delivery. How it works Preview pattern (https://patternpaste.com/pattern/steps-delivery-manifest.html) Shot in Twenty Twenty-Five How it works No plugin needed ### 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. How it works Preview pattern (https://patternpaste.com/pattern/steps-run.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)