C13. Progress indicator
- Japneet Kaur (Deactivated)
Analytics
Release notes
Date | Update | Updated by |
|---|---|---|
13 Jan 2022 | Component finalised | @Japneet Kaur (Deactivated) @Steven Mao (Unlicensed) |
Overview
Objective:
The progress indicator component provides a visual indication of where the user is up to in a multistep process.
Use case:
Use this component where there are clear stages in a multistep process/application. See ‘guided pathways' design as an example.
Business rules
BR-# | Business rules |
|---|---|
BR-1 | On the desktop, this component should be placed on the left hand side. There is room for content next to this component. On the mobile, this component should be full-width. Content related to the progress indicator should go below this component. |
BR-2 | The progress indicator should only be used where there are at least 3 or more steps |
BR-3 | Title is content authorable |
BR-4 | The active stage should be clearly highlighted using colours (see design below). Only one stage can be highlighted at any one time. |
BR-5 | The progress indicator will update based on which step the user is at. |
Design
CMS elements
# | Name | Description | Type | Mandatory? |
|---|---|---|---|---|
1 | Title | Default text to read ‘Steps’. | Text | Y |
2 | Circle icon | Circle to be filled in if step is completed. Circle to be white filled in if step is not completed. | Icon | Y |
3 | Step name | Labels are content authorable. Step name will be highlighted if active. | Text | Y |