Theme:

Steps

Steps show progress through a sequence of stages. Completed steps use color classes; future steps remain neutral.

Basic Steps

  • Register
  • Choose plan
  • Payment
  • Confirmation
<ul class="dui-steps"> <li class="dui-step dui-step-primary">Register</li> <li class="dui-step dui-step-primary">Choose plan</li> <li class="dui-step">Payment</li> <li class="dui-step">Confirmation</li> </ul>

Color Variants

  • Submitted
  • Reviewing
  • Pending
  • Complete
  • Order placed
  • Processing
  • Shipped
  • Delivered
<ul class="dui-steps"> <li class="dui-step dui-step-success">Order placed</li> <li class="dui-step dui-step-success">Shipped</li> <li class="dui-step">Delivered</li> </ul>

Vertical Steps

  • Create account
  • Verify email
  • Set up profile
  • Start using app
<ul class="dui-steps dui-steps-vertical"> <li class="dui-step dui-step-primary">Create account</li> <li class="dui-step dui-step-primary">Verify email</li> <li class="dui-step">Set up profile</li> </ul>