Timeline

A run of dated entries down a vertical line, for telling a story in order — product launches, milestones, company history.

On desktop the entries alternate either side of a centre line and interleave, so the two columns stagger rather than sitting in matched rows. On mobile the same entries stack into a single column, image on the left, in the order you added them.

You add the entries as Timeline Item blocks. Add them in chronological order — that IS the mobile order, and the desktop zigzag is worked out from it automatically.

Add entries in one list, not two columns

It looks like two columns on desktop, but you never build two lists. Add every entry to the single list in the order it should be read, and the left/right alternation happens on its own.

That also means inserting an entry in the middle never forces you to rebalance anything — everything after it re-alternates automatically.

Settings

Layout

Setting	What it does
Colour scheme	Standard scheme picker for the section background and text.
Show leaf mark	Shows the MigreLief leaf above the timeline. On by default.
Line colour	The colour of the centre rail and the short connectors joining each entry to it. Defaults to Leaf green.
Right column offset	Desktop only. How far the right-hand entries are pushed down so the two columns interleave rather than lining up in rows. 0 lines them up. Default 100px.

Closing statement

The block at the end of the timeline — the “TODAY / Still the standard” panel in the design. Leave every field here empty to hide it.

Setting	What it does
Tag	The small pill above the heading. Always Fern green.
Heading	The large closing line.
Heading level	H2 (default), H3, or H4.
Text	The line beneath the heading, set in the serif face.

Spacing

Setting	What it does
Top / Bottom padding (mobile)	Spacing above and below the section on mobile. Default 2.5rem.
Top / Bottom padding (tablet)	The same for tablet. Default 3rem.
Top / Bottom padding	The same for desktop. Default 3.5rem.
Section ID	Optional anchor, so a link elsewhere on the page can jump here.

Blocks

Accepts Timeline Item blocks only.

Tips

The heading levels should stay in order

The closing heading defaults to H2 and each entry’s heading to H3, which is the right nesting when this section sits on its own. If the section sits underneath another heading on the page, step both down one level so the page outline stays in order.

Very long entry text stretches the rail

Each entry’s text column is capped, but a long body still makes that entry taller — which pushes the entries below it on the same side further down and can drift the interleave out of alignment with the other column.

Keep the body copy to roughly the length shown in the design (one or two short sentences). If one entry has to run long, the Right column offset setting is the dial to nudge things back into balance.