Timeline axis: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-axis.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Free Standard # Timeline axis Five eras of one observatory hung across the page rather than down it. A single currentColor rule runs the full width of the section and each era hangs beneath it as a column: the year butted against the line, then a short title and two or three lines of copy. The eras are read side by side, so the reader compares them instead of scrolling through them. The rule is unbroken because the cells butt with no gutter, and each cell carries a left tick so its year reads as a mark on the axis. It is a history and not a process: nothing is numbered and nothing asks the reader to act. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The five eras. Duplicate a cell to add one. - The years. Plain text, so 1889, 1889-91 or Spring 1927 all set. - The era copy. Two or three lines each. - The titles. Under about 24 characters, or they take a third line in a cell and push the copy out of step with its neighbours. - The band. Ship the base on a light page and axis-inverted where the section should read as a dark interval between two pale ones. The signature moment ## The rule is an AXIS, not a rail The signature is that every year is measured against the same horizontal line. A rail puts one entry after another and the reader takes them in sequence, one at a time, with the previous one already scrolled past. An axis puts all five side by side and the reader compares them: 1889 against 2016, what the observatory looked at against what it looked through, in one glance. That is the thing a rail can never show, and it is why the copy in each column is written to be read against its neighbours rather than after them. 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 - Zero column gap. - The year at display size - The reading measure. 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 Five eras of one hilltop observatory, run across the page instead of down it. One horizontal rule spans the section and the eras hang beneath it as columns: the year butted against the line, a short title, two or three lines of copy. Core blocks only: core/group, core/heading, core/paragraph. ### The signature moment: the rule is an AXIS, not a rail The signature is that every year is measured against the same horizontal line. A rail puts one entry after another and the reader takes them in sequence, one at a time, with the previous one already scrolled past. An axis puts all five side by side and the reader compares them: 1889 against 2016, what the observatory looked at against what it looked through, in one glance. That is the thing a rail can never show, and it is why the copy in each column is written to be read against its neighbours rather than after them. The axis 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 band when you recolour it. #### How the line is kept continuous There is no separator block and no rule element. Each era is a core/group inside a grid, and each of those groups carries its own border-top. The grid's column gap is zero, so the five segments butt and form one unbroken line rather than five dashes with holes between them: this is the failure to watch for, and any horizontal gap between the cells reintroduces it. The space between eras comes from each cell's own left and right padding, never from the gap. Each cell also carries a border-left, which drops from the line as a tick at the start of its era, so the year reads as a mark ON the axis rather than as a number under it. The cells are grid items, so they share a row height and the five ticks are the same length. #### What happens as the page narrows The eras sit in a grid layout with a minimumColumnWidth of 13rem rather than in a core/columns row, because five columns of readable copy do not fit in a tablet. Five across at a desktop measure, three and two at 820, and one per row on a phone. When they stack, each cell's top border becomes a per-entry rule and the left tick becomes a bracket down the side of the entry, which still reads as a dated record even though the parallel comparison is gone: five columns cannot hold at 390 and pretending otherwise would ladder the copy into ribbons two words wide. Every wrapped row keeps a continuous rule of its own, because the rule belongs to the cells and not to a wrapper. Make it yoursVariations and the edits to make first ### What to change first - The five eras. Duplicate a cell to add one. Six will still fit a wide desktop and will fold sooner; more than six and the axis stops being comparable, which is the whole point of it. - The years. Plain text, so 1889, 1889-91 or Spring 1927 all set. Anything much longer than about eight characters wraps at the display size. - The era copy. Two or three lines each. Keep them the same length: unequal cells are the one thing that makes the row look accidental rather than measured. - The titles. Under about 24 characters, or they take a third line in a cell and push the copy out of step with its neighbours. - The band. Ship the base on a light page and axis-inverted where the section should read as a dark interval between two pale ones. ### The variation - axis-inverted moves one axis, colour, and nothing else. The ground takes the contrast chain and every piece of type takes the base chain; the composition is otherwise identical, cell for cell. The rule and the ticks are untouched, because currentColor follows the inverted text on its own. Every heading states its own colour explicitly, so a theme that colours headings through an element style cannot paint the titles into the dark ground. 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 chains ending on a colour WordPress guarantees. The axis and the ticks are currentColor. - Your spacing scale. Every gap, including the drop from the axis to the year and the space between wrapped rows, is a spacing preset. ### What it decides for itself - Full bleed with a 1240px measure, and a 13rem minimum cell, which is what produces five across at that measure. - Zero column gap. That is the continuity of the line, not a spacing taste. - The year at display size, clamp(1.75rem, 2.6vw, 2.75rem), set hard against the rule with a 1.0 line-height so the digits butt it. - The reading measure. A cell is about 210px wide at 1240, which runs the copy at roughly 28 characters. That is the practical cap on how much any one era may say. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.75rem, 2.6vw, 2.75rem) 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, which is why they are plain paragraphs and not a core/list: an ordered list would renumber itself and would refuse a date. It is also neither of the other two patterns in this section. timeline-rail is six entries down one vertical hairline, read in sequence. timeline-decades is twenty single lines grouped under decade heads. This one is the only one that runs the time axis horizontally, and the orientation is the product: it holds fewer entries than either, on purpose, because five is the most that can be compared side by side without the copy laddering. ### 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 borders are on groups inside the grid rather than on the grid itself, so the line survives a cell being added, removed or reordered. Questions ## Timeline axis: common questions Does Timeline axis need a plugin? No. It is built only from core WordPress blocks (group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Timeline axis 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 axis have? 2: Open axis and Inverted axis. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Timeline axis 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 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 archive A history set as a contact sheet: eight square photographs four across in two tight rows, each filed under a currentColor hairline with the date in wide-tracked caps and three or four words of title. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-archive.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### The spread as chapters Three eras as three chapters, each one a wide 21:9 photograph with its type filed beneath it: the date range at display size on the left, the title and a paragraph of copy on the right. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-chapters.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline on a cover A whole history laid over one full-bleed photograph. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-cover.html)