Timeline on a cover

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

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.

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.

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

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

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 stack on mobile. Each year sits above its event at narrow widths, keeping all four digits together even when the theme uses larger type or generous plate padding. At desktop widths, the 24/76 split keeps the years in one aligned column beside the events.

Every entry is one year and event, with 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.

• It includes an example photograph. The public image URL is saved with the cover. Choose Replace to select your own media with the composition 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.

• Core blocks only. No plugin, no script, no separator, no literal colour.
• The cover's element order is the overlay span, then the inner container, the order that stays valid across editor versions.
• 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.

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.