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>