Here, sequence is part of the story. A Timeline works when not only the events matter, but also when they happened and in what order. Use it for company history, project phases, product development milestones or any process where progression matters.
If you can rearrange the items without changing the meaning, a timeline is probably not the right structure.
A vertical timeline gives longer explanations and a fuller story more room.
The team builds its first offer around one clearly defined problem.
New customer groups appear, so operations and the service process become more structured.
Building on earlier experience, the business starts working across more countries.
New products and services move into focus. The story does not end here; it keeps developing.
A timeline is not a diary. Do not include every date. Keep the moments that genuinely changed the story, the process or what happened next.
Another example
A process or project can also become much easier to understand when the order itself matters.
For a few short, equal-weight steps, a horizontal timeline gives a quick overview. This is the Columns style.
Clarify the goals, constraints and materials needed.
Define the structure, visual direction and main decisions.
Turn the approved direction into a working version.
Review, refine and agree on the next steps.
In the horizontal layout, Style decides how the steps look. Every style numbers the steps itself, so a label that only repeats the number (01, 02…) is not shown twice.
Numbered columns under a rule. The default, suiting most processes. The project process above uses it.
Each step a card, joined by arrows. Suits a service a customer goes through.
Numbered circles on a line: the classic timeline.
A bar segment per step, the period as the big figure (e.g. “1–2 weeks”). For when the durations matter.
A flat renovation from the customer's side: every step a card, joined by arrows.
We visit the flat, look around and listen to what you want.
Itemised, with a deadline and a payment schedule.
Every week we send photos of where things stand.
A walk-through together, cleaning and the guarantee.
The story of a made-up ceramics studio, in the classic timeline form.
One wheel and one kiln in a rented cellar.
An evening group of six.
A small shop opens beside the studio.
Course places can now be booked on the website.
How long a mug spends in the studio. Here the big figure is the duration.
The thrown piece dries slowly and evenly.
After the first firing the piece is solid but still porous.
The glaze goes on in layers, drying in between.
The hotter firing and the slow cool-down.
Alongside the milestone content, you can control the layout and the section around it.
Use vertical layout for longer explanations, horizontal for a few short, equal-weight steps (in the Columns, Cards, Circles or Bar style). Path joins the steps with a line that draws itself as visitors scroll, and Zigzag leads through a process with round icons and a dashed line.
Three to five points are usually easiest to scan. Each one has its own title and formatted description.
Use a year, date or duration for each point. The horizontal styles number the steps themselves, and in the Bar style this field becomes the big figure.
Every step can have its own link and link text. The Step links setting decides whether it is a text link or a small button.
In the Zigzag layout you can set two icons the steps take in turn, and give a step its own. Without an icon, the step number shows.
The Draw the line on scroll switch, together with the Motion group's Entrance and One by one settings, makes the steps appear one by one.
Add a section heading and a short introduction above the timeline.
Place the timeline on the page background or in a custom or inverted band, with readable, wide or full content width.
Use spacing controls to tune the rhythm, and add an anchor ID when navigation should jump directly to this section.
The third layout joins the steps with a line that draws itself as visitors scroll.
As the visitor scrolls, the line joining the steps draws itself, and each step lights up when the line reaches its dot.
On a wide screen the steps alternate sides. On a narrow screen they sit in one column with the line on the left.
If a visitor's device asks for less motion, every step shows at once and the line is already fully drawn.
The editor canvas lists the steps in order; you see the alternating layout on the published page.
A ceramic mug's journey through the workshop, from raw clay to the shelf.
The clay is wedged so no air bubbles stay trapped inside.
The body of the mug takes shape on the wheel, then dries slowly.
After the first firing the piece is solid but still porous.
The glaze melts into glass during the second, hotter firing.
After checking and sanding, the mug is ready for its new owner.
The fourth layout is made for processes: round icons and a dashed line lead the visitor through the steps.
Upload two icons for the circles and the steps take them in turn. A step can also have its own icon; without one, the circle shows the step number, as in the example below.
A dashed line with square turns joins the circles, and it can fill with the accent colour as the visitor scrolls.
Every step can end in a link, as a text link or a small button. This works in the other layouts too.
On a phone the steps line up in a single column, one under the other.
A consultation from the client's side. The first two steps link to the block that does the job.
A few questions up front, so the meeting can get straight to the point.
In person or online, you go through the situation and the options together.
The client receives the recommendations and the next steps in writing.
Motion reinforces the order: the visitor's eye moves with the steps. The vertical and zigzag examples above work this way.
In the Vertical and Zigzag layouts, switch on Draw the line on scroll: the line fills with the accent colour as the visitor scrolls down. The Path layout draws its line on its own.
In the Motion group, an Entrance (Fade, Fade up or Slide) together with the One by one switch brings the steps in one after another. In the Zigzag layout, Slide always arrives from the step's own side.
If a visitor's device asks for less motion, every step shows at once and the line is already fully drawn.
A timeline adds value only when chronology or sequence is genuinely important.
Use it when there is a clear sequence, but not one built around dates or milestones.
Use it when one visual should stay fixed while a longer story unfolds step by step beside it.
Use it when the items are equal in importance and their order does not change the meaning.
SHOW THE JOURNEY
Choose a vertical, horizontal (in four styles), path or zigzag layout and keep only the milestones that genuinely move the story forward.