Timeline cover years, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-cover-years.html Library (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # 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. The rail drops beneath the headline on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it, so the cover reads as a section and not the page. The signature moment ## The years run down the photograph The years are not a list under the headline; they are a rail laid on the picture. A two-pixel vertical rule runs the height of the cover, and at every year a hairline branches off it, so each date hangs from the spine like a station on a line. The year figures are large, the event lines small, and the heavy stack on the right answers a single heavy headline low on the left. It is structure, not decoration, and it holds in greyscale. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (veil contrast, type and rules base), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the measures, the column split. The cover states its own text colour chain so core's white cover text rule never applies. 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 full-bleed core/cover that carries a whole history: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left, and a rail of six years running down the right side of the cover. ### The signature moment: the years run down the photograph The years are not a list under the headline; they are a rail laid on the picture. A two-pixel vertical rule runs the height of the cover, and at every year a hairline branches off it, so each date hangs from the spine like a station on a line. The year figures are large, the event lines small, and the heavy stack on the right answers a single heavy headline low on the left. It is structure, not decoration, and it holds in greyscale. Make it yoursVariations and the edits to make first ### Variations - Paper veil: the veil is base at 80% and every word and rule contrast, the photograph a pale ghost behind ink. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (veil contrast, type and rules base), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the measures, the column split. The cover states its own text colour chain so core's white cover text rule never applies. Technical notesBlock mechanics, responsive behaviour and constraints ### Type on the photograph Type sits on the image only because the veil makes the ground a known quantity: contrast at dimRatio 80 under base type. The event lines are body size, so they need the full 4.5:1, not the 3:1 allowed to large display type; the checker composites the veil over a white and a black photograph and the worse ground has to pass. Lower the veil below 80 and that stops being true. ### Type and hierarchy - The headline is display: a bare clamp(2.75rem, 6.5vw, 8.5rem), off the theme's ladder, because its size is the composition; at 1920 it is 136px, held to a clamp(18rem, 42vw, 46rem) measure so it breaks into a block. - The year figures are paragraphs at a bare clamp(2.25rem, 4.6vw, 6rem), line-height 1: they are labels whose size is the rail, not headings. - Event lines and the standfirst are body copy on medium; "Our history" is a label with its own clamp() floored at 15px. - Hierarchy comes from size and the rules alone: nothing is set in capitals. - The heading states its size and colour chain and nothing else. ### Layout - The cover's height comes from the rail: six entries set it, never vh. - The inside is a two-column core/columns, 56% and 44%, both columns bottom-aligned, so the headline sits at the foot while the rail fills the height. Below 782px the columns stack and the rail drops beneath the headline. - The rail is a vertical flex group with a left border; each entry is a group with a top border starting at that border. Rules are currentColor, always the colour of the type. - Gaps are spacing presets; side padding on the inner groups is zero. ### What a buyer changes first The photograph: choose Replace on the cover. Then the headline and the six entries; duplicate or delete an entry group to change the count. The last entry has no bottom padding, so the rail ends on its event line. ### The hand-off row A short row on your theme's paper under the cover, a label and one paragraph at a 34rem measure, so the cover reads as a section and shows where it ends. ### Included images The copied markup includes a WordPress Photo Directory example photograph. The public image URL keeps the example visible after pasting. Select the cover and choose Replace to use your own Media Library file. See image credits (https://patternpaste.com/image-credits/) for the source and license. Pasting an image URL does not import a Media Library attachment. 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. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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 Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Team Team alternating profiles Three broad profile spreads alternate the portrait side, giving each person room for a biography and a personal approach. Example portraits are included, generated and nobody real; replace them with photographs of your own people. Inherits your theme’s palette and typeface. (https://patternpaste.com/pattern/team-alternating-profiles.html) #### Before you paste Requires a block theme on WordPress 6.7 to 7.0. 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/). #### What's inside Blocks column, columns, cover, group, heading, paragraph Core only yes Chains 42, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white font-size medium spacing 20, 30, 40, 60, 70 Continue exploring ## Next in Timeline Explore all 16 Timeline patterns (https://patternpaste.com/patterns/timeline/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Timeline Timeline Cover Standard ### Timeline on a cover A whole history laid over one full-bleed photograph. 6 blocks · 1 variation Open preview (https://patternpaste.com/pattern/timeline-cover.html) On the veil (https://patternpaste.com/pattern/timeline-cover.html#variant=cover-veil-record) Shot in Twenty Twenty-Five Timeline Timeline Standard ### 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. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/timeline-crossing.html) Crossed plates (https://patternpaste.com/pattern/timeline-crossing.html#variant=crossing-plates) Shot in Twenty Twenty-Five Timeline Timeline Standard ### Timeline decades A long history set as a record: four decade heads, each opened by a 2px currentColor rule and carrying five dated single-line entries under it, twenty in all. 5 blocks Open preview (https://patternpaste.com/pattern/timeline-decades.html)