Onboarding checklist
The first steps of a new account, with progress, done states and one action per step.
Getting started
<div class="mn-card" style="max-width:32rem"><div class="mn-card-header"><div class="mn-row" style="justify-content:space-between"><h3 class="mn-card-title">Set up Ledger</h3><span class="mn-muted mn-small">2 of 4 done</span></div><div class="mn-progress mn-progress-sm" role="progressbar" aria-label="Setup" aria-valuenow="50" style="--_v:50%;margin-top:.5rem"></div></div>
<div class="mn-card-body"><ol class="mn-tasks">
<li class="mn-task" data-done><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title"><span class="mn-sr-only">Done: </span>Create your workspace</p><p class="mn-task-desc">Named, with your company’s currency.</p></li>
<li class="mn-task" data-done><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title"><span class="mn-sr-only">Done: </span>Connect a bank account</p><p class="mn-task-desc">Read-only, takes about two minutes.</p></li>
<li class="mn-task"><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title">Invite your accountant</p><p class="mn-task-desc">They get a free seat.</p><a class="mn-btn mn-btn-sm" href="#">Invite</a></li>
<li class="mn-task"><span class="mn-task-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><p class="mn-task-title">Approve your first matches</p><p class="mn-task-desc">Ledger learns from every approval.</p><a class="mn-btn mn-btn-sm mn-btn-outline" href="#">Review</a></li>
</ol></div></div>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/onboarding.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-tasks | The list (<ol>). |
| mn-task | A step: mn-task-check, mn-task-title, mn-task-desc and an optional button. data-done marks it complete. |
Accessibility
- Use an ordered list and say “Done” in text for completed steps (a visually hidden span).
- Put the overall progress in words too (“2 of 4 done”).