Modules
Process steps timeline
Numbered steps on a line – for processes, onboarding plans, project timelines and key points.
On this page
Set up the content
- Content → Heading: Eyebrow, heading and lead text.
- Content → Steps: Two to ten steps. Give each step a Title and Text, and use Label for timing such as «Week 1».
- Switch on Highlight this step to emphasise one step, for example the current phase.
- Add Link text and Link to a step that has more to read.
- Content → Buttons: Optional buttons below the timeline.
Choose the look
| Setting | Options |
|---|---|
| Styles → Layout → Timeline | Horizontal (side by side) or Vertical (below each other) |
| Steps per row (desktop) | All in one row, or 2–5 per row for longer processes |
| Alternate sides (desktop) | Vertical only – the line runs down the middle with steps on alternating sides |
| Marker | Number, Icon, Check mark or Dot |
| Show connecting line and Line style | Solid, dashed or dotted |
| Step style | Plain, Tinted card, Outlined card, Elevated card |
| Styles → Markers and line | Marker size and colors, highlighted marker, line color and thickness |
Recipes
- Project timeline: Horizontal, Marker Number, labels with dates.
- Onboarding plan: Vertical with Alternate sides, Marker Icon, Step style Tinted card.
- Key points: Vertical, Marker Check mark, Show connecting line off.
Good to know
- Tablets show two steps per row, and phones always show the vertical timeline, where step text lines up beside the markers. Step text alignment applies to the horizontal timeline on tablets and desktops.
- Screen readers hear the steps as an ordered list, so the order is clear without the numbers.
- Background, module width, spacing and alignment work the same in every module – see Backgrounds and Module width and inset panels.
More in this category
Keep reading
Support
Did this answer your question?
If not, write to us and say which page you were on.
