Timeline parallel: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-parallel.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # Timeline parallel Two histories run down the page together and are compared row by row: one track is the organisation itself, the other is the wider field it worked in, and a shared year sits between them. Six years, a title and one line per side, with two currentColor hairlines running the length of the record so each track is legible as its own. A header row names the two tracks once, above the entries. It is a comparison rather than a chronology: the point is what the organisation did set against what was going on around it. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The two track labels. They name what is being compared, and everything else in the section depends on the reader getting them in one glance. - The six years. Plain text, so 1953, Spring 1953 or Q1 all set. - The entries. A title and one line each. - The heading and the lede. The lede says what the two tracks are. - The number of rails. Ship the base where both records are equally the subject, and parallel-single-rail where the dates are the subject and the two tracks are commentary on them. The signature moment ## Two rails, one clock The signature is that there are two records and one set of dates. Every other timeline in the catalogue runs one story down one line. This one puts a second story beside it on the same six years, so the section is not a chronology, it is a comparison: what the station did, against what the field was doing while it did it. The year column is the only thing the two tracks share, and it is what makes the row a row. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed with a 1240px measure. - The 42/16/42 split - The facing alignment. - The year at display size - A closed span. 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 Two histories set down the page together and compared year by year: on one track the observatory itself, on the other the science going on around it, with the shared year between them. Six years, a title and one line per side. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph. ### The signature moment: two rails, one clock The signature is that there are two records and one set of dates. Every other timeline in the catalogue runs one story down one line. This one puts a second story beside it on the same six years, so the section is not a chronology, it is a comparison: what the station did, against what the field was doing while it did it. The year column is the only thing the two tracks share, and it is what makes the row a row. That is why the two hairlines are the composition rather than decoration. Each track has its own rail, so the eye can follow one side down the page without losing the other, and the copy on each side is set against its own rail: track A is right-aligned to its border-right, track B is left-aligned to its border-left, so both columns of type face the centre and the year sits in the channel between them. Two lists side by side would read as two lists. Facing them at a shared date is what turns them into one argument. The rails carry the whole composition, so they are currentColor and never an accent: they cannot resolve to nothing, they follow your text colour, and they invert with the section if you recolour it. #### How the rails are built, and why they are unbroken There is no separator block and no rail element. Each row is a core/columns of three, and the two track columns each hold a group with a single-side border. Consecutive rows carry no vertical gap at all: the enclosing section sets blockGap: 0 and every row's core/columns sets blockGap.top: 0, so those borders touch and form two continuous lines. The spacing between rows is each row's own top and bottom padding, never the gap. That is why the rails are two lines rather than twelve dashes, and it is why adding a year cannot break them. Unlike timeline-rail, the rails here do not run past the ends. They start at the first year and stop at the last, because a comparison is bounded by the dates it compares: the span is the point, and an overhang would claim a comparison that the section does not make. #### The header row is part of the design The two tracks are labelled once, in a header row above the entries: small uppercase wide-tracked labels sitting over their own columns, with Year centred between them. It is a table head, not a caption, and without it the reader has to infer from the copy which side is which. Its labels carry the same side padding as the entry groups below, so each label sits over its track's type rather than over the column box. Make it yoursVariations and the edits to make first ### What to change first - The two track labels. They name what is being compared, and everything else in the section depends on the reader getting them in one glance. Keep them short: they stack onto their own lines at 390. - The six years. Plain text, so 1953, Spring 1953 or Q1 all set. Anything much longer than four characters wants a wider middle column, and the middle column is where the two rails meet. - The entries. A title and one line each. Two lines still fit; a paragraph turns the comparison back into two documents. Duplicate a whole row to add a year, and check that the row you copied is not the first or last one if you later change the end padding. - The heading and the lede. The lede says what the two tracks are. If you change the tracks, that sentence is the first thing to rewrite. - The number of rails. Ship the base where both records are equally the subject, and parallel-single-rail where the dates are the subject and the two tracks are commentary on them. ### The variation: one rail, two tracks parallel-single-rail moves one axis, composition, and nothing else. The two hairlines collapse into a single spine near the centre and the years are hung on it; the track columns lose their borders entirely and become 44% each. The section stops being two records kept side by side and becomes one line of dates carrying two commentaries, one either side. The copy, the years and the labels are identical to the base, so the switcher asks one question: is the comparison the subject, or are the dates? Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. - Your colours. base for the ground, contrast for the type, both ending on a colour WordPress guarantees. Both rails are currentColor. - Your spacing scale. Every gap, including the row rhythm and the space under the header row, is a spacing preset, so a theme with a generous scale gets a looser record. ### What it decides for itself - Full bleed with a 1240px measure. - The 42/16/42 split, which gives each track about 500px at 1240: enough for a title and a sentence, not enough for a paragraph. The density is the constraint and it is on purpose. - The facing alignment. Track A right, track B left. This is the decision that makes the comparison legible, so change it last. - The year at display size against entry titles a third of it, so the shared date reads as the spine of the row rather than as a third entry. - A closed span. The rails begin and end with the record. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.25rem, 2.2vw, 2rem) Technical notesBlock mechanics, responsive behaviour and constraints ### What happens at 390, honestly The three columns stack, which is core's default below 782px and the right answer here: at 390 a three-column row gives each track about 150px, which ladders a title into one word per line. So the row unfolds into entry, year, entry, and the six rows become an interleaved sequence. Two things follow, and both are deliberate: - The rails stop being continuous lines. Stacked, each track's group is a full-width block with the year between the pair, so the borders no longer touch. What survives is a per-entry mark: a right-hand rule with the type pushed right for the station, a left-hand rule with the type at the left for the field. The alternation is what tells you which record you are reading, and it is legible without the labels being repeated. - The station entry arrives before its year. The year is a hinge between the two entries it dates rather than a heading above them. It reads as a pair of facts and the date they share, which is the same claim the desktop row makes, in the only order three stacked columns can be read in. The header row stacks too, into three lines of small caps. That is the one place the phone layout is weaker than the desktop one, and it is why the labels are short. ### How the entries are structured Each row is one core/columns with three core/column children: | Column | Width | Holds | |---|---|---| | Track A | 42% | a group with border-right, holding an h3 and one right-aligned paragraph | | Year | 16% | one centred paragraph, its margin-top matching the tracks' padding-top so the three tops line up | | Track B | 42% | a group with border-left, holding an h3 and one left-aligned paragraph | The border is on a group inside the column, never on the column itself, so the pattern does not depend on core/column border support. Both headings state their own text colour, because a theme's heading element style beats a colour inherited from the section group and that is how a title lands the same colour as its ground. ### Notes - Core blocks only. No plugin, no script, no separator, no image. - Every colour is a fallback chain ending on a guaranteed colour, and every rule is currentColor. - Entry copy is set at a clamp() with a 15px floor rather than a core preset, because core's small is 13px in a theme with no size scale. - It is a history, not a process: nothing is numbered, nothing is counted down, and nothing asks the reader to act. Questions ## Timeline parallel: common questions Does Timeline parallel need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Timeline parallel match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Timeline parallel have? 2: Two rails and One rail, two tracks. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Timeline parallel free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 30KB of core-block markup, 5 blocks (column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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 Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Team About day in hours An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then. Example images included and replaceable in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/about-day-in-hours.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Timeline Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 5, font-size 3 WordPress 7.0+ Continue exploring ## Next in Timeline Explore all 20 Timeline patterns (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline order of service The order of the day as an order-of-service booklet opened flat: a cover page with the names, the date, a small photograph and the place meets a running page at the fold, where each time is a small tracked label over the event in a larger line, centred and divided by short rules. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-order-of-service.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline rail Six dated milestones hung on one continuous currentColor hairline: the year in a narrow column set against the rule, the event title and one short paragraph on the other side of it. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-rail.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### 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. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-spread.html)