With Icons
Metric cards with a small icon beside every value for quick recognition. Use on overview screens where users skim totals by category very fast.
Metric cards with a small icon beside every value for quick recognition. Use on overview screens where users skim totals by category very fast.
Search blocks by description or jump to a page.
With Icons is a row of four metric cards arranged in a responsive grid that collapses to two columns on smaller screens. Each card places a short uppercase label and a large numeric value on the left, with a lightly tinted square icon on the right. The demo surfaces four delivery and engagement figures: total users, average session time, click rate, and pageviews, each paired with a matching icon from the set.
Every card is independent. You can swap the label, the number, and the icon on each one without affecting the others, and you can add or remove cards by extending or trimming the grid. The icon square tints to your primary color automatically, so the visual treatment adapts when you change your theme.
This layout is well suited to the summary header of an operations or dispatch dashboard, where a manager needs to absorb a handful of key figures before drilling into detail. On a logistics platform it covers the metrics that matter at a glance: active deliveries, on-time rate, average route duration, and total packages processed. It works better than a plain table for an overview row because the icons let operators distinguish categories at speed without reading the labels carefully.
A natural flow around it on an Application page:
Before
After
The grid fits any four figures you want operators to see the moment they land on the screen. A few ways to apply it on a logistics platform:
Tip: keep all four labels to two or three words so the uppercase caption row stays narrow and the large number stays the visual focus.