Card Group
A cluster of stat cards with a big number, label, and short caption in each. Use it to spotlight key metrics across a landing page in a clean grid.
A cluster of stat cards with a big number, label, and short caption in each. Use it to spotlight key metrics across a landing page in a clean grid.
Search blocks by description or jump to a page.
Card Group displays three stat cells inside a single bordered container. Each cell holds an icon or a stacked avatar cluster at the top, a large bold number below it, and a short muted label beneath that. The cells sit in a three column grid on wider screens and stack to a single column on mobile. Angled dividers appear between the cells, rotating from diagonal on small screens to a gentler slant on large ones, giving the layout a subtle visual rhythm without breaking the clean card boundary.
All three cells are independent. You can rewrite the number and label in any cell, swap the inline SVG icon for a different one, or replace the avatar cluster with an icon, and the layout stays intact. The number of cells is fixed at three, but the content in each is entirely your own.
This block suits a fintech or banking product page where you need to show a handful of headline figures without overwhelming the reader. It works well on a product landing page or a trust section sitting just below the hero, where two or three credibility numbers (transaction volume, client count, satisfaction rate) need to land quickly. Compared to a plain horizontal row like Horizontal With Dividers, the card container gives the figures more visual weight and frames them as a deliberate proof block rather than a footnote strip.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The three cells can carry almost any combination of quantitative proof. A few natural fits for a financial product:
Tip: keep each label to three or four words so the number stays the focal point and the cell does not feel crowded at smaller sizes.