Grid With Sparklines

About this block

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.

When to use

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

• Heroes to make the promise the six cards then itemize

After

• Comparisons once visitors know the surface area
• CTAs to convert the ones who found their card

What you can display

One strong use is a reporting suite where each card is a view the customer gets on day one. Other fits:

• Monitoring product. Uptime sparkline, error bars, capacity ring, region dots, cost segments, and a health gauge.
• Finance tool. Revenue trend, expense bars, runway ring, category dots, budget segments, and a margin gauge.
• Fitness or habit app. Streak sparkline, weekly bars, goal ring, consistency dots, time segments, and an effort gauge.

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.