Funnel
Conversion through the stages of a funnel, visits to signups to paid, with the rate between steps.
Trial funnel, September
- Visited pricing—
- Started trial12.0%
- Connected a bank63.9%
- Paid27.5%
<ol class="mn-funnel" style="max-width:40rem">
<li><span>Visited pricing</span><span class="mn-funnel-bar" style="--_v:100%">18,420</span><span class="mn-funnel-rate">—</span></li>
<li><span>Started trial</span><span class="mn-funnel-bar" style="--_v:62%">2,210</span><span class="mn-funnel-rate">12.0%</span></li>
<li><span>Connected a bank</span><span class="mn-funnel-bar" style="--_v:40%">1,412</span><span class="mn-funnel-rate">63.9%</span></li>
<li><span>Paid</span><span class="mn-funnel-bar mn-success" style="--_v:22%">388</span><span class="mn-funnel-rate">27.5%</span></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/funnel.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-funnel | The stages (<ol>). |
| mn-funnel-bar | A bar; --_v sets its width. A colour role changes its colour. |
| mn-funnel-rate | Conversion from the previous stage. |
Accessibility
- Each stage is text, label, number and rate, so the funnel reads correctly without the bars.
- Explain what the rate is relative to (the previous step, or the first).