Stats With Sparklines
Four stat cards, each topped by a small sparkline that shows the trend behind the number.
Four stat cards, each topped by a small sparkline that shows the trend behind the number.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Stats With Sparklines is a four card stats section. A centered heading and lede sit above a responsive grid of bordered cards, and each card stacks a small sparkline, a large value, a label, and a context note. The sparkline is a tiny inline SVG polyline with a baseline and an end point dot, so the trend registers at a glance before the number is even read.
Each card is one entry in a plain array holding the value, label, note, and the sparkline points string, so adding or removing a metric is a one line change. The points are plain SVG coordinates inside a fixed viewBox, nudge them by hand to sketch any shape, rising lines for growth metrics and falling lines for costs. No charting library is involved anywhere.
Reach for this block when direction matters as much as magnitude. A falling cost number reads as a win only when the line beside it falls too. It beats metric-tiles-band when your metrics are trends rather than totals, and it stays lighter than stats-with-bar-chart when no single metric deserves a hero chart. Mix rising and falling lines deliberately, the contrast is the story.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a quarterly scorecard: leads up, conversion up, cost down, response time down. Other ways to fill the four cards:
Tip: point every sparkline the way good news points, invert the data for cost metrics so down still draws as a win.