# 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. Canonical: https://patternpaste.com/pattern/timeline-chapters-years.html Section: Timeline Access: Included in Pattern Paste access. Needs: 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. Also needs: 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. Blocks: button, buttons, group, heading, image, paragraph, patternpaste/chapters Keywords: timeline, history, heritage, quotes, chapters, sticky, scrollytelling, years, archive Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## 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. ## 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. ## 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 you change first 1. **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. 2. **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. 3. **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. 4. **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. 5. **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. 6. **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. 7. **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. 8. **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. 9. **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. ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.