Steps

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.

Preview
HTML

Open this example in a new tab: steps

<ul class="asp-steps__links">    
  <li class="asp-steps__item">    
    <a class="asp-steps__link" href="#step-step-title-1">Step title 1</a>    
  </li>    
  <li class="asp-steps__item">    
    <a class="asp-steps__link" href="#step-step-title-2">Step title 2</a>    
  </li>    
  <li class="asp-steps__item">    
    <a class="asp-steps__link" href="#step-step-title-3">Step title 3</a>    
  </li>    
</ul>    
<ol class="asp-steps" data-steps-setting="closed">    
  <li class="asp-step asp-step--closed" id="step-step-title-1">    
    <h2 class="asp-step__heading">    
      <span class="asp-step__number">    
        <span class="sr-only">Step</span>    
        1    
        <span class="sr-only">:    
        </span>    
      </span>    
      <span class="asp-step__title">Step title 1</span>    
    </h2>    
    <div class="asp-step__content">    
      <p>To view or hide the content within this step, use the show/hide toggle.</p>    
    </div>    
  </li>    
  <li class="asp-step asp-step--closed" id="step-step-title-2">    
    <h2 class="asp-step__heading">    
      <span class="asp-step__number">    
        <span class="sr-only">Step</span>    
        2    
        <span class="sr-only">:    
        </span>    
      </span>    
      <span class="asp-step__title">Step title 2</span>    
    </h2>    
    <div class="asp-step__content">    
      <p>To view or hide the content within this step, use the show/hide toggle.</p>    
    </div>    
  </li>    
  <li class="asp-step asp-step--last asp-step--closed" id="step-step-title-3">    
    <h2 class="asp-step__heading">    
      <span class="asp-step__number">    
        <span class="sr-only">Step</span>    
        3    
        <span class="sr-only">:    
        </span>    
      </span>    
      <span class="asp-step__title">Step title 3</span>    
    </h2>    
    <div class="asp-step__content">    
      <p>To view or hide the content within this step, use the show/hide toggle.</p>    
    </div>    
  </li>    
</ol>

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.

Development criteria	Status
WCAG 2.2 compliant	Not started
WCAG 2.1 compliant	Completed
HTML / Nunjucks version	Completed
Figma version	Not started
M365 versions	Not started
Documentation	In progress

Published 3 May 2024
Last updated 13 September 2024