Pattern Paste
Subscribe

Core Patterns Timeline

FreeStandard

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.

The rail runs on above the first year and below the last entry, so the section reads as a length of a longer history rather than a closed list. It is a history and not a process: nothing is numbered and nothing asks the reader to do anything.

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 six entries. Duplicate a row to add one.
  2. The years. Plain text, so 2009, Spring 2009 or Q1 all set.
  3. The entry copy. One sentence that says what changed.
  4. The heading and lede. Written to say the rail is open at both ends.
  5. The side. Ship the base for a normal page, and rail-mirror where the section sits against something on the left of the page.

The signature moment

The rail runs past both ends

The signature is that the hairline starts above the first year and carries on below the last entry. The first entry's copy group takes a spacing-70 top padding and the last one takes a spacing-70 bottom padding, so the rule exists for a stretch where there is nothing beside it at either end. A history that begins exactly at its first entry and stops exactly at its last one reads as a closed list of six things. This one reads as a length cut out of something longer, which is what a company history actually is, and the last entry says so in as many words.

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 16/84 split
  • The reading measure.
  • The alignment of the year to its entry.

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

Six dated milestones down one continuous hairline. The year hangs in a narrow column against the rule, the event sits on the other side of it. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph.

The signature moment: the rail runs past both ends

The signature is that the hairline starts above the first year and carries on below the last entry. The first entry's copy group takes a spacing-70 top padding and the last one takes a spacing-70 bottom padding, so the rule exists for a stretch where there is nothing beside it at either end. A history that begins exactly at its first entry and stops exactly at its last one reads as a closed list of six things. This one reads as a length cut out of something longer, which is what a company history actually is, and the last entry says so in as many words.

The rail 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 section if you recolour it.

How the rail is built, and why it is unbroken

There is no separator block and no rail element. Each entry is a two-column row whose right column holds a group with a border-left, and consecutive entries carry no gap between them, so those borders touch and form one line. The entries' own top and bottom padding is what spaces the content, not the gap between rows. That is why the rule is continuous rather than a stack of six dashes, and it is also why adding an entry cannot break it.

The columns do not stack. isStackedOnMobile: false keeps the year beside its entry at 390, which is the measured way to beat core's flex-basis: 100% !important rule. If the row stacked, the year would drop above the copy and the rail would break into six pieces at exactly the width where a timeline most wants to be one line. The year column is 16%, which is about 56px at 390 and holds a four-digit year at the clamp() floor with room to spare.

Make it yoursVariations and the edits to make first

What to change first

  1. The six entries. Duplicate a row to add one. The only thing to remember is that the first row carries the larger top padding and the last row the larger bottom padding: those two values are the run-past, and they belong to whichever rows are first and last.
  2. The years. Plain text, so 2009, Spring 2009 or Q1 all set. Anything much longer than four characters wants a wider first column.
  3. The entry copy. One sentence that says what changed. Two sentences still fit; three turn the rail into a document.
  4. The heading and lede. Written to say the rail is open at both ends. If you close the rail by removing the run-past, change that sentence too.
  5. The side. Ship the base for a normal page, and rail-mirror where the section sits against something on the left of the page.
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. The rail is currentColor.
  • Your spacing scale. Every gap in the section, including the run-past at the two ends of the rail, is a spacing preset, so a theme with a generous scale gets a longer overhang.

What it decides for itself

  • Full bleed with a 1240px measure.
  • The 16/84 split and the right-aligned year, so the years sit snug against the rule and form a hard edge down the section.
  • The reading measure. Each entry's paragraph sits in a nested constrained group at 34rem, so the copy runs at about 65 characters instead of the full column.
  • The alignment of the year to its entry. The year's margin-top is the same spacing preset as its entry group's padding-top, so the two tops line up in any theme, including the first entry where both are the larger run-past value.
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 rather than positions in a sequence, which is why they are set in a plain paragraph and not in a core/list: an ordered list would renumber itself and would refuse a date.

