The ‘Steps’ element helps triage users through a number of steps. This helps them to follow the actions they need to complete, and also helps us to manage demand on services.

Users can self-service the content but using the clearly labelled steps.

This component is used sparingly on the website.

WIP — This toggle functionality uses JavaScript. If JavaScript is enabled, the button is hidden, on page load JavaScript checks for the corresponding content. If the corresponding content is found, the button is unhidden and the content is either shown or hidden, depending upon the aria-expanded attribute set on the button. If JavaScript is disabled, the button remains hidden and content visible. (Same as Filter and Help. Header – not yet documented, will utilise the same JavaScript functionality with an addition data attribute to hide other content when a button is pressed. See also tabs)

The example below shows the list above the steps component.

Steps with open steps

The example below shows the steps component with the first step open. Note the uniqueID parameter.

The example below shows the steps component with all steps open. Note the uniqueID parameter.

Alias

What was known as a steps component on the ‘frontend’ is now a progress component.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.