Examples
Flow steps
-
Task 1
-
Task 2
-
Task 3
-
Task 4
-
Task 5
<div class="ys-flow-steps" role="progressbar" aria-valuenow="3"
aria-valuemin="0" aria-valuetext="Task description" aria-valuemax="5">
<ol class="ys-flow-steps__list" aria-hidden="true">
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 1</span>
</li>
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 2</span>
</li>
<li class="ys-flow-steps__item ys-flow-steps__item--active">
<span class="ys-flow-steps__label">Task 3</span>
</li>
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 4</span>
</li>
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 5</span>
</li>
</ol>
</div>
Vertical flow steps
-
Task 1
-
Task 2
-
Task 3
-
Task 4
-
Task 5
<div class="ys-flow-steps ys-flow-steps--vertical" role="progressbar" aria-valuenow="3"
aria-valuemin="0" aria-valuetext="Task description" aria-valuemax="5">
<ol class="ys-flow-steps__list" aria-hidden="true">
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 1</span>
</li>
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 2</span>
</li>
<li class="ys-flow-steps__item ys-flow-steps__item--active">
<span class="ys-flow-steps__label">Task 3</span>
</li>
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 4</span>
</li>
<li class="ys-flow-steps__item">
<span class="ys-flow-steps__label">Task 5</span>
</li>
</ol>
</div>
HTML Guidelines
UX and Design Guidelines