Timeline decades: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-decades.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # Timeline decades A long history set as a record: four decade heads, each opened by a 2px currentColor rule and carrying five dated single-line entries under it, twenty in all. There is no vertical rail and nothing is numbered; the eras are the only structure, and the whole density of the section is the point. Where a rail timeline shows six moments, this one shows the shape of thirty years. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The number of eras. Four is what makes the density read. - The five lines per era. Duplicate a line row to add one. - The era notes. The tracked line beside each decade is optional. - The decade heads. Plain paragraphs, not headings, so they can hold 1990s, Years one to five or Before the fire without putting four more entries into your page's heading outline. - The composition. Ship this one where the history runs down the page, and timeline-eras where you want the whole thing on one screen: the same four eras and twenty entries laid out as four columns across the band. The signature moment ## Density under a display decade The signature is the collision between a decade set at up to 44px and five lines of 17px under it that never wrap. The eras are the only structure in the section: one 2px currentColor rule opens each of them, and below that rule there is nothing but dates and lines. No hairline between entries, no numerals, no plates, no rail. That is what lets twenty entries sit in one section without reading as a table to be studied: the eye reads four things, and each of them happens to hold five. 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 - A 2px era rule, not a hairline. - The 26/74 head row. - The entry measure. - The line rhythm. 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 long history as a record: four decade heads, each opened by a 2px rule and carrying five dated single-line entries. Twenty entries in one section. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph. ### The signature moment: density under a display decade The signature is the collision between a decade set at up to 44px and five lines of 17px under it that never wrap. The eras are the only structure in the section: one 2px currentColor rule opens each of them, and below that rule there is nothing but dates and lines. No hairline between entries, no numerals, no plates, no rail. That is what lets twenty entries sit in one section without reading as a table to be studied: the eye reads four things, and each of them happens to hold five. The entries are written to be one line each at the 46rem measure, which is the whole discipline of the pattern. An entry that runs to two lines is an entry that wanted to be a paragraph, and a paragraph belongs in timeline-rail. Make it yoursVariations and the edits to make first ### What to change first - The number of eras. Four is what makes the density read. Three is fine; six turns the section into a document and wants a page of its own. - The five lines per era. Duplicate a line row to add one. Keep them to one line at reading width, and put anything that needs a paragraph into timeline-rail instead. - The era notes. The tracked line beside each decade is optional. Delete all four and the section becomes a plain dated record; delete only some and the heads stop lining up. - The decade heads. Plain paragraphs, not headings, so they can hold 1990s, Years one to five or Before the fire without putting four more entries into your page's heading outline. The section's own h2 is the only heading in the pattern. - The composition. Ship this one where the history runs down the page, and timeline-eras where you want the whole thing on one screen: the same four eras and twenty entries laid out as four columns across the band. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated. The decade heads carry -0.035em of tracking and the era notes 0.2em, and that pairing is what carries the record feeling in a serif theme and in a sans one. - Your colours. base for the ground, contrast for the type, both chains ending on a colour WordPress guarantees. Every era rule is currentColor, so the four rules are the colour of the text and cannot resolve to nothing. - Your spacing scale. The space under each era and above each block of entries is a spacing preset. ### What it decides for itself - Full bleed with a 1240px measure, so the era rules are long rules. - A 2px era rule, not a hairline. It is the only structural mark in the pattern and it has to carry four groups of five, so it is the one place the section states a weight rather than a hairline. It is still currentColor. - The 26/74 head row. The decade sits left at display size with the era note bottom-aligned beside it, so the two sit on the same baseline rather than the note floating in the middle of the decade's height. - The entry measure. Each line's text sits in a nested constrained group at 46rem, wide enough for a full sentence on one line and narrow enough that the lines form a block rather than a run of the full band. - The line rhythm. 0.75rem between entries at a 1.55 line height: tight enough to read as a list, loose enough that the dates do not merge. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.75rem, 3.2vw, 2.75rem) - paragraph at clamp(1.5rem, 2.4vw, 2.25rem) Technical notesBlock mechanics, responsive behaviour and constraints ### How it differs from the other timelines timeline-rail is six open milestones on a continuous vertical hairline, with a sentence each and a rule that runs past both ends. This one has no rail at all and no vertical mark anywhere. The two patterns answer different questions: the rail asks "what were the moments", this one asks "what has the whole of it looked like". Six entries against twenty is the point, and at thumbnail size they are two obviously different objects: one is a line with things hung off it, the other is four ruled blocks of text. timeline-eras is this same record turned through ninety degrees: four era columns read across the band rather than four bands read down the page, for a history a reader is meant to compare rather than follow. Neither is steps. Nothing here is numbered and nothing is a stage: the reader is looking back at a record, not standing inside a process. ### What the year column does on a phone Each entry is a two-column row with isStackedOnMobile: false, so the year stays beside its line at 390 instead of dropping above it. Twenty entries that each became two stacked lines would double the section's height on the smallest screen and lose the one thing that makes a record readable, which is a straight column of dates. The year column is 14%, about 49px at 390, which holds a four-digit year at the type's floor. ### Notes - Core blocks only. No plugin, no script, no separator: the era rules are group borders, which cannot be narrowed to a centred stub the way a plain core/separator is in Twenty Twenty-Four. - Every colour is a fallback chain ending on a guaranteed colour, and every rule is currentColor. - The decade heads are paragraphs on purpose. Twenty dated lines under four h3 elements would put a decade into the document outline for every five facts. Questions ## Timeline decades: common questions Does Timeline decades 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 decades match my theme? Choose by variation. Four decades takes your theme’s palette; Midnight and lime brings its own colours. How many variations does Timeline decades have? 2: Four decades and Midnight and lime. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Timeline decades 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. 43KB 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 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 2 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 crossing Six dated entries alternating across one continuous currentColor rule down the centre of the section: the first hangs left of the line and is set against it, the second hangs right, and so on. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-crossing.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Eras across A long history read across the page rather than down it: four era columns side by side, each opened by a 2px currentColor rule with its decade at display size, a tracked note under it and five dated single-line entries below that, twenty in all. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-eras.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline frames An image-led history: four dated milestones, each a portrait photograph cropped to 4:5 with its date and title on a slab beneath it, under a currentColor hairline that butts the frame. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-frames.html)