Search blocks by description or jump to a page.
Metric cards that pair each figure with a tinted icon set in a colored circle. Use to make categories easy to scan on a busy analytics dashboard.
With Colored Icons is a four-card stat row. Each card carries an uppercase label, a large numeric value, and a tinted icon badge aligned to the right edge. The four badges use different background colors (blue, green, yellow, purple) so each metric has a distinct visual identity even before the reader focuses on the label. The cards sit in a responsive grid that collapses to two columns on tablet and a single column on small screens.
Every card is independent. You can reorder them, swap the label and value copy, change any icon, or reduce to three cards without affecting the layout. The color pairing on each badge (background tint and icon stroke) follows a light and dark mode convention, so both themes look intentional out of the box.
Reach for this block on an analytics or overview dashboard where users need to distinguish metric categories at a fast scan. In a project management workspace, the color coding lets a team member spot the "active tasks" card, the "time logged" card, and the "completion rate" card without reading every label. It fits better here than a plain stat row when you have four naturally distinct categories that benefit from a color signal, and better than badges when the trend direction matters less than the category identity.
A natural flow around it on an Application page:
Before
After
The icon badge makes category recognition instant, so any set of metrics that map cleanly to distinct categories works well here.
Tip: assign colors by category type rather than by value so the same color always means the same thing across every dashboard view.