# 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. Nothing alternates and no era is louder than another, and a currentColor hairline runs the band's full measure between one chapter and the next, stopping on the same edges as the plates, so three plates read as three chapters of one document. Example images are included and can be replaced in the editor. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/timeline-chapters.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. Blocks: column, columns, group, heading, image, paragraph Keywords: timeline, history, eras, about, media, editorial, chapters Promise: Identical markup in every theme. --- ## The signature moment: a plate with its caption filed beneath it **Nothing sits beside a photograph and nothing is inset into one.** Each era is one wide 21:9 plate with a two-column caption block under it: the date at display size on the left, the title and the paragraph on the right. The crop is wider than any column layout would give a picture, so it reads as a plate in a book, and the type reads as the caption filed under that plate rather than as copy sharing a row with it. **All three chapters carry exactly the same weight.** The picture is never on the other side, no era is taller, and none of the three is given a larger frame or a longer column. That is the decision: a history where the middle era is not the headline, and where the reader is meant to take three chapters in the same way rather than be thrown across the page between them. The rhythm is provided by the seams instead. **The seams are the second half of it.** Between one chapter and the next runs a 1px `currentColor` rule across the whole measure, with a spacing-70 gap above and below it, so three plates read as three chapters of one document instead of three sections that happen to sit near each other. The first chapter carries no rule, because the section's own heading opens it; the last carries no bottom padding, because the section's padding closes it. The seam is a group's own `border-top`, not a `core/separator`: Twenty Twenty-Four narrows any separator that is not `is-style-wide` to a centred stub, and a group border is not affected. It is `currentColor` for the same reason the rest of the catalogue's rules are: it cannot resolve to nothing, it follows your text colour, and it inverts with the section if you recolour it. **The scale collision.** The date range clamps between 28px and 48px with -0.03em of tracking, against a title that tops out at 24px and body copy with a 16px floor. That jump is what makes a date read as a chapter number without anything being numbered. ## How a chapter is structured Each era is one wrapper group holding two things in order: - **The plate.** A `core/image` at `aspectRatio: 21/9` with `scale: cover`, so whatever the buyer uploads is cropped to the same band across all three chapters whether it was shot landscape, square or portrait. - **The caption row.** A `core/columns`, top-aligned, 30% for the date range and 70% for the title and copy, set a spacing-40 gap below the picture. The paragraph sits in a nested constrained group at 34rem inside the 70% column, so the copy runs at about 65 characters rather than the width of the column. **Type never touches the photograph.** Every word in the section is on the section's own ground, below a picture rather than over one, which is the whole reason this composition is safe with a buyer's own photographs in it: a photograph's luminance is as unknowable as an accent's, because the buyer chooses the image. ## What happens at 390px Below 782px core stacks the caption row, so each chapter becomes picture, date, title, paragraph, in that order, for all three eras. That is the same reading order the section has on a laptop, which is the advantage of a composition with nothing beside anything: nothing has to be rearranged to fit a phone, so nothing is lost when it is. The 21:9 crop holds at every width. At 390 the plate fills the band, about 350px wide and about 150px tall, which is still a band rather than a stripe, and the three of them keep the section's rhythm. The seams survive untouched, because they are borders on the wrapper groups and stacking does not affect them. ## Why it is a history and not a process Nothing is numbered, nothing is counted down and there is no next step. The eras are real date ranges rather than positions in a sequence, and the last one is open ("2002 to now") because the yard is still working. It is also not the other timelines. `timeline-spread` is these same three eras as alternating `core/media-text` spreads, picture left, then right, then left, with the words beside the photograph rather than under it: take that one where the eras want a rhythm and this one where they want equal weight. `timeline-rail` is six one-sentence moments hung on a vertical rule and `timeline-decades` is twenty packed lines under four decade heads; neither carries a photograph. Three eras with a plate and a paragraph each is a density decision before it is a styling one. ## What it inherits from your theme - **The typeface.** No font family is stated anywhere. - **Your colours.** `base` for the ground, `contrast` for every piece of type, both ending on a colour WordPress guarantees. The seams are `currentColor`. - **Your spacing scale.** Every gap in the section, including the space either side of each hairline and the gap between a plate and its caption, is a spacing preset, so a theme with a generous scale gets longer chapters. - **Your photographs.** Three plates with example photographs. Choose Replace to select your own media; the 21:9 crop is already set. ## What it decides for itself - **Full bleed with a 1240px measure** for the band, its seams and the plates, which all stop on the same edges, and a 34rem measure for the copy inside each chapter. The wrappers state that width themselves, because a constrained group left to the theme re-caps its plate at the theme's content width, 645px in Twenty Twenty-Five, and the seam then runs visibly past the picture. - **The 21:9 crop**, stated on the image rather than left to the file, so three photographs of three different shapes still make three identical plates. - **The 30 / 70 caption split**, top-aligned, so the date sits on the same line as the title rather than centring itself against a paragraph. - **The scale collision** between the date range and everything else. - **The seam**: `currentColor`, 1px, on the wrapper group rather than on a separator block. - **The titles are `h3`.** Three of them under the section's `h2` is a real outline for a history with three named eras, and three is few enough that it does not flood the page's heading structure. ## What to change first 1. **The three eras.** Duplicate a wrapper group to add a fourth, and give the new one a `border-top` like the middle chapters. The first carries no rule and the last carries no bottom padding; those two belong to whichever chapters are first and last. 2. **The photographs.** Wide crops are what this pattern wants, but the 21:9 is applied for you, so a portrait original will be cropped to the band rather than break the row. What matters is that the subject survives a letterbox: check the top and bottom of each picture after you replace it. 3. **The date ranges.** Plain text, so `1946 to 1972`, `1946-72` or `The first quarter century` all set. Anything much longer than about twenty characters wants the clamp floor lowering, because the date has 30% of the measure and no more. 4. **The copy.** Two to three sentences per chapter. The paragraph is held to 34rem, so a longer one runs down the page rather than out across it, and four or five sentences turn a chapter into an article. ## Notes - Core blocks only. No plugin, no script, no separator, no `