# 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. Canonical: https://patternpaste.com/pattern/timeline-eras.html Section: Timeline Access: Included in Pattern Paste access. Needs: 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. Blocks: column, columns, group, heading, paragraph Keywords: timeline, history, decades, eras, archive, record, dense Promise: Identical markup in every theme. --- ## 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. ## 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. ## 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. ## 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. ## What to change first 1. **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. 2. **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. 3. **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. 4. **The decade heads.** Plain paragraphs, so `1990s`, `Years one to five` or `Before the fire` all set without entering your page's heading outline. 5. **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. ## 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. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.5rem, 2.4vw, 2.25rem)