Quote With Radial Stats

About this block

Quote With Radial Stats is a two column case study. The left column is a large quote with avatar, name, and role. The right column is a bordered panel holding three SVG donut rings, each with its value centered inside and a short label below, closed by a caption that names the customer and time window. The rings are plain SVG circles whose fill percentage is computed from the data, with the circumference math in the component rather than magic numbers.

The three stats are one array of value, percent, and label, so the rings redraw themselves when the numbers change. The quote block swaps like any testimonial. Percentages near 100 read as fullness and small ones read as precision, the mix is part of the design, and the caption keeps every figure honest.

When to use

Reach for this block when a customer voice and their percentages belong in the same glance. Rings make share of something tangible in a way plain digits do not: metrics-spotlight states results, this block shows proportions. Pick quote-led-story when the narrative needs paragraphs, or story-with-before-after-chart when the proof is a comparison rather than a share.

A natural flow around it on a Marketing Pro page:

Before

• Features so the quote lands on capabilities the reader has just seen

After

• Case Studies in a grid for readers who want more than one voice
• CTAs to ask while the rings are still on screen

What you can display

One strong use is operational percentages: on time delivery, time recovered, and attribution coverage. Other ring worthy trios:

• Adoption. Seats active, teams onboarded, and workflows migrated for a rollout story.
• Quality. Deliverability, open rate, and list health for an email platform.
• Efficiency. Budget under management, automated sends, and reviews passed first time.

Tip: keep all three values as percentages, mixing a ratio or a duration into the rings breaks the proportional read that makes donuts work.