Grid With Sparklines
Six feature cards, each headed by a distinct mini graphic such as a sparkline, ring, or gauge.
Six feature cards, each headed by a distinct mini graphic such as a sparkline, ring, or gauge.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Grid With Sparklines is a six card feature grid. A centered heading and lede sit above two rows of bordered cards, and each card leads with a small graphic on a muted backdrop: a sparkline, a bar row, a progress ring, a dot grid, stacked segments, and a gauge arc. Under each graphic sit a short title and a one sentence blurb. Six different graphic shapes make the grid feel like a product, not an icon set.
The cards are one array of title, blurb, and art component, and each art component is a few lines of SVG or divs you can retune by editing numbers: bar heights, ring percentages with the math in a comment, dot opacities, and segment widths. Drop to four cards or grow to eight and the grid reflows without edits.
Reach for this block when you have six capabilities that each deserve a visual hint but none deserves a full mockup. It sits between icon-grid-six, where lucide icons carry less meaning, and cards-with-mockups, where three features get much bigger panels. The mini graphics suit analytics and data products especially well, every card quietly says measurable.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a reporting suite where each card is a view the customer gets on day one. Other fits:
Tip: match each graphic to its claim, a pacing card with a ring and a mix card with segments reads as designed, swapped they read as random.