Timeline chapters years, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-chapters-years.html Interactive (https://patternpaste.com/interactive/) Chapters (https://patternpaste.com/interactive/chapters/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Timeline chapters years A history told in dated quotations on the ink: six years, each a big numeral, a short title, a voice from that year in large italic with its attribution, and a paragraph of what happened, with two interludes that mark the parts of the story. One mounted photograph on the right keeps up as you read, changing shape to each picture's own crop as the decades pass, and the year you are reading is the one that is lit while the others fade back. The interludes carry no picture and keep the one before them. Nothing moves until you scroll. Includes replaceable example images. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the eight chapters as a plain stack on the ink. States no colour and no font of its own. Start here ## What you change first - The photographs. Every dated chapter includes an image block with an example photograph with its crop already set; click each and choose from your media library, or use the block toolbar's "Fill chapters from media library" to deal a multiple selection into the chapters in order. - The years and the voices. Each chapter is a numeral, a title, a quotation, an attribution and a paragraph. - The band, and how long a print is held. Chapter length in the block's inspector, 720 here. - The fade. Fade the other chapters in the inspector, 60 here. - Which side the rail is on. Pictures on the right in the inspector, on here. - The plate. Draw the frame in the inspector, on here. - The masthead and the hand-off row. Ordinary core blocks before and after the block, so they take your theme's measure. - Motion. The inspector has the switch and the dials: the reading line, the swap time, the overshoot, the wipe, the drift and the smear. - The heading levels. The masthead is an h2, the interlude titles and the year titles are h3, because a history is one section with parts and dates in it. The signature moment ## A year in display type, a voice from that year beside it, and one mounted print that changes shape as the decades pass The composition is the numeral. Every chapter opens with its year at display size, tight and heavy, above a title on the ladder, so the column reads as a timeline before a word of it is read: 1904, 1931, 1958, 1979, 2003, 2024, down the left of the page in the theme's own face. The quotation under it is the chapter's real content, set at the large rung in italic so it is the largest running text on the page, and the paragraph after it is the smallest. That inversion, the voice above the explanation, is what makes it a history in other people's words rather than a company timeline with quotes in it. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The mount. - The measure. - The ladder. ### Set by this pattern - Display type. - Six years and two interludes. - The band, at 720. - The rail on the right - The masthead is outside the block 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 history told in dated quotations on the ink. Six years, each led by a big numeral, a short title, a voice from that year set large and italic with its attribution, and one paragraph of what happened; two interludes mark the parts of the story and carry no picture of their own. One mounted photograph on the right keeps up as you read, changing shape to each picture's own crop as the decades pass, and the year you are reading is the one that is lit while the others fade to well under half. The block is patternpaste/chapters with the rail flipped to the right, the morph on, the plate on, the reading line at 40, the smear off and the fade at 60. ### The signature moment: a year in display type, a voice from that year beside it, and one mounted print that changes shape as the decades pass The composition is the numeral. Every chapter opens with its year at display size, tight and heavy, above a title on the ladder, so the column reads as a timeline before a word of it is read: 1904, 1931, 1958, 1979, 2003, 2024, down the left of the page in the theme's own face. The quotation under it is the chapter's real content, set at the large rung in italic so it is the largest running text on the page, and the paragraph after it is the smallest. That inversion, the voice above the explanation, is what makes it a history in other people's words rather than a company timeline with quotes in it. The picture is a mounted print. The plate is on, so each photograph sits in a mount drawn in the page's own ink mixed down, which on the ink ground reads as a pale card with a hairline; the crops are deliberately mixed (1:1, 4:5, 3:2, 4:3, 1:1, 16:9) because an archive is not photographed to one shape, and the frame changing shape from its top corner as the years pass is the effect. The two interludes have no picture and keep the print before them, which is what a part marker wants: the reader has moved on in the words and the evidence stays where it was until the next dated voice arrives. ### Why this is not editorial-chapters-case or team-chapters-index - It is on the ink. The other two sit on base; this one inverts the root to contrast with base type, so the mounted prints and the display numerals sit on a dark page. A heritage piece wants the archive's own register, and a light page of pale photographs in pale mounts is a brochure. - The chapter is a quotation, not an explanation. The case study is three paragraphs and a list; the index is two paragraphs and a list. Here the largest text in every chapter is somebody else's sentence, the paragraph is the smallest, and the numeral above both is the biggest thing on the page. No lists. - The frame morphs, and the crops are mixed on purpose. The case study fixes its window; the index nudges between two portrait crops; this one morphs between six archival crops that are simply what the photographs are. The overshoot is the block's default 12. - Two interludes. The case study has one, a text-only chapter inside the argument; here the interludes are the structure, the "Part two" and "Part three" that split six dates into three eras, and both keep the previous print. - The fade is 60, the deepest of the three, against the case study's 50 and the index's 40. A quotation wants to be read alone; on the ink the faded years drop back into the page rather than reading as disabled controls, which is what holds the two light-ground siblings lower. - The reading line is 40, between the case study's 34 and the block's 45: a chapter here is shorter than a case-study chapter and taller than a step, and the numeral should take the frame as it clears the top third. - No smear. A reader of a history flicks between decades; a frame that leans on the way reads as a fault on the ink, where the mount's hairline makes any skew obvious. Make it yoursVariations and the edits to make first ### What you change first - The photographs. Every dated chapter includes an image block with an example photograph with its crop already set; click each and choose from your media library, or use the block toolbar's "Fill chapters from media library" to deal a multiple selection into the chapters in order. Keep the crops mixed if you can: the change of shape is the effect, and six prints in one crop want the case study's fixed window instead. - The years and the voices. Each chapter is a numeral, a title, a quotation, an attribution and a paragraph. Add a year by duplicating a Chapter group; add or remove an interlude the same way. A chapter with no image keeps the print before it. - The band, and how long a print is held. Chapter length in the block's inspector, 720 here. Raise it for longer paragraphs; past about 840 on a laptop the next year drops below the fold and the fade has nothing on screen to fade. - The fade. Fade the other chapters in the inspector, 60 here. Lower it if your paragraphs are the point and the quotations are not; 0 keeps every year at full strength. - Which side the rail is on. Pictures on the right in the inspector, on here. Off puts the prints on the left and the numerals inboard. - The plate. Draw the frame in the inspector, on here. Off, the photograph meets the ink with nothing around it, which suits a set of full-bleed documentary pictures better than archive prints. - The masthead and the hand-off row. Ordinary core blocks before and after the block, so they take your theme's measure. The button is your theme's outline style and states no colour. - Motion. The inspector has the switch and the dials: the reading line, the swap time, the overshoot, the wipe, the drift and the smear. Off, the section is the still spread with nothing missing. - The heading levels. The masthead is an h2, the interlude titles and the year titles are h3, because a history is one section with parts and dates in it. If this lands under another h2, or the page has no h1 above it, change the masthead's level in the block toolbar so the outline reads in order. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. Nothing states a family. The numerals, the titles, the quotations, the paragraphs and the button take whatever your theme sets; a serif theme sets the years in serif figures, which is right. - Palette. The root is your contrast as ground and your base as ink, the one pair every block theme is obliged to keep legible, measured at 18.88:1 on twentytwentyfive. No role slug appears anywhere: on a ground the payload paints itself, roles do not apply. - The mount. The block draws the plate in currentColor mixed down, so on your contrast it is your base at seven and sixteen per cent: a pale card and a hairline, in your colour and not ours. - The measure. Each chapter's prose is a constrained group with no width of its own, so it takes your theme's content width inside the column, aligned left. The masthead and the hand-off row do the same. - The ladder. The masthead heading is x-large, each interlude heading is x-large too (it is a part title, not a chapter title), every year's title is large, every quotation is large, every paragraph is medium, each stated as a chain with a tuned clamp() behind it. ### What it decides for itself - Display type. The year numerals are a bare clamp(3.25rem, 7.5vw, 6.5rem) paragraph at weight 600, line-height 1 and letter-spacing -0.02em: a stat figure whose size IS the composition, so it is not on the ladder. The attribution lines and the two part labels are uppercase, tracked at 0.2em, and stay at their own small clamp, which is a marking rather than a size. - Six years and two interludes. Six dates is enough for three eras of two; eight chapters is what the block lays as eight explicit rows. Adding a year needs no other change. - The band, at 720. Every chapter's minimum height and the scroll one print is worth. A dated chapter is a little under that on a laptop at the theme's measure, so the band is the floor and the next year's numeral is on screen, faded, beneath the one being read. - The rail on the right, because the numeral wants the left edge of the page: a column of years down the left is the timeline. - The masthead is outside the block, an ordinary group inset by the same gutter the block uses, and the hand-off row is a sibling after it, so a full-bleed band on the ink has something under it that says where the section ends. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin This pattern embeds patternpaste/chapters, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor. - With the plugin and motion off (the inspector switch, and also what the storefront's still picture and the contact sheet show): the two-column spread on the ink, every year's print in the right-hand rail beside its own words, the interludes with no print of their own. Nothing is faded and nothing is hidden. - With the plugin deactivated entirely: the masthead is followed by the eight chapters as a plain stack of core blocks on the ink, each print above its own year, in the order they were typed, and then the hand-off row. Nothing you type lives inside the block. - A reader who has asked for reduced motion gets the still spread, with every print in it and every year at full strength. - On a phone there is one column and the same stack, with the plugin, without it and with motion off: below the block's own breakpoint there is no frame to stick and the script does not initialise. ### What is not proved - The fade's value is not measured against the contrast floor. The floor is read on the resting spread, which never fades; at 60 the faded years are your base at forty per cent over your contrast, which is legible on the two stock themes by inspection and not by a gate. - The interludes' picture carry-over is proved by result. chapters-wrong-picture expects an interlude to show the print before it and passes when it does; nothing reads that the frame held still through the boundary rather than swapping the same print out and in. - The wide cell. At 1920 the rail track is wider than the largest print, so a square 1904 sits at the outer edge of a track with ink to its left. The block caps the spread at 1600 and the numeral column holds the left edge; it reads as a margin, not a gap, and it is not measured. - A serif theme's figures. The numerals take the theme's face; a serif with old-style figures sets 1904 with descenders, which is a look rather than a fault and has not been rendered here. ### 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. 32KB of core-block markup, 7 blocks (button, buttons, group, heading, image, paragraph, patternpaste/chapters), 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. #### Use it for - Company and family-business histories told by decade - Heritage and anniversary pages - Museum, archive and collection stories - Founder stories for a craft or maker brand - Long-running institutions: schools, clubs, theatres, churches #### 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 Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-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 button, buttons, group, heading, image, paragraph, patternpaste/chapters Core only NO Chains 86, deepest 2 rungs currentColor no color base, black, contrast, white spacing 20, 40, 60, 80 font-size large, medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Timeline (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five Team Team Needs plugin ### Team chapters index Six people, each a short profile you actually read, with one portrait frame beside them that keeps up: a role, a name, two paragraphs and three things to ask them about. 9 blocks Open preview (https://patternpaste.com/pattern/team-chapters-index.html) Shot in Twenty Twenty-Five Features Features Needs plugin ### Feature slider walkthrough An inverted feature section that explains a product in three steps, one at a time: each stage fills the frame with a large photograph and its copy beside it, named in words (Step 1 of 3) and selected with numbered controls below. 7 blocks Open preview (https://patternpaste.com/pattern/feature-slider-walkthrough.html) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Hero slider cover A full-width hero slideshow with three bright edge-to-edge photographs and compact opaque panels, each carrying a headline, concise introduction and action. 7 blocks Open preview (https://patternpaste.com/pattern/hero-slider-cover.html)