# Funnel · MIAN

Conversion through the stages of a funnel, visits to signups to paid, with the rate between steps.

- Id: `funnel` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/funnel
- Use for: conversion funnel, sales funnel, drop-off, signup funnel.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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).

## Examples

### Trial funnel, September

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/funnel/source