# Timeline axis > Five eras of one observatory hung across the page rather than down it. A single currentColor rule runs the full width of the section and each era hangs beneath it as a column: the year butted against the line, then a short title and two or three lines of copy. The eras are read side by side, so the reader compares them instead of scrolling through them. The rule is unbroken because the cells butt with no gutter, and each cell carries a left tick so its year reads as a mark on the axis. It is a history and not a process: nothing is numbered and nothing asks the reader to act. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/timeline-axis.html Section: Timeline Access: Free, and free to keep. 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, paragraph Keywords: timeline, history, eras, years, about, axis, chronology, comparison ## Variations (2) ### Open axis (the default) Identical markup in every theme. The rule runs the full width on your theme's own text colour, with the five years hanging under it as ticks. The cells share the axis at desktop, fold to three and two on a tablet and stack on a phone, where each era keeps its own rule and reads as an entry. ### Inverted axis Identical markup in every theme. The same axis on a dark band: the ground takes your theme's contrast colour and the type takes base. The rule and the ticks are currentColor, so they follow the inverted text without being restated anywhere. Nothing else about the composition changes. --- ## The signature moment: the rule is an AXIS, not a rail **The signature is that every year is measured against the same horizontal line.** A rail puts one entry after another and the reader takes them in sequence, one at a time, with the previous one already scrolled past. An axis puts all five side by side and the reader compares them: 1889 against 2016, what the observatory looked at against what it looked through, in one glance. That is the thing a rail can never show, and it is why the copy in each column is written to be read against its neighbours rather than after them. The axis is a structural mark carrying the whole composition, so it is `currentColor` and never an accent: it cannot resolve to nothing, it follows your text colour, and it inverts with the band when you recolour it. ### How the line is kept continuous There is no separator block and no rule element. Each era is a `core/group` inside a grid, and each of those groups carries its own `border-top`. **The grid's column gap is zero**, so the five segments butt and form one unbroken line rather than five dashes with holes between them: this is the failure to watch for, and any horizontal gap between the cells reintroduces it. The space between eras comes from each cell's own left and right padding, never from the gap. Each cell also carries a `border-left`, which drops from the line as a tick at the start of its era, so the year reads as a mark ON the axis rather than as a number under it. The cells are grid items, so they share a row height and the five ticks are the same length. ### What happens as the page narrows The eras sit in a `grid` layout with a `minimumColumnWidth` of `13rem` rather than in a `core/columns` row, because five columns of readable copy do not fit in a tablet. Five across at a desktop measure, three and two at 820, and one per row on a phone. **When they stack, each cell's top border becomes a per-entry rule and the left tick becomes a bracket down the side of the entry**, which still reads as a dated record even though the parallel comparison is gone: five columns cannot hold at 390 and pretending otherwise would ladder the copy into ribbons two words wide. Every wrapped row keeps a continuous rule of its own, because the rule belongs to the cells and not to a wrapper. ## Why it is a history and not a process `steps-ledger` and `steps-run` are processes: numbered, ordered, and the reader is inside them deciding whether to start. Nothing here is numbered, nothing is counted and there is no next step. The years are real dates, which is why they are plain paragraphs and not a `core/list`: an ordered list would renumber itself and would refuse a date. It is also neither of the other two patterns in this section. `timeline-rail` is six entries down one vertical hairline, read in sequence. `timeline-decades` is twenty single lines grouped under decade heads. This one is the only one that runs the time axis horizontally, and the orientation is the product: it holds fewer entries than either, on purpose, because five is the most that can be compared side by side without the copy laddering. ## 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 chains ending on a colour WordPress guarantees. The axis and the ticks are `currentColor`. - **Your spacing scale.** Every gap, including the drop from the axis to the year and the space between wrapped rows, is a spacing preset. ## What it decides for itself - **Full bleed with a 1240px measure**, and a `13rem` minimum cell, which is what produces five across at that measure. - **Zero column gap.** That is the continuity of the line, not a spacing taste. - **The year at display size**, `clamp(1.75rem, 2.6vw, 2.75rem)`, set hard against the rule with a `1.0` line-height so the digits butt it. - **The reading measure.** A cell is about 210px wide at 1240, which runs the copy at roughly 28 characters. That is the practical cap on how much any one era may say. ## What to change first 1. **The five eras.** Duplicate a cell to add one. Six will still fit a wide desktop and will fold sooner; more than six and the axis stops being comparable, which is the whole point of it. 2. **The years.** Plain text, so `1889`, `1889-91` or `Spring 1927` all set. Anything much longer than about eight characters wraps at the display size. 3. **The era copy.** Two or three lines each. Keep them the same length: unequal cells are the one thing that makes the row look accidental rather than measured. 4. **The titles.** Under about 24 characters, or they take a third line in a cell and push the copy out of step with its neighbours. 5. **The band.** Ship the base on a light page and `axis-inverted` where the section should read as a dark interval between two pale ones. ## The variation - **`axis-inverted`** moves one axis, colour, and nothing else. The ground takes the `contrast` chain and every piece of type takes the `base` chain; the composition is otherwise identical, cell for cell. The rule and the ticks are untouched, because `currentColor` follows the inverted text on its own. Every heading states its own colour explicitly, so a theme that colours headings through an element style cannot paint the titles into the dark ground. ## Notes - Core blocks only. No plugin, no script, no separator. - Every colour is a fallback chain ending on a guaranteed colour, and every rule is `currentColor`. - The borders are on groups inside the grid rather than on the grid itself, so the line survives a cell being added, removed or reordered. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.75rem, 2.6vw, 2.75rem)