# 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 includes a replaceable example photograph. States no colour and no font of its own, and no word ever sits on the image. Canonical: https://patternpaste.com/pattern/timeline-cover.html Section: Timeline Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: column, columns, cover, group, heading, paragraph Keywords: timeline, history, cover, photo, milestones, years, record, about ## Variations (2) ### The plate (the default) Identical markup in every theme. The record sits on a plate of your theme's paper with a currentColor hairline border, offset left inside the cover, over a 40% veil of your contrast. Every line of type is measured as an ordinary pair on paper, so the photograph can be anything at all. ### On the veil Identical markup in every theme. The composition changes rather than the colour: the plate is removed and the record is set straight onto the photograph, at a wider measure and a larger heading. That is only legal because the veil goes to 80%, which is heavy enough that the type is measured against a bound no image can break. --- ## 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. ## How the record is built 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`. ## The cover, and what it is not allowed to carry - **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. ## The variation: `cover-veil-record`, "On the veil" **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. ## 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 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. ## 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. ## Notes - 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. ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.