Progress Tracker - Usage

Basic Guidelines

• The Progress Tracker is not clickable, the user can only navigate by using the content within the rest of the page.

• There is no overflow for this container. The titles will wrap if there is not enough space on one line.

• The recommended maximum number of stages for the Progress Tracker is four. If there are more stages to a process they might need to be grouped.

Variants Usage

In a simple process, each stage will run through three states:
Not started — In progress — Complete.

This is shown for stage two ‘Delivery’ in the example below:

It is possible to split a stage into two by using the Mid-way progress state. This is necessary when a stage within the process is more extensive and the content is distributed over multiple pages. It indicates further progress without ticking the stage off as complete. In React, this will work as a percentage based on how many pages there are between stages.

Alignment

The Progress Tracker must align with the grid system set out in Foundations. It sits in-line with the rest of the text.

In a 12-column grid layout, the Progress Tracker should be centre-aligned within the six centre columns of the grid, in-line with the rest of the text. The example below is downscaled proportionally for illustration purposes.

The Progress Tracker generally sits directly beneath the masthead.

The Progress Tracker is recommended to also sit directly beneath any other elements that are fixed to the top, like Tabs or a sticky basket.

The Progress Tracker is positioned below any universal elements (i.e. headings) that span over the entire user flow the Progress Tracker is covering. When the user moves through the stages, only the content below the Progress Tracker is changing, while elements above are unaffected.