It is also not timeline-decades, the other pattern in this section. That one holds twenty single lines grouped under decade heads and has no rail at all. This one is six open entries, each with room for a sentence, on a rule. Six moments against thirty years is the difference, and it is a density difference rather than a styling one.

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 rail is a border on a group inside a column, not on the column itself, so it does not depend on core/column border support.

Questions

Timeline rail: common questions

Does Timeline rail 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 rail 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 rail have?

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

Is Timeline rail 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.

19,587 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|50"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--50)"><!-- 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.75rem, 0.85vw, 0.8125rem)","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.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Since 2009</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))">A studio, one entry at a time.</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))">Six moments that changed how the studio works. The rule runs on past both ends of the list, because a history is a section of something longer.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-right" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2009</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">The first commission</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Two of us, one room above a bakery, and a rebuild of a fishing charter&#8217;s booking site that paid for the whole of that year.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-right" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2012</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">A workshop of our own</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">We stopped renting desks and took the top floor on Bermondsey Street, with room for four and a table long enough to argue over.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-right" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2015</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">The first design system</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">A retailer with eleven sites asked us for one set of rules. We wrote them, and they have shaped every project since.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-right" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2018</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Ten years, thirty-one clients</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">The retainer replaced the project as the way most work arrives, which changed what we hire for as much as what we build.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-right" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2021</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Everything moved to blocks</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">We rebuilt our own theme on the block editor first, then took the six largest client sites across over the following eighteen months.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-right" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2024</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|70","left":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--70);padding-left:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">The studio at fifteen</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Nine people, two floors and a waiting list we are honest about. The next entry on this rail is not written yet.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Variation: Mirrored rail
20,229 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|50"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"align":"right","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.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-align-right 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.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Since 2009</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"align":"right","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 has-text-align-right" 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))">A studio, one entry at a time.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained","contentSize":"40rem","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"align":"right","style":{"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-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Six moments that changed how the studio works. The rule runs on past both ends of the list, because a history is a section of something longer.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|40","right":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--40);padding-right:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">The first commission</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Two of us, one room above a bakery, and a rebuild of a fishing charter&#8217;s booking site that paid for the whole of that year.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"left","style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-left" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2009</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","right":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-right:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">A workshop of our own</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">We stopped renting desks and took the top floor on Bermondsey Street, with room for four and a table long enough to argue over.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"left","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-left" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2012</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","right":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-right:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">The first design system</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">A retailer with eleven sites asked us for one set of rules. We wrote them, and they have shaped every project since.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"left","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-left" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2015</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","right":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-right:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Ten years, thirty-one clients</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">The retainer replaced the project as the way most work arrives, which changed what we hire for as much as what we build.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"left","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-left" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2018</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","right":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-right:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Everything moved to blocks</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">We rebuilt our own theme on the block editor first, then took the six largest client sites across over the following eighteen months.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"left","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-left" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2021</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"0","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"top","width":"84%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:84%"><!-- wp:group {"style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|70","right":"clamp(1.25rem, 2.5vw, 2.5rem)"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 2.5vw, 2.5rem)"><!-- wp:heading {"level":3,"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">The studio at fifteen</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"align":"right","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-align-right" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.05vw, 1.0625rem))">Nine people, two floors and a waiting list we are honest about. The next entry on this rail is not written yet.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"16%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:16%"><!-- wp:paragraph {"align":"left","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem))","fontWeight":"600","letterSpacing":"-0.01em","lineHeight":"1.25"}}} -->
<p class="has-text-align-left" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 2vw, 1.875rem));font-weight:600;letter-spacing:-0.01em;line-height:1.25">2024</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Timeline

Explore all 20 Timeline patterns

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

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.

TimelinePreview pattern
Timeline spread rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo 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.

TimelinePreview pattern
Timeline stair rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline stair

Six dated entries that step across the page as they descend.

TimelinePreview pattern