Gradient Grid
A grid of stat tiles washed in soft gradients for a vivid, modern look. Use it to display headline metrics when you want the section to feel premium.
A grid of stat tiles washed in soft gradients for a vivid, modern look. Use it to display headline metrics when you want the section to feel premium.
Search blocks by description or jump to a page.
Gradient Grid wraps four stat cards inside a softly tinted panel that spans the full content width. A centered heading and subheading sit at the top of the panel. Below them the cards sit in a four column grid, each card centered around a circular icon badge, a large bold number, a short label, and a muted trend line that shows the direction and size of recent movement using an up or down chevron.
The heading, subheading, and all four card values are plain copy you can swap freely. The four card structure is consistent but each card is independent, so you can change any metric, relabel the trend note, or swap the chevron direction to reflect a decrease without affecting the others.
This block suits an operations or company overview page where you want a cluster of key figures to feel polished and self contained. For a logistics platform it works well on a carrier or shipper landing page to show delivery volume, on time rate, active routes, and customer satisfaction in one tidy panel. Where a plain row of numbers would get lost, the tinted surround gives the section visual weight without adding decorative clutter.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Any four metrics that tell a coherent story about your platform's scale or health will fit the grid. A few directions to consider:
Tip: keep all four trend notes directionally honest. A red down chevron on a churn card reads as a positive signal, so match icon color and direction to the actual meaning of the movement.