Stepper

Multi-step progress indicators available as the <velin-stepper-wc> web component or the pure-CSS .velin-stepper class.

CSS stepper

Account
Profile
Review
Done

<ol class="velin-stepper">
  <li class="velin-stepper-item completed">Account</li>
  <li class="velin-stepper-item active">Profile</li>
  <li class="velin-stepper-item">Review</li>
  <li class="velin-stepper-item">Done</li>
</ol>

Web component

The <velin-stepper-wc> version manages state automatically via active attribute.

<velin-stepper-wc active="2">
  <velin-step label="Account"></velin-step>
  <velin-step label="Profile"></velin-step>
  <velin-step label="Review"></velin-step>
  <velin-step label="Done"></velin-step>
</velin-stepper-wc>

Vertical layout

Add .velin-stepper-vertical (CSS) or orientation="vertical" (WC) for a stacked layout.

Create account
Verify email
Set password

<ol class="velin-stepper velin-stepper-vertical">
  <li class="velin-stepper-item completed">Create account</li>
  <li class="velin-stepper-item active">Verify email</li>
  <li class="velin-stepper-item">Set password</li>
</ol>