Quote With Radial Stats
A large customer quote beside a panel of three donut rings showing percentage outcomes.
A large customer quote beside a panel of three donut rings showing percentage outcomes.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is operational percentages: on time delivery, time recovered, and attribution coverage. Other ring worthy trios:
Tip: keep all three values as percentages, mixing a ratio or a duration into the rings breaks the proportional read that makes donuts work.