Steps
A numbered tracker for flows like checkout or sign up.
Mark the current step with aria-current="step". Steps before it
show as done, steps after it as still to come. Below a 36rem wide screen the
steps stack, with each label next to its marker.
- Cart
- Shipping
- Payment
- Review
Colors
A color class on the list colors the done and current steps.
- Account
- Profile
- Done
Variables
| Variable | Default |
|---|---|
--i-steps-marker-size | 2rem |
--i-steps-line-width | 0.125rem |