Steps

Steps visually indicate the process or status of a series of tasks and organise information for users. A call-to-action button or link can be used to guide users to the full content details.

Refer to NSW Digital Design System - Steps for full guidance and demo on how and when to use this.

Preview

Customisation

A brand colour can be applied to the progress bar on the steps component, including brand dark, brand supplementary and brand accent. The inverse colour is brand light when it is placed inside a dark section.

DCJ enhancement

Add a call-to-action for the step item to improve user engagement. 

DCJ authoring guidelines

• Steps are a mandatory feature on this component. You must use a minimum of 2 steps and a maximum of 10 steps.
• Include a title for the whole step component. Title allows a maximum of 60 characters. 
• Each step heading allows a maximum of 60 characters. 
• Keep step summaries brief and concise. Each step summary allows a maximum of 100 characters. 

Page type

Steps can be used on:

• content pages
• campaign pages.

They cannot be used on:

• homepage
• landing pages
• Easy Read.