Timeline stair: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-stair.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # Timeline stair Six dated entries that step across the page as they descend. Each entry is indented one step further right than the one above it and carries a currentColor top rule across its own width, so the run reads as a flight of treads and the indent itself measures how far through the history you have read. Nothing is numbered and no rail is drawn. On a phone the columns stack and the staircase flattens into a plain ruled list, which is the same history at one width. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The six entries. Duplicate a row to add one, then set its spacer column's width in the block's settings, which writes both the {"width":"48%"} attribute and the inline flex-basis:48%. - The ramp itself. Eight points per step is the default. - The years. Plain text, so 1948, Spring 1948 and Winter 1948-49 all set without changing the layout, since nothing is column-bound. - The entry copy. One sentence that says what changed, two at most. - The direction. Ship the base where the section opens a page, and stair-descending where it closes one: that variation starts at the right and walks back to the margin, so the reader is returned to the edge the next section starts from. The signature moment ## The indent IS the passage of time The signature is that nothing counts the entries and nothing draws a rail: how far through the history you are is written in how far across the page the entry has walked. Each entry is indented one step further right than the one above it, and each carries a currentColor top rule across its own width, so six consecutive rules of decreasing length stepping right read as a flight of treads. A reader who lands halfway down the section knows they are halfway through it before they have read a word, from the position of the tread alone. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed with a 1240px measure. - The ramp. - The tread. - The reading measure - The year as a tracked mark under the 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 Six dated entries that walk across the page as they descend. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph. ### The signature moment: the indent IS the passage of time The signature is that nothing counts the entries and nothing draws a rail: how far through the history you are is written in how far across the page the entry has walked. Each entry is indented one step further right than the one above it, and each carries a currentColor top rule across its own width, so six consecutive rules of decreasing length stepping right read as a flight of treads. A reader who lands halfway down the section knows they are halfway through it before they have read a word, from the position of the tread alone. That is a structural mark carrying the whole composition, so the rule is currentColor: it cannot resolve to nothing, it follows the theme's text colour, and it inverts with the section if the section is recoloured. #### How a step is built, and why it is columns rather than margins Each entry is a core/columns of two children. The first is an empty core/column whose width is the indent for that step: 0%, 8%, 16%, 24%, 32%, 40%. The second takes the remainder and holds the entry: a group with border-top: 1px solid currentColor, then the year, the title and the copy. The empty column carries no content at all, which is what the editor itself writes for a column nobody has filled. Margins would have expressed the same indent and would have been worse in two ways. A margin on a child of a constrained layout beats the layout's own margin-left: auto and moves the block rather than insetting it, and a margin does not collapse on a phone. A column width does both correctly and is one attribute per step. The blockGap is 0 on both axes. On the horizontal axis that makes the indent exactly the spacer column's percentage rather than the percentage plus a gap; on the vertical axis it means the empty spacer contributes no height when the row stacks. The rhythm between entries is the entry group's own padding-bottom. #### What happens at 390 Core stacks columns below 782px, and this pattern lets it: isStackedOnMobile is left at its default, so the spacer column becomes a full-width block of zero height and drops out of the picture, and every entry takes the full measure. The staircase flattens into a plain stack of ruled entries, which is the correct reading of it on a phone: the indent needs room to be a signal, and at 390 there is no room, so the six currentColor rules do the separating on their own. The spacer leaves no visible gap because it has no content and the row's vertical blockGap is 0. This is the opposite decision from timeline-rail, which sets isStackedOnMobile: false because its rail would break into six pieces if the row stacked. Here the rule is a tread per entry rather than one continuous line, so stacking loses the staircase and keeps the history. #### Holding the measure down the flight By the last step the content column is 60% of 1240px, which is still about 740px, and the copy would have run as a wall at the top of the section and a ribbon at the bottom. Each entry's paragraph therefore sits in a nested constrained group at 30rem with justifyContent: left, so every entry reads at about the same measure whatever its step is. The measure is held with a nested group and never with padding-right, which on a direct child of a constrained band moves the block instead of narrowing it. Make it yoursVariations and the edits to make first ### What to change first - The six entries. Duplicate a row to add one, then set its spacer column's width in the block's settings, which writes both the {"width":"48%"} attribute and the inline flex-basis:48%. The two content columns must add to 100% with it. - The ramp itself. Eight points per step is the default. A shallower ramp (four points) reads as a drift rather than a stair; a steeper one runs the last entry out of measure, which is what the 30rem group is protecting. - The years. Plain text, so 1948, Spring 1948 and Winter 1948-49 all set without changing the layout, since nothing is column-bound. - The entry copy. One sentence that says what changed, two at most. Three turns the flight into a document. - The direction. Ship the base where the section opens a page, and stair-descending where it closes one: that variation starts at the right and walks back to the margin, so the reader is returned to the edge the next section starts from. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. - Your colours. base for the ground, contrast for the type, each ending on a colour WordPress guarantees. Every rule is currentColor. - Your spacing scale. The gap under each tread, the space between entries and the section's own padding are all spacing presets, so a theme with a generous scale gets an airier flight. ### What it decides for itself - Full bleed with a 1240px measure. - The ramp. Eight points of indent per step, six steps, ending at 40%. That is a step big enough to see at 1240 and small enough that the last entry still has a readable column. - The tread. A top border on the entry group, not a core/separator: Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub, and a group border is a per-entry width by construction. - The reading measure, at 30rem, held constant while the column narrows. - The year as a tracked mark under the rule rather than a display number, so the tread and the date read as one object and the title keeps the weight. Technical notesBlock mechanics, responsive behaviour and constraints ### Why it is a history and not a process Nothing is numbered, nothing is counted and nothing asks the reader to act. The years are real dates rather than positions in a sequence, which is also why they are plain paragraphs and not a core/list: an ordered list would renumber itself and would refuse a date. The steps are not stages of anything; they are only how far along the reader is. It is neither of the other two timelines. timeline-rail hangs six moments on one continuous hairline with the years in a column beside it. timeline-decades packs twenty single lines under four decade heads and has no rail at all. This one has no rail and no column of years: the indent replaces both, and it is the only one of the three whose structure is horizontal. ### Notes - Core blocks only. No plugin, no script, no separator, no image. - Every colour is a fallback chain ending on a guaranteed colour, and every rule is currentColor. - The first entry's spacer column is 0%, so the structure of the first step is identical to every other step and the run can be reordered or reversed by changing widths alone. stair-descending is exactly that: the same six entries with the ramp read backwards. Questions ## Timeline stair: common questions Does Timeline stair 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 Timeline stair match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Timeline stair have? 2: Descending stair and Stair reversed. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Timeline stair 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. 18KB 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 Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Team About day in hours An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then. Example images included and replaceable in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/about-day-in-hours.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 Timeline Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 5, font-size 3 WordPress 7.0+ Continue exploring ## Next in Timeline Explore all 20 Timeline patterns (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline spread Three eras, each given a whole editorial spread: a photograph on one side and, on the other, the date range set at display size with a title and a paragraph of copy under it. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-spread.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### The archive as a strip A history taken in one pass: eight narrow 2:3 photographs in a single row across the whole measure, set hard against each other, each filed under a currentColor hairline with its date in wide-tracked capitals and nothing else. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-strip.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### 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. Timeline Preview pattern (https://patternpaste.com/pattern/availability-calendar.html)