Steps
Create a visual journey or link between sections of content — an auto-numbered sequence of steps, each with a heading and a short description.
What it is
Steps show a sequence people move through — an auto-numbered visual journey or a link between sections of content. Each step has a heading and a short description; the number is applied by the design system, not typed. Use steps for a process people follow in order, not for a set of unordered options.
How to add it
Add a Steps block, then add a step for each stage. Give each step a heading and describe what happens at that stage. Steps are numbered automatically in the order you arrange them.
Configure it
Colour
Choose a colour band for the steps: the default brand accent, or dark, light, or supplementary to suit the section it sits in.
Step marker size
Choose how large the numbered markers and the line joining the steps are: standard, medium, or small. It changes the markers only — each step keeps the heading level its place on the page gives it.
Tips
Keep step headings short and action-led so the sequence is scannable.
Use steps only for genuinely ordered stages — if the order doesn't matter, a list or cards are clearer.
Related pages
For unordered groups of content, consider Cards or a List. For content people switch between, see Tabs.
Example
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.
Discovery
Understand your users, their challenges, and what motivates their behaviour.
Alpha
Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.
Beta
Turn the best-performing prototype into a working minimum viable product.