Library Timeline

Catalogue accessStandard

The spread as chapters

Three eras as three chapters, each one a wide 21:9 photograph with its type filed beneath it: the date range at display size on the left, the title and a paragraph of copy on the right. Nothing alternates and no era is louder than another, and a currentColor hairline runs the band's full measure between one chapter and the next, stopping on the same edges as the plates, so three plates read as three chapters of one document.

Example images are included and can be replaced in the editor. States no colour and no font of its own.

ThemePreview size
As authoredColour
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The three eras. Duplicate a wrapper group to add a fourth, and give the new one a border-top like the middle chapters.
  2. The photographs. Wide crops are what this pattern wants, but the 21:9 is applied for you, so a portrait original will be cropped to the band rather than break the row.
  3. The date ranges. Plain text, so 1946 to 1972, 1946-72 or The first quarter century all set.
  4. The copy. Two to three sentences per chapter.

The signature moment

A plate with its caption filed beneath it

Nothing sits beside a photograph and nothing is inset into one. Each era is one wide 21:9 plate with a two-column caption block under it: the date at display size on the left, the title and the paragraph on the right. The crop is wider than any column layout would give a picture, so it reads as a plate in a book, and the type reads as the caption filed under that plate rather than as copy sharing a row with it.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your spacing scale.
  • Your photographs.

Set by this pattern

  • Full bleed with a 1240px measure
  • The 21:9 crop
  • The 30 / 70 caption split
  • The scale collision
  • The seam
  • The titles are h3.

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

Three eras of one history, each given a whole plate. Every era is a 21:9 photograph with its type filed underneath: the date range at display size on the left, the title and a paragraph of copy on the right. Core blocks only: core/group, core/columns, core/column, core/image, core/heading, core/paragraph.

The signature moment: a plate with its caption filed beneath it

Nothing sits beside a photograph and nothing is inset into one. Each era is one wide 21:9 plate with a two-column caption block under it: the date at display size on the left, the title and the paragraph on the right. The crop is wider than any column layout would give a picture, so it reads as a plate in a book, and the type reads as the caption filed under that plate rather than as copy sharing a row with it.

All three chapters carry exactly the same weight. The picture is never on the other side, no era is taller, and none of the three is given a larger frame or a longer column. That is the decision: a history where the middle era is not the headline, and where the reader is meant to take three chapters in the same way rather than be thrown across the page between them. The rhythm is provided by the seams instead.

The seams are the second half of it. Between one chapter and the next runs a 1px currentColor rule across the whole measure, with a spacing-70 gap above and below it, so three plates read as three chapters of one document instead of three sections that happen to sit near each other. The first chapter carries no rule, because the section's own heading opens it; the last carries no bottom padding, because the section's padding closes it.

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.

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

Make it yoursVariations and the edits to make first

What to change first

  1. The three eras. Duplicate a wrapper group to add a fourth, and give the new one a border-top like the middle chapters. The first carries no rule and the last carries no bottom padding; those two belong to whichever chapters are first and last.
  2. The photographs. Wide crops are what this pattern wants, but the 21:9 is applied for you, so a portrait original will be cropped to the band rather than break the row. What matters is that the subject survives a letterbox: check the top and bottom of each picture after you replace it.
  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, because the date has 30% of the measure and no more.
  4. The copy. Two to three sentences per chapter. The paragraph is held to 34rem, so a longer one runs down the page rather than out across it, and four or five sentences turn a chapter into an article.
Theme behaviourInheritance, fixed decisions and contrast

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 and the gap between a plate and its caption, is a spacing preset, so a theme with a generous scale gets longer chapters.
  • Your photographs. Three plates with example photographs. Choose Replace to select your own media; the 21:9 crop is already set.

What it decides for itself

  • Full bleed with a 1240px measure for the band, its seams and the plates, which all stop on the same edges, and a 34rem measure for the copy inside each chapter. The wrappers state that width themselves, because a constrained group left to the theme re-caps its plate at the theme's content width, 645px in Twenty Twenty-Five, and the seam then runs visibly past the picture.
  • The 21:9 crop, stated on the image rather than left to the file, so three photographs of three different shapes still make three identical plates.
  • The 30 / 70 caption split, top-aligned, so the date sits on the same line as the title rather than centring itself against a paragraph.
  • The scale collision between the date range and everything else.
  • The seam: currentColor, 1px, on the wrapper group rather than on a separator block.
  • The titles are h3. Three of them under the section's h2 is a real outline for a history with three named eras, and three is few enough that it does not flood the page's heading structure.

Display type

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

  • paragraph at clamp(1.75rem, 3.4vw, 3rem)
Technical notesBlock mechanics, responsive behaviour and constraints

How a chapter is structured

Each era is one wrapper group holding two things in order:

  • The plate. A core/image at aspectRatio: 21/9 with scale: cover, so whatever the buyer uploads is cropped to the same band across all three chapters whether it was shot landscape, square or portrait.
  • The caption row. A core/columns, top-aligned, 30% for the date range and 70% for the title and copy, set a spacing-40 gap below the picture. The paragraph sits in a nested constrained group at 34rem inside the 70% column, so the copy runs at about 65 characters rather than the width of the column.

Type never touches the photograph. Every word in the section is on the section's own ground, below a picture rather than over one, which is the whole reason this composition is safe with a buyer's own photographs in it: a photograph's luminance is as unknowable as an accent's, because the buyer chooses the image.

What happens at 390px

Below 782px core stacks the caption row, so each chapter becomes picture, date, title, paragraph, in that order, for all three eras. That is the same reading order the section has on a laptop, which is the advantage of a composition with nothing beside anything: nothing has to be rearranged to fit a phone, so nothing is lost when it is.

The 21:9 crop holds at every width. At 390 the plate fills the band, about 350px wide and about 150px tall, which is still a band rather than a stripe, and the three of them keep the section's rhythm. The seams survive untouched, because they are borders on the wrapper groups and stacking does not affect them.

Why it is a history and not a process

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 timelines. timeline-spread is these same three eras as alternating core/media-text spreads, picture left, then right, then left, with the words beside the photograph rather than under it: take that one where the eras want a rhythm and this one where they want equal weight. timeline-rail is six one-sentence moments hung on a vertical rule and timeline-decades is twenty packed lines under four decade heads; neither carries a photograph. Three eras with a plate and a paragraph each is a density decision before it is a styling one.

Notes

  • Core blocks only. No plugin, no script, no separator, no <style>.
  • Every colour is a fallback chain ending on a guaranteed colour, and every rule is currentColor.
  • Example photograph URLs are included in the copied plates, matching the preview.

Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.

The markup

14KB of core-block markup, 6 blocks (column, columns, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Start free trial to copyWhat you copy is yours forever. Cancel whenever.

Back to the library