Pattern Paste
Subscribe

27 layout options11 Styled looksNo plugin needed

WordPress timeline patterns

Add a WordPress timeline section with block patterns: dated milestones down a rule, for a history, a roadmap or a company story.

38 layout options shown

Showing 1–38 of 38

Live preview at its actual size. Scroll to explore the whole section.

Explore pattern

About day in hours rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTeamNo plugin needed

About day in hours

An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then.

TeamPreview pattern
Availability calendar rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Availability calendar

The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark.

TimelinePreview pattern
Course plan taper rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Course plan taper

A typical course of treatment drawn as eight weeks on a ruled baseline: a solid bar for each clinic session, its height set by its minutes, and a short rule for each week of exercises at home, so the sessions visibly shorten and spread out as the course goes on.

TimelinePreview pattern
First visit to scale rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

First visit to scale

What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button.

How it worksPreview pattern
Season calendar strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Season calendar strip

The year as one strip of twelve month cells, each naming the work that suits it: winter months inverted, the nesting months marked with a heavy top rule, autumn months set apart, and a three-part key beneath saying why.

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

Timeline ahead

A timeline that runs forward: six dated entries hung on one continuous currentColor hairline, three of them behind and three still to come, with the current entry set on an inverted plate so the reader can see at a glance where the work stands.

TimelinePreview pattern
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
Timeline axis rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline axis

Five eras of one observatory hung across the page rather than down it.

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
On the veil, a variation of Timeline on a cover rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

On the veil

The composition changes rather than the colour: the plate is removed and the record is set straight onto the photograph, at a wider measure and a larger heading.

Variation of Timeline on a coverPreview pattern
Timeline cover years rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline cover years

A full-bleed cover under a heavy veil of your theme's contrast colour: a display headline in the lower left and, down the right side, a rail of six years, each a large year figure and one event line, joined by a vertical rule with a hairline branching off at every year.

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

Timeline crossing

Six dated entries alternating across one continuous currentColor rule down the centre of the section: the first hangs left of the line and is set against it, the second hangs right, and so on.

TimelinePreview pattern
Crossed plates, a variation of Timeline crossing rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Crossed plates

The composition changes rather than the colour: each entry becomes a bordered plate rather than bare copy, so the same unbroken rule now threads between six panels instead of running beside six blocks of text.

Variation of Timeline crossingPreview pattern
Timeline decades rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline decades

A long history set as a record: four decade heads, each opened by a 2px currentColor rule and carrying five dated single-line entries under it, twenty in all.

TimelinePreview pattern
Eras across rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Eras across

A long history read across the page rather than down it: four era columns side by side, each opened by a 2px currentColor rule with its decade at display size, a tracked note under it and five dated single-line entries below that, twenty in all.

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

Timeline frames

An image-led history: four dated milestones, each a portrait photograph cropped to 4:5 with its date and title on a slab beneath it, under a currentColor hairline that butts the frame.

TimelinePreview pattern
Frames with a ledger, a variation of Timeline frames rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Frames with a ledger

The composition changes rather than the colour: the four staggered frames are unchanged, and a full-width ruled row is added beneath them listing the same four dates with a short note for each.

Variation of Timeline framesPreview pattern
Timeline numerals rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline numerals

Five dated entries and no rule anywhere.

TimelinePreview pattern
Timeline order of service rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

Timeline order of service

The order of the day as an order-of-service booklet opened flat: a cover page with the names, the date, a small photograph and the place meets a running page at the fold, where each time is a small tracked label over the event in a larger line, centred and divided by short rules.

TimelinePreview pattern
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
One rail, two tracks, a variation of Timeline parallel rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

One rail, two tracks

The composition changes rather than the colour: the two hairlines collapse into one spine near the centre with the years hung on it, and the tracks lose their own rails.

Variation of Timeline parallelPreview pattern
Timeline rail rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

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.

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
The archive as a strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineNo plugin needed

The archive as a strip

A history taken in one pass: eight narrow 2:3 photographs in a single row across the whole measure, set hard against each other, each filed under a currentColor hairline with its date in wide-tracked capitals and nothing else.

TimelinePreview pattern
TPO permission steps rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

TPO permission steps

A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line.

How it worksPreview pattern

Choose a layout for your page

Keep each entry to a date, a title and a line. A timeline is a history; use a process pattern when the reader has to act in order.

New to patterns? Learn how to copy and paste a pattern. Read how we test patterns.

All Core Patterns