Stat Bento Grid
A left aligned header, then one dominant hero card carrying the headline number and sourcing beside four smaller supporting stat cards in a two by two grid.
A left aligned header, then one dominant hero card carrying the headline number and sourcing beside four smaller supporting stat cards in a two by two grid.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Stat Bento Grid gives one number the room it deserves and lets the rest support it. A left aligned header sits over an asymmetric grid where a dominant hero card holds the headline figure at the largest scale, a one line claim, and a sourcing note, while four smaller cards fill a two by two arrangement beside it with the operating numbers that make the headline possible.
The hero card is written inline and the four supporting stats live in a plain array, each a value and a label. The layout collapses gracefully, the hero spans two columns and both rows on wide screens, then stacks above a simple grid on smaller ones. Nothing is graphical, so the block renders instantly and holds in any theme.
Reach for this block when you have one flagship number and a handful of proof points that explain it, and a flat row of equal tiles would bury the figure that matters most. It is the hierarchy driven sibling of metric-tiles-band and a calmer alternative to single-stat-spotlight when the headline needs company rather than isolation.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is attributed revenue as the hero with reach and reliability numbers alongside. Other layouts:
Tip: pick a hero number that the four small cards can actually explain, the supporting stats should read as the reason the big one is true.