Steps

Summary

The steps pattern should be used to visualize the steps in a wizard.

There are no attributes defined for this pattern.

Example

  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4
  5. Step 5

Markup

<ol class="zui-steps">
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 1</span>
    </li>
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 2</span>
    </li>
    <li class="zui-steps-step zui-steps-step-current" style="width: 20%">
        <span>Step 3</span>
    </li>
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 4</span>
    </li>
    <li class="zui-steps-step" style="width: 20%">
        <span>Step 5</span>
    </li>
</ol>
Fork me on GitHub