[Library] Timeline

Catalogue accessStandard

Timeline on a cover

A whole history laid over one full-bleed photograph. Five dated entries sit on a bordered plate offset to the left of the cover, each a single ruled line of year and event, so the picture stays genuinely visible beside the record instead of turning into a texture behind it. The cover ships empty; you choose the photograph. States no colour and no font of its own, and no word ever sits on the image.

Variation View
Before you copy

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

A whole history on one photograph. A full-bleed core/cover carries the buyer's image; inside it a bordered plate holds an eyebrow, a heading and five dated entries, each a single ruled line of year and event. Core blocks only: core/cover, core/group, core/heading, core/columns, core/column, core/paragraph.

The signature moment

The record sits ON the picture without ever sitting on it

The plate is offset, not centred. It is held at 44rem inside the cover's 1240px measure by a constrained group with justifyContent: "left", so at any desktop width there is open photograph to the right of the record. A centred plate turns the image into a texture behind the type and the section stops being a photograph at all; offset, the picture is genuinely in the composition and the history reads as a card laid down on a table.

The plate is the second half of the same idea. Its ground is a base chain and its border is a currentColor hairline, so what a buyer actually reads is measured as an ordinary pair on their own paper. What a reader reads is on the plate, never through the veil, which is why the photograph can be anything at all and no line of type is at risk from it.

What it inherits from your theme

  • The typeface. No font family is stated anywhere.
  • Your colours. base for the plate, contrast for the type and the veil, both ending on a colour WordPress guarantees. Every rule and the plate border are currentColor.
  • Your spacing scale. The plate's vertical padding and the space around every entry are spacing presets, so a theme with a generous scale gets a looser record.

What it decides for itself

  • Full bleed, a 1240px measure, and the plate offset left inside it at 44rem.
  • The 24/76 split and the ruled row, so the years form a hard column down the left of the record.
  • The scale relationship: the year slightly larger and heavier than the event beside it, both bottom-aligned so their baselines sit close.

What to change first

  1. The photograph. Click the cover, choose an image. The plate does not care what you pick, which is the point of it.
  2. The five entries. Duplicate an entry group to add one. The only thing to remember is that the closing rule belongs to whichever entry is last: move the border-bottom if you add one below it.
  3. The years. Plain text, so 1936, Spring 1936 or 1936-38 all set. Anything much longer than four characters wants a wider first column.
  4. The event titles. One line each. Anything over about 30 characters wraps to two lines on a phone, which the record survives; a sentence turns it into a document and belongs in timeline-rail instead.
  5. The offset. Widen the wrapping group past 44rem to give the record more room and the photograph less.
How the record is built180 words

Each entry is a group carrying a border-top of currentColor at 1px, and inside it a two-column row with the year at 24% and the event title at 76%. The last entry carries a border-bottom as well, so the record closes rather than trailing off. There is no core/separator anywhere: a rule inside a plate has to run the plate's full width, and Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub.

The columns do not stack. isStackedOnMobile: false keeps the year beside its event at 390, where a stacked row would turn five one-line entries into ten and the ledger into a list. At 390 the plate is about 302px of content inside the cover's own padding, so the year column is roughly 72px, which holds four digits at the clamp() floor with room to spare.

Every entry is one line of record and nothing else: no paragraph, no link, nothing numbered, nothing asking the reader to act. It is a history, not a process, which is what separates this section from steps-ledger and steps-run.

The cover, and what it is not allowed to carry177 words
  • It ships EMPTY. No url in the block's settings, no <img>, no background-image. Our previews substitute one of our own photographs; the buyer points the block at their own media library and the composition is already set.
  • minHeight is 44rem, never vh. The preview on this page sizes its frame to the pattern, so a viewport height would size the pattern to the frame and the pair would only shrink.
  • dimRatio is 40, a multiple of ten, so the class core writes (has-background-dim-40) is the opacity the span actually gets. The veil is atmosphere here, not legibility: nothing is read on it in the base.
  • Every text element states its own colour. Core paints cover text #fff through a zero-specificity :where() rule, and a theme's heading element style beats an inherited group colour, so the heading states its chain as explicitly as the paragraphs do.
  • A short hand-off row on the theme's paper sits below the cover, so the section reads as a section of a page rather than as the page.
The variation: cover-veil-record, "On the veil"220 words

One axis, and it is composition. The plate is removed and the same record is set straight onto the photograph, at a wider 52rem measure with a larger heading, because without the plate the type has the whole cover to work in.

What makes it legal is the veil's opacity, and nothing else. The dimRatio goes to 80 with a contrast veil under base type, every colour stated explicitly as a chain. The veil is measured composited at its opacity over a white photograph and over a black one, at the worse of the two, so an 80% veil is a bound no image the buyer chooses can break. Below 80 the type goes back on a plate. A 50% veil with type on it passes nothing and looks fine in the one photograph you tested it against, which is the silent failure this catalogue exists to refuse.

cover-veil-record is the variation shipped rather than the fallback cover-plate-wide, because a band across the lower third would be the same relationship as the base with a different width, and taking the plate away is a different relationship: the record and the photograph share one surface instead of being laid one on the other. It is authored to the measured 80% form that cover-veil already passes at, contrast veil under base type.

Notes76 words
  • Core blocks only. No plugin, no script, no separator, no literal colour.
  • The cover's element order is the 6.6 one: the overlay span, then the inner container. The 7.0 order is invalid at 6.6.
  • It is not cover-plate, which is a headline and one line of lede on a plate flush with the cover's corner. This is a record of five dated entries, held off the corner so the photograph reads beside it.
Back to the library