Stats With Icons
Each figure sits beside an icon that signals what the number measures. Use it to make a stats row scannable and add visual cues to every metric.
Each figure sits beside an icon that signals what the number measures. Use it to make a stats row scannable and add visual cues to every metric.
Search blocks by description or jump to a page.
Stats With Icons opens with a centered heading and a short subtitle, then drops into a four column grid of bordered cards. Each card holds a muted label at the top left, a large bold number below it, and a small green trend line with an arrow that shows the recent change. A circular icon badge sits in the top right corner of every card, giving each metric an immediate visual signal.
The heading, subtitle, and all four card slots are independent. You can rewrite every label, number, and trend note, swap out any icon for one that fits your data, or reduce the grid to two or three cards if you have fewer metrics to show.
Reach for this block on a project management or team workspace homepage where you need to show a handful of live health metrics side by side. Because each card pairs its number with a recognizable icon and a trend indicator, readers grasp the category and direction at a glance without reading the label closely. It works better than a plain row of numbers when your metrics span different domains (people, time, money, goals) and you want icons to carry the context rather than dense labels.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Any four related metrics your workspace audience cares about will fit naturally. A few concrete directions:
Tip: keep each trend note to a single short phrase so the card stays uncluttered; the icon and the number should dominate at a glance.