KPI Cards
A centered stats header over three KPI cards, each pairing a small label and oversized value with a delta chip and a twelve bar sparkline.
A centered stats header over three KPI cards, each pairing a small label and oversized value with a delta chip and a twelve bar sparkline.
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
KPI Cards turns your strongest numbers into the centerpiece of the page. A centered header frames three metric cards, and each card stacks a small uppercase label, an oversized value, a pill delta chip with a trending arrow, and a compact sparkline of twelve bars that gives the number a sense of motion.
The sparklines are plain divs at fixed heights, so there is no chart library to install and nothing to configure. Each card is one entry in a typed array: change the label, value, delta text, and bar heights independently, or add a fourth card and let the grid reflow on its own.
Reach for this block when your product has traction worth leading with and you want the numbers to do the talking. On a developer tools landing page it sits well right after the hero, where active workspaces, automated runs, and hours saved make the promise concrete before a single feature is explained.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is company wide usage stats. A few other ways to use the frame:
Tip: keep every value short enough to stay on one line at all breakpoints. Round aggressively, since 2.4M reads far stronger than 2,412,908.