[Library] Timeline

Catalogue accessStandard

Timeline spread

Three eras, each given a whole editorial spread: a photograph on one side and, on the other, the date range set at display size with a title and a paragraph of copy under it. The picture changes sides between eras, and a currentColor hairline runs the full measure between one spread and the next, so three spreads read as three chapters of one document rather than three unrelated sections. The media frames ship empty; the buyer points them at their own library. 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

Three eras of one history, each given a whole editorial spread. Every era is a core/media-text: a photograph on one side, and on the other the date range at display size with a title and a real paragraph under it. Core blocks only: core/group, core/media-text, core/heading, core/paragraph, plus core/columns, core/column and core/image in the variation.

The signature moment

The alternation and the ruled seam

The picture changes sides between eras, and a hairline runs the full measure between them. Era one has the photograph left, era two right, era three left, so the eye is thrown across the page each time a chapter ends. That alternation on its own would read as three separate sections that happen to sit near each other; the seam is what stops it. Between one spread and the next runs a 1px currentColor rule across the whole 1240px measure, with the same spacing preset above and below it, so the three spreads read as three chapters of one document.

Both halves are needed and neither is decoration. Take the rules away and the alternation is just inconsistency. Take the alternation away and you have the spread-stacked variation, which is a different and quieter product.

The seam is a group's own border-top, not a core/separator: Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub, and a group border is not affected. It is currentColor for the same reason the rest of the catalogue's rules are: it cannot resolve to nothing, it follows your text colour, and it inverts with the section if you recolour it.

What it inherits from your theme

  • The typeface. No font family is stated anywhere.
  • Your colours. base for the ground, contrast for every piece of type, both ending on a colour WordPress guarantees. The seams are currentColor.
  • Your spacing scale. Every gap in the section, including the space either side of each hairline, is a spacing preset, so a theme with a generous scale gets longer chapters.

What it decides for itself

  • Full bleed with a 1240px measure, and a 34rem measure for the copy inside each spread.
  • The 45/55 split and the alternation of which side the picture is on.
  • The scale collision between the date range and everything else.
  • The seam: currentColor, 1px, on the wrapper group rather than on a separator block.

What to change first

  1. The three eras. Duplicate a wrapper group to add a fourth. Two things to keep: give the new one a border-top like the middle eras, and flip its mediaPosition so the alternation carries on. The first era carries no rule and the last carries no bottom padding; those two belong to whichever eras are first and last.
  2. The photographs. Three empty media frames. Landscape crops sit best, because the picture is 45% of the spread and its own aspect ratio sets the height of the row.
  3. The date ranges. Plain text, so 1946 to 1972, 1946-72 or The first quarter century all set. Anything much longer than about twenty characters wants the clamp floor lowering.
  4. The copy. Two to three sentences per era. One sentence leaves the text column short beside a tall picture; five turns a spread into an article.
  5. The arrangement. Ship the base where the eras want a rhythm, and spread-stacked where they want equal weight.
How an era is structured263 words

Each era is one wrapper group holding one core/media-text:

  • The wrapper carries the seam (border-top) and the vertical rhythm. The first era has no rule and no top padding, because the heading above it is the section's own opening; the last has no bottom padding, because the section's padding closes it. The two inner wrappers carry equal spacing-70 above and below, so both hairlines sit in the middle of an even gap.
  • The media is 45% of the spread (mediaWidth: 45, serialised as grid-template-columns: 45% auto, or auto 45% when the media is on the right), vertically centred against the words. It ships EMPTY: no mediaUrl, no mediaId, which is what WordPress's own save() writes before a file is chosen. The buyer points it at their media library.
  • The words sit in a nested constrained group at 34rem inside the content column, so the copy runs at about 65 characters rather than the width of the column. Inside it: the date range, then the title, then one paragraph.

The date range is the loud element. It clamps between 28px and 48px with -0.03em tracking, against a title that tops out at 24px and body copy with a 16px floor. That scale jump is what makes a date read as a chapter number without anything being numbered.

Type never touches the photograph. core/media-text keeps the picture and the words in two grid cells, so nothing is set over an image whose luminance nobody can predict. That is the whole reason this composition is safe with a buyer's own photographs in it.

What happens at 390px160 words

core/media-text is not core/columns: it stacks at 600px, not 782px, and isStackedOnMobile is left at core's default. So between 601px and 782px the spreads are still two columns and only get tighter, and below 600px each era becomes one column with the picture first and the words beneath it, in every era. Core puts the figure in grid row 1 regardless of mediaPosition, so the alternation does not survive a phone: at 390 the base is a run of three picture-then-text chapters, which is the right reading order and is close to what the spread-stacked variation shows at every width.

The seams do survive, because they are borders on the wrapper groups and stacking does not touch them, so the section still reads as three chapters on a phone. The content column keeps core's own padding: 0 8%, which gives the copy a 31px gutter at 390, and the 34rem measure stops applying because the column is narrower than it.

Why it is a history and not a process109 words

Nothing is numbered, nothing is counted down, and there is no next step. The eras are real date ranges rather than positions in a sequence, and the last one is open ("2002 to now") because the yard is still working.

It is also not the other two timelines. timeline-rail is six one-sentence moments hung on a vertical rule; timeline-decades is twenty packed lines under four decade heads. This one is three eras and nothing else, each with a photograph and a paragraph, which is a density decision before it is a styling one: where a rail shows the shape of a history, a spread shows three of its rooms.

Notes85 words
  • Core blocks only. No plugin, no script, no separator, no <style>.
  • No photograph is shipped. The media frames are empty and stay that way in the file a buyer copies; the previews substitute our own images at render time.
  • Every colour is a fallback chain ending on a guaranteed colour, and every rule is currentColor.
  • The variation's frames are core/image at aspectRatio: 21/9 with scale: cover, so whatever the buyer uploads is cropped to the same band across all three chapters.
Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(1.75rem, 3.4vw, 3rem)
Back to the library

Continue exploring

Next in Timeline

Explore all 12 Timeline patterns