Pattern Paste
Subscribe

Core Patterns Timeline

FreeStandard

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.

All patterns

Loading patterns…

Theme
Preview size
Look
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The five eras. Duplicate a cell to add one.
  2. The years. Plain text, so 1889, 1889-91 or Spring 1927 all set.
  3. The era copy. Two or three lines each.
  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 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.

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
  • Zero column gap.
  • The year at display size
  • The reading measure.

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

Five eras of one hilltop observatory, run across the page instead of down it. One horizontal rule spans the section and the eras hang beneath it as columns: the year butted against the line, a short title, two or three lines of copy. Core blocks only: core/group, core/heading, core/paragraph.

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.

Make it yoursVariations and the edits to make first

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

Display type

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(1.75rem, 2.6vw, 2.75rem)
Technical notesBlock mechanics, responsive behaviour and constraints

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.

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.

Questions

Timeline axis: common questions

Does Timeline axis need a plugin?

No. It is built only from core WordPress blocks (group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Timeline axis 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 axis have?

2: Open axis and Inverted axis. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Timeline axis free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit.

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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

14,793 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.9vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.9vw, 0.875rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Carrow Ridge Observatory</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2rem, 4.2vw, 3.5rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2rem, 4.2vw, 3.5rem))">One ridge, five instruments.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained","contentSize":"40rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Every era is measured against the same line: what the observatory was looking at, and what it was looking through. The columns are meant to be read across, not down.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"0"}}},"layout":{"type":"grid","minimumColumnWidth":"13rem"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1889</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">Brass and gaslight</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">A twelve-inch refractor under a canvas dome, paid for by the town&#8217;s watchmakers and open on Fridays.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1927</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">The plate room</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Glass plates replaced the eyepiece. Forty thousand of them are still stacked in the north room.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1954</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">Wired to the coast</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">A telephone line and a quartz clock made the ridge useful to anyone timing an occultation.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1981</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">A one-metre mirror</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">The new mirror came up the hill by road in March. The refractor went downstairs to the schools room.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">2016</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">Public nights</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Survey work moved north, out of the town&#8217;s glare. The dome now opens twice a week to whoever books.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Inverted axis
15,345 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.9vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.9vw, 0.875rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Carrow Ridge Observatory</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2rem, 4.2vw, 3.5rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2rem, 4.2vw, 3.5rem))">One ridge, five instruments.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained","contentSize":"40rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Every era is measured against the same line: what the observatory was looking at, and what it was looking through. The columns are meant to be read across, not down.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"0"}}},"layout":{"type":"grid","minimumColumnWidth":"13rem"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1889</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">Brass and gaslight</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">A twelve-inch refractor under a canvas dome, paid for by the town&#8217;s watchmakers and open on Fridays.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1927</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">The plate room</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Glass plates replaced the eyepiece. Forty thousand of them are still stacked in the north room.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1954</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">Wired to the coast</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">A telephone line and a quartz clock made the ridge useful to anyone timing an occultation.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">1981</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">A one-metre mirror</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">The new mirror came up the hill by road in March. The refractor went downstairs to the schools room.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"clamp(0.875rem, 1.2vw, 1.25rem)","right":"clamp(0.875rem, 1.2vw, 1.25rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:clamp(0.875rem, 1.2vw, 1.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(0.875rem, 1.2vw, 1.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.6vw, 2.75rem)","fontWeight":"600","letterSpacing":"-0.02em","lineHeight":"1.0"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.6vw, 2.75rem);font-weight:600;letter-spacing:-0.02em;line-height:1.0">2016</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.4vw, 1.375rem))">Public nights</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Survey work moved north, out of the town&#8217;s glare. The dome now opens twice a week to whoever books.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Timeline

Explore all 20 Timeline patterns

Timeline archive rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline archive

A history set as a contact sheet: eight square photographs four across in two tight rows, each filed under a currentColor hairline with the date in wide-tracked caps and three or four words of title.

TimelinePreview pattern
The spread as chapters rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

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.

TimelinePreview pattern
Timeline on a cover rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline on a cover

A whole history laid over one full-bleed photograph.

TimelinePreview pattern