# 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. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/timeline-parallel.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: column, columns, group, heading, paragraph
Keywords: timeline, history, parallel, comparison, two tracks, years, about, context

## Variations (2)

### Two rails (the default)

Identical markup in every theme.

Each track keeps its own hairline and the copy faces the centre from both sides, so the year between them dates two entries at once. On a phone the row unfolds into entry, year, entry, and the rails become a left or right mark that tells you which record you are reading.

### One rail, two tracks

Identical markup in every theme.

The composition changes rather than the colour: the two hairlines collapse into one spine near the centre with the years hung on it, and the tracks lose their own rails. The section reads as one line carrying two commentaries instead of two records kept side by side. Same six years, same entries.


---

## 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.

## 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.

## 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.

## What to change first

1. **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.
2. **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.
3. **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.
4. **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.
5. **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.

## 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.

## 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?

## 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.

## Display type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(1.25rem, 2.2vw, 2rem)