Components / Display & Media / Funnel Chart
Funnel Chart beta
Stages that only shrink — visited, signed up, activated, paid — with the leak visible at every step.
<figure class="k-funnel" role="img" aria-label="Funnel: of 12,480 visitors, 3,910 signed up, 1,864 activated and 693 purchased — a 5.6% end-to-end conversion." style="margin:0;max-width:430px;width:100%"> <div class="st"><span class="nm">Visited</span><div class="bar" style="width:100%"></div><span class="vl">12,480<span>100% of visitors</span></span></div><div class="st"><span class="nm">Signed up</span><div class="bar" style="width:72%"></div><span class="vl">3,910<span>31% of visitors</span></span></div><div class="st"><span class="nm">Activated</span><div class="bar" style="width:47%"></div><span class="vl">1,864<span>15% of visitors</span></span></div><div class="st"><span class="nm">Purchased</span><div class="bar" style="width:28%"></div><span class="vl">693<span>5.6% of visitors</span></span></div> <figcaption>Visited → Purchased: <b>5.6%</b>. The biggest leak is signup → activation.</figcaption> </figure>
.k-funnel{font-family:var(--k-font);text-align:left;color:var(--k-ink)}
.k-funnel .st{display:grid;grid-template-columns:92px 1fr 74px;gap:12px;align-items:center;padding:5px 0}
.k-funnel .nm{font-size:12.5px;font-weight:550;color:var(--k-ink-2)}
.k-funnel .bar{height:30px;border-radius:7px;background:var(--k-accent)}
.k-funnel .st:nth-child(2) .bar{opacity:.78}
.k-funnel .st:nth-child(3) .bar{opacity:.56}
.k-funnel .st:nth-child(4) .bar{opacity:.36}
.k-funnel .vl{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.k-funnel .vl span{color:var(--k-ink-3);font-size:11px;display:block}
.k-funnel figcaption{margin-top:9px;font-size:12px;color:var(--k-ink-3)}
Usage
For conversion pipelines where each stage is a subset of the last. If stages can grow or repeat, it is not a funnel; use a Bar Chart and keep everyone honest.
Accessibility
Every stage is a text row first — name, count, share — and the bar is decoration on top, so the whole funnel reads without the picture.
Related parts
Aspect Ratio beta
A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.