Timeline rail: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-rail.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Free Standard # Timeline rail Six dated milestones hung on one continuous currentColor hairline: the year in a narrow column set against the rule, the event title and one short paragraph on the other side of it. The rail runs on above the first year and below the last entry, so the section reads as a length of a longer history rather than a closed list. It is a history and not a process: nothing is numbered and nothing asks the reader to do anything. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The six entries. Duplicate a row to add one. - The years. Plain text, so 2009, Spring 2009 or Q1 all set. - The entry copy. One sentence that says what changed. - The heading and lede. Written to say the rail is open at both ends. - The side. Ship the base for a normal page, and rail-mirror where the section sits against something on the left of the page. The signature moment ## The rail runs past both ends The signature is that the hairline starts above the first year and carries on below the last entry. The first entry's copy group takes a spacing-70 top padding and the last one takes a spacing-70 bottom padding, so the rule exists for a stretch where there is nothing beside it at either end. A history that begins exactly at its first entry and stops exactly at its last one reads as a closed list of six things. This one reads as a length cut out of something longer, which is what a company history actually is, and the last entry says so in as many words. 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 16/84 split - The reading measure. - The alignment of the year to its entry. 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 milestones down one continuous hairline. The year hangs in a narrow column against the rule, the event sits on the other side of it. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph. ### The signature moment: the rail runs past both ends The signature is that the hairline starts above the first year and carries on below the last entry. The first entry's copy group takes a spacing-70 top padding and the last one takes a spacing-70 bottom padding, so the rule exists for a stretch where there is nothing beside it at either end. A history that begins exactly at its first entry and stops exactly at its last one reads as a closed list of six things. This one reads as a length cut out of something longer, which is what a company history actually is, and the last entry says so in as many words. The rail is a structural mark carrying the whole composition, so it is currentColor and never an accent: it cannot resolve to nothing, it follows your text colour, and it inverts with the section if you recolour it. #### How the rail is built, and why it is unbroken There is no separator block and no rail element. Each entry is a two-column row whose right column holds a group with a border-left, and consecutive entries carry no gap between them, so those borders touch and form one line. The entries' own top and bottom padding is what spaces the content, not the gap between rows. That is why the rule is continuous rather than a stack of six dashes, and it is also why adding an entry cannot break it. The columns do not stack. isStackedOnMobile: false keeps the year beside its entry at 390, which is the measured way to beat core's flex-basis: 100% !important rule. If the row stacked, the year would drop above the copy and the rail would break into six pieces at exactly the width where a timeline most wants to be one line. The year column is 16%, which is about 56px at 390 and holds a four-digit year at the clamp() floor with room to spare. Make it yoursVariations and the edits to make first ### What to change first - The six entries. Duplicate a row to add one. The only thing to remember is that the first row carries the larger top padding and the last row the larger bottom padding: those two values are the run-past, and they belong to whichever rows are first and last. - The years. Plain text, so 2009, Spring 2009 or Q1 all set. Anything much longer than four characters wants a wider first column. - The entry copy. One sentence that says what changed. Two sentences still fit; three turn the rail into a document. - The heading and lede. Written to say the rail is open at both ends. If you close the rail by removing the run-past, change that sentence too. - The side. Ship the base for a normal page, and rail-mirror where the section sits against something on the left of the page. 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, both ending on a colour WordPress guarantees. The rail is currentColor. - Your spacing scale. Every gap in the section, including the run-past at the two ends of the rail, is a spacing preset, so a theme with a generous scale gets a longer overhang. ### What it decides for itself - Full bleed with a 1240px measure. - The 16/84 split and the right-aligned year, so the years sit snug against the rule and form a hard edge down the section. - The reading measure. Each entry's paragraph sits in a nested constrained group at 34rem, so the copy runs at about 65 characters instead of the full column. - The alignment of the year to its entry. The year's margin-top is the same spacing preset as its entry group's padding-top, so the two tops line up in any theme, including the first entry where both are the larger run-past value. Technical notesBlock mechanics, responsive behaviour and constraints ### Why it is a history and not a process steps-ledger and steps-run are processes: numbered, ordered, and the reader is inside them, deciding whether to start. Nothing here is numbered, nothing is counted, and there is no next step. The years are real dates rather than positions in a sequence, which is why they are set in a plain paragraph and not in a core/list: an ordered list would renumber itself and would refuse a date. It is also not timeline-decades, the other pattern in this section. That one holds twenty single lines grouped under decade heads and has no rail at all. This one is six open entries, each with room for a sentence, on a rule. Six moments against thirty years is the difference, and it is a density difference rather than a styling one. ### Notes - Core blocks only. No plugin, no script, no separator. - Every colour is a fallback chain ending on a guaranteed colour, and every rule is currentColor. - The rail is a border on a group inside a column, not on the column itself, so it does not depend on core/column border support. Questions ## Timeline rail: common questions Does Timeline rail 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 rail 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 rail have? 2: Open rail and Mirrored rail. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Timeline rail free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Read the markup #### 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 Free 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 6, 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 parallel Two histories run down the page together and are compared row by row: one track is the organisation itself, the other is the wider field it worked in, and a shared year sits between them. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-parallel.html) 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 ### Timeline stair Six dated entries that step across the page as they descend. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-stair.html)