Flow Steps

Examples

Flow steps

<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

<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

Color explanation

  • Component
  • Design guidelines
  • Code guidelines
  • Page