Stats With Donut Grid

About this block

Stats With Donut Grid is a proportions section. A centered heading and lede sit above a bordered panel holding three large SVG donut rings, each with its percentage centered inside and a one sentence caption below. Rings make share of visible in a way digits cannot, a 58 ring is unmistakably more than half, and the three captions each explain what the share is of.

The stats are one array of value, percent, and label, and the ring fill is computed from the percentage against a circumference constant, so the rings redraw from data with no SVG editing. Keep all three values as percentages, the proportional reading is the point. The panel holds two or four rings acceptably, three is the sweet spot.

When to use

Reach for this block when your best numbers answer how much of the whole. It splits the difference between stats-with-progress-bars, which handles long labels better, and metric-tiles-band, which handles mixed units better. Use it when all three figures share the percentage shape and each deserves a full sentence of context.

A natural flow around it on a Marketing Pro page:

Before

• Features introducing the automation the rings then quantify

After

• Case Studies to follow share of work with a named story
• Pricing once the leverage is clear

What you can display

One strong use is share of work automated across customers. Other proportion trios:

• Coverage. Share of channels connected, audiences synced, and events tracked for a data completeness story.
• Adoption. Share of seats active weekly, teams past onboarding, and workflows migrated.
• Quality. Share of sends passing checks, campaigns hitting goal, and reports delivered on schedule.

Tip: order the rings so the percentages climb left to right, an ascending row reads as momentum even before the captions are read.