Timeline decades

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 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.

1. 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.
2. 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.
3. 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.
4. 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.
5. 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 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.

• 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.

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)

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.

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.

• 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.