Steps
Progress through a multi-step flow, horizontal or vertical.
Horizontal
- Account
- Shipping
- Payment
- Review
<ol class="mn-steps">
<li class="mn-step" data-state="complete"><span class="mn-step-title">Account</span></li>
<li class="mn-step" data-state="complete"><span class="mn-step-title">Shipping</span></li>
<li class="mn-step" aria-current="step"><span class="mn-step-title">Payment</span></li>
<li class="mn-step"><span class="mn-step-title">Review</span></li>
</ol>Vertical
- Create projectDone in 2 minutes
- Invite your teamAdd people by email
- Go liveConnect a domain
<ol class="mn-steps mn-steps-vertical">
<li class="mn-step" data-state="complete"><div><span class="mn-step-title">Create project</span><span class="mn-step-desc">Done in 2 minutes</span></div></li>
<li class="mn-step" aria-current="step"><div><span class="mn-step-title">Invite your team</span><span class="mn-step-desc">Add people by email</span></div></li>
<li class="mn-step"><div><span class="mn-step-title">Go live</span><span class="mn-step-desc">Connect a domain</span></div></li>
</ol>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/steps.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-steps | On an <ol>. |
| mn-step | A step. data-state="complete" or aria-current="step". |
| mn-step-title · mn-step-desc | Text. |
| mn-steps-vertical | Vertical layout. |
Accessibility
- aria-current="step" marks the current step. Add visually hidden "completed" text to finished steps if the tick alone carries the meaning.