[Library] Timeline

Catalogue accessStandard

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. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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.

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.

What to change first

  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 the base where the history runs down the page, and decade-columns where you want the whole thing on one screen.
How it differs from the other timeline117 words

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.

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 phone75 words

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.

Notes77 words
  • 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.
Display type24 words

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)
Back to the library

Continue exploring

Next in Timeline

Explore all 12 Timeline patterns