Timeline on a cover: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-cover.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The photograph. Click the cover, choose an image. - The five entries. Duplicate an entry group to add one. - The years. Plain text, so 1936, Spring 1936 or 1936-38 all set. - The event titles. One line each. - The offset. Widen the wrapping group past 44rem to give the record more room and the photograph less. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed, a 1240px measure, and the plate offset left inside it at 44rem. - The desktop 24/76 split - The scale relationship 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 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. Make it yoursVariations and the edits to make first ### 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 to change first - The photograph. Click the cover, choose an image. The plate does not care what you pick, which is the point of it. - 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. - The years. Plain text, so 1936, Spring 1936 or 1936-38 all set. Anything much longer than four characters wants a wider first column. - 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. - The offset. Widen the wrapping group past 44rem to give the record more room and the photograph less. 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 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. Questions ## Timeline on a cover: common questions Does Timeline on a cover need a plugin? No. It is built only from core WordPress blocks (column, columns, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Timeline on a cover match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Timeline on a cover have? 2: The plate and On the veil. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Timeline on a cover free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 15KB of core-block markup, 6 blocks (column, columns, cover, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Team About day in hours An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then. Example images included and replaceable in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/about-day-in-hours.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Timeline Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, cover, group, heading, paragraph Presets color 5, spacing 4, font-size 3 WordPress 7.0+ Continue exploring ## Next in Timeline Explore all 20 Timeline patterns (https://patternpaste.com/patterns/timeline/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Timeline No plugin needed ### 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. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-chapters.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline cover years A full-bleed cover under a heavy veil of your theme's contrast colour: a display headline in the lower left and, down the right side, a rail of six years, each a large year figure and one event line, joined by a vertical rule with a hairline branching off at every year. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-cover-years.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline crossing Six dated entries alternating across one continuous currentColor rule down the centre of the section: the first hangs left of the line and is set against it, the second hangs right, and so on. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-crossing.html)