Stepper development
The stepper component displays progress through numbered steps.
Default
<div class="stepper">
<ol class="stepper__list">
<li class="step step--completed step--active">
<button class="step__marker">
<span class="step__label">First</span>
</button>
</li>
<li class="step">
<button class="step__marker">
<span class="step__label">Second</span>
</button>
</li>
<li class="step">
<button class="step__marker">
<span class="step__label">Third</span>
</button>
</li>
</ol>
<div
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0%"
class="stepper__bar"
>
<span class="stepper__bar-value" style="width: 0%;"></span>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28