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.
{{ aspExample({ code: "<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>", nunjucks: "", title: "", id: "65a92f290d066", url: "" }) }}
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.
{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}