Eras across, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-eras.html Library (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # 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. There is no rail and nothing is numbered, so thirty years sit on one screen and the eras can be compared column against column. Below 782px the four stack back into the same order. States no colour and no font of its own. Start here ## What to change first - The number of eras. Four is the composition. - The five lines per era. Duplicate an entry group to add one. - The era notes. The tracked line under each decade is optional. - The decade heads. Plain paragraphs, so 1990s, Years one to five or Before the fire all set without entering your page's heading outline. - The eras need not be equal. Nothing forces five entries a column. The signature moment ## A history laid out as a table of eras The signature is that the four rules line up and read as one line across the page. Each era column opens with a 2px currentColor border-top, all four sit at the same height, and the gap between them is a clamp(1.25rem, 2.5vw, 2.5rem) gutter. What the eye takes in first is a single ruled band across the whole 1240px measure with four decades hanging off it, and only then the twenty lines underneath. A history down the page is a log: one thing, then the next thing. A history across the page is a table: four things that can be held against each other. 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. - Four equal columns. - A 2px era rule, not a hairline. - The columns are top-aligned - The entry rhythm. - The decade heads are paragraphs, not headings. 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 Four eras side by side, each under its own 2px rule, each holding five dated lines. Twenty entries in one screen, read left to right instead of top to bottom. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph. ### The signature moment: a history laid out as a table of eras The signature is that the four rules line up and read as one line across the page. Each era column opens with a 2px currentColor border-top, all four sit at the same height, and the gap between them is a clamp(1.25rem, 2.5vw, 2.5rem) gutter. What the eye takes in first is a single ruled band across the whole 1240px measure with four decades hanging off it, and only then the twenty lines underneath. A history down the page is a log: one thing, then the next thing. A history across the page is a table: four things that can be held against each other. That is a real difference in what the section is for. Laid out across, the decades can be compared. A reader can see that the 1990s column and the 2020s column carry the same number of entries and that one of them is all machinery and the other is all people, without reading a word of either. A running log hides that, because by the time you reach the fourth era the first has scrolled away. The scale collision is the second half of it. The decade heads clamp from 24px to 36px with -0.035em of tracking; under them the era note is 13px in capitals at 0.2em, and the twenty entries are 15px to 17px. Nothing sits between the decade and the note, and that gap is the only hierarchy in the section. There is no rail, no numeral, no plate and no hairline between entries. Make it yoursVariations and the edits to make first ### What to change first - The number of eras. Four is the composition. Three works and leaves the columns wider; five is where a column gets too narrow for a dated line at 1280. If you need six, the history wants timeline-decades and the page. - The five lines per era. Duplicate an entry group to add one. Keep them short: a column is about 175px at 820, so a line that reads as one sentence on a laptop is three lines on a tablet. - The era notes. The tracked line under each decade is optional. Delete all four and the section becomes a plain dated record; delete only some and the columns stop lining up under their rules. - The decade heads. Plain paragraphs, so 1990s, Years one to five or Before the fire all set without entering your page's heading outline. - The eras need not be equal. Nothing forces five entries a column. Four under one decade and six under another is a truer record, and the top-aligned columns are built for it. 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. All four era rules are currentColor, so they are the colour of the text beside them and cannot resolve to nothing. - Your spacing scale. The space under each decade head, the space above the entries and the vertical gap between the stacked columns on a phone are all spacing presets. ### What it decides for itself - Full bleed with a 1240px measure. - Four equal columns. No width is stated on any of them, so core divides the row evenly. Four is what makes the band read as one ruled line with four things hanging from it: three leaves a gap where a fourth should be, five drops the column under 215px at 1280 and the entries start laddering. - A 2px era rule, not a hairline. It is the only structural mark in the pattern and it has to carry a column of five entries, so it is the one place the section states a weight. It is still currentColor. - The columns are top-aligned, not stretched, so the four rules and the four decades sit on the same line whatever the eras below them weigh. An era with four entries and an era with six still open together. - The entry rhythm. A spacing-30 gap between entries, and 0.2rem between a year and its line, so the year reads as a label on the line under it rather than as an entry of its own. - The decade heads are paragraphs, not headings. Twenty dated lines under four h3 elements would put a decade into your page's document outline for every five facts. The section's own h2 is the only heading in the pattern. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.5rem, 2.4vw, 2.25rem) Technical notesBlock mechanics, responsive behaviour and constraints ### What it costs, stated honestly Four columns of five lines is a narrow measure. Inside a 1240px band with the gutter, a column is about 270px at 1280 and about 175px at 820, so the entry lines wrap to two or three lines each rather than sitting as the single lines they are in a full-width record. That is the trade: the whole history is visible at once, and each entry is read in a column rather than in a sentence. Write them shorter than you would for a record that runs the page. Below 782px the four columns stack. Core sets flex-basis: 100% on a column and this pattern does not override it, so on a phone the eras arrive in the same chronological order they read in across a laptop: 1990s, 2000s, 2010s, 2020s, each still under its own rule, each still holding its five lines. The comparison is gone, the record is not. ### How it differs from the other timelines timeline-decades is this same record run down the page: four eras as full bands one after another, twenty entries that each sit on one line at a 46rem measure with the year beside the line rather than above it. Take that one where the history is read, and this one where it is compared. timeline-rail is six open milestones on a continuous vertical hairline with a sentence each: it asks "what were the moments" where this one asks "what has the whole of it looked like". 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. ### 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. - Grid layout on core/group was deliberately not used: this catalogue's floor is WordPress 6.6 and one core/columns row is the shape that is certain there. 39KB 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. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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 Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Team Team alternating profiles Three broad profile spreads alternate the portrait side, giving each person room for a biography and a personal approach. Example portraits are included, generated and nobody real; replace them with photographs of your own people. Inherits your theme’s palette and typeface. (https://patternpaste.com/pattern/team-alternating-profiles.html) #### Before you paste Requires a block theme on WordPress 6.7 to 7.0. 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/) #### What's inside Blocks column, columns, group, heading, paragraph Core only yes Chains 106, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 40, 60, 70, 80 font-size medium, xx-large Continue exploring ## Next in Timeline Explore all 16 Timeline patterns (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five Timeline Timeline 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. 5 blocks Open preview (https://patternpaste.com/pattern/timeline-decades.html) Shot in Twenty Twenty-Five Timeline Timeline Gallery Standard ### 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. 6 blocks · 1 variation Open preview (https://patternpaste.com/pattern/timeline-frames.html) Frames with a ledger (https://patternpaste.com/pattern/timeline-frames.html#variant=frames-ledger) Shot in Twenty Twenty-Five Timeline Timeline Standard ### Timeline numerals Five dated entries and no rule anywhere. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/timeline-numerals.html) Numerals inverted (https://patternpaste.com/pattern/timeline-numerals.html#variant=numerals-inverted)