Steps

steps

Steps can be used to show a list of steps in a process

steps docs

Class Names:

• Component: steps
• Part: step, step-icon
• Color: step-neutral, step-primary, step-secondary, step-accent, step-info, step-success, step-warning, step-error
• Direction: steps-vertical, steps-horizontal

Syntax

<ul class="steps {DIRECTION}">
  <li class="step step-primary">{completed step}</li>
  <li class="step">{upcoming step}</li>
</ul>

Rules

• Steps are horizontal by default; add steps-vertical to the ul for a vertical layout
• Direction classes go on steps; step-* color classes go on individual step items
• To mark a step with the primary color, add step-primary to that li
• You can add an icon in each step using step-icon class
• To display custom data, add data-content="{value}" to the <li>