# Timeline spread > Three eras, each given a whole editorial spread: a photograph on one side and, on the other, the date range set at display size with a title and a paragraph of copy under it. The picture changes sides between eras, and a currentColor hairline runs the full measure between one spread and the next, so three spreads read as three chapters of one document rather than three unrelated sections. 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-spread.html Section: Timeline Access: Included in Pattern Paste access. Needs: 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. Blocks: group, heading, media-text, paragraph Keywords: timeline, history, eras, about, media, editorial, spread Promise: Identical markup in every theme. --- ## The signature moment: the alternation and the ruled seam **The picture changes sides between eras, and a hairline runs the full measure between them.** Era one has the photograph left, era two right, era three left, so the eye is thrown across the page each time a chapter ends. That alternation on its own would read as three separate sections that happen to sit near each other; the seam is what stops it. Between one spread and the next runs a 1px `currentColor` rule across the whole 1240px measure, with the same spacing preset above and below it, so the three spreads read as three chapters of one document. Both halves are needed and neither is decoration. Take the rules away and the alternation is just inconsistency. Take the alternation away and you have `timeline-chapters`, which is a different and quieter product. 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. ## How an era is structured Each era is one wrapper group holding one `core/media-text`: - **The wrapper** carries the seam (`border-top`) and the vertical rhythm. The first era has no rule and no top padding, because the heading above it is the section's own opening; the last has no bottom padding, because the section's padding closes it. The two inner wrappers carry equal spacing-70 above and below, so both hairlines sit in the middle of an even gap. - **The media** is 45% of the spread (`mediaWidth: 45`, serialised as `grid-template-columns: 45% auto`, or `auto 45%` when the media is on the right), vertically centred against the words. It includes a public `mediaUrl` for an example photograph, without a site-specific `mediaId`. Choose Replace to select your own media. - **The words** sit in a nested constrained group at 34rem inside the content column, so the copy runs at about 65 characters rather than the width of the column. Inside it: the date range, then the title, then one paragraph. **The date range is the loud element.** It clamps between 28px and 48px with -0.03em tracking, against a title that tops out at 24px and body copy with a 16px floor. That scale jump is what makes a date read as a chapter number without anything being numbered. **Type never touches the photograph.** `core/media-text` keeps the picture and the words in two grid cells, so nothing is set over an image whose luminance nobody can predict. That is the whole reason this composition is safe with a buyer's own photographs in it. ## What happens at 390px `core/media-text` is not `core/columns`: it stacks at **600px**, not 782px, and `isStackedOnMobile` is left at core's default. So between 601px and 782px the spreads are still two columns and only get tighter, and below 600px each era becomes one column with the **picture first and the words beneath it**, in every era. Core puts the figure in grid row 1 regardless of `mediaPosition`, so the alternation does not survive a phone: at 390 this pattern is a run of three picture-then-text chapters, which is the right reading order and is close to what `timeline-chapters` shows at every width. The seams do survive, because they are borders on the wrapper groups and stacking does not touch them, so the section still reads as three chapters on a phone. The content column keeps core's own `padding: 0 8%`, which gives the copy a 31px gutter at 390, and the 34rem measure stops applying because the column is narrower than it. ## 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 two timelines. `timeline-rail` is six one-sentence moments hung on a vertical rule; `timeline-decades` is twenty packed lines under four decade heads. This one is three eras and nothing else, each with a photograph and a paragraph, which is a density decision before it is a styling one: where a rail shows the shape of a history, a spread shows three of its rooms. ## 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, is a spacing preset, so a theme with a generous scale gets longer chapters. ## What it decides for itself - **Full bleed with a 1240px measure**, and a 34rem measure for the copy inside each spread. - **The 45/55 split** and the alternation of which side the picture is on. - **The scale collision** between the date range and everything else. - **The seam**: `currentColor`, 1px, on the wrapper group rather than on a separator block. ## What to change first 1. **The three eras.** Duplicate a wrapper group to add a fourth. Two things to keep: give the new one a `border-top` like the middle eras, and flip its `mediaPosition` so the alternation carries on. The first era carries no rule and the last carries no bottom padding; those two belong to whichever eras are first and last. 2. **The photographs.** Three media frames with example photographs. Landscape crops sit best, because the picture is 45% of the spread and its own aspect ratio sets the height of the row. 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. 4. **The copy.** Two to three sentences per era. One sentence leaves the text column short beside a tall picture; five turns a spread into an article. 5. **The arrangement.** Ship this one where the eras want a rhythm, and `timeline-chapters` where they want equal weight: three wide plates across the whole measure with the date and the copy filed underneath. ## Notes - Core blocks only. No plugin, no script, no separator, no `