Step indicator
A stepIndicator title
1
2
3
4
Stap 1 van 4
.stepsIndicator
A step indicator shows the flow of a form.
In this example you see that the progressbar has a full width. You can decide to what extend it will be by wrapping am appropriate container class around it.
A container class used in the form templates is the class .formPageContainer.
The step indicator title should be filled accordingly. This could be e.g. the name of the user, the step in which he is, etc.
Markup
<div class="stepsIndicator">
<div class="stepsIndicator__header" aria-live="polite" role="status">
<h3 class="headingM stepsIndicator__heading">A stepIndicator title</h3>
</div>
<div class="stepsIndicator__container">
<div class="stepsIndicator__stepHolder">
<span class="stepsIndicator__dot stepsIndicator__dot--done" style="margin-right: 155.5px;">1</span>
<span class="stepsIndicator__dot" style="margin-right: 155.5px;">2</span>
<span class="stepsIndicator__dot" style="margin-right: 155.5px;">3</span>
<span class="stepsIndicator__dot" style="margin-right: 155.5px;">4</span>
<span class="stepsIndicator__dot" style="margin-right: 0px;"></span>
</div>
<span class="stepsIndicator__progressBarHolder">
<span class="stepsIndicator__progressBar" style="width: 0px;">
</span>
</span>
<span aria-live="polite" role="status" class="stepsIndicator__statusHolder">Stap 1 van 4</span>
</div>
</div>