Segmented Stat Card
A headline total with a stacked horizontal bar and legend showing the breakdown by source or category.
A headline total with a stacked horizontal bar and legend showing the breakdown by source or category.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Segmented Stat Card puts 3,847 new signups this month on top and then answers where they came from: one stacked horizontal bar split into Organic search at 42.1%, Referral at 31.2%, and Paid ads at 26.6%, each segment a div width set from the count ratio. A legend row below the bar repeats each label alongside the raw count and percentage. No chart lib, div widths only, foreground opacity tokens for the shading.
The segments array drives both the bar and the legend from a single source. Opacity tokens (bg-foreground/80, /45, /20) keep the palette coherent in both light and dark themes without a green/red status scale.
Reach for this block when a single total needs a visible breakdown by source, channel, or category. Wire total and the segments array to your acquisition or grouping endpoint to keep the bar proportions live.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a signups-by-source acquisition card. Other segmented stats:
Tip: three segments is the readable ceiling for a horizontal bar; four or more collapse into noise at card width.