Score Ring Cards

About this block

Score Ring Cards is a comparison expressed as scores rather than rows. Under a centered heading and lede, four cards each hold an SVG ring gauge with the score centered inside, the dimension name, the industry average in small print, and one supporting sentence. A closing caption names the data source so the scores read as compiled rather than invented.

The four dimensions are one array of label, score, percentage, average, and blurb, and the ring fill is computed from the percentage with the circumference math in the component. Cards reflow from four across to two and one on smaller screens. Swap the scores and averages and the rings redraw themselves, no SVG editing required.

When to use

Reach for this block when third party validation is your comparison. Scores with a named source carry a different kind of authority than the self declared rows of competitor-table or us-vs-them-split, and the industry average line does the comparative work without naming a rival. Use comparison-with-quote when one customer voice beats aggregate scores, or dimension-rows for richer prose per dimension.

A natural flow around it on a Marketing Pro page:

Before

• Testimonials so individual voices set up the aggregate scores

After

• Case Studies for the long form proof behind a dimension
• CTAs once credibility is banked

What you can display

One strong use is review platform scores across buying criteria. Other scored sets:

• Support SLAs. First reply, resolution time, satisfaction, and coverage scored against your published targets.
• Onboarding quality. Time to launch, migration success, training rating, and first month retention.
• Platform health. Uptime, deliverability, latency, and incident response as operational scorecards.

Tip: keep every score under ten, a perfect ring reads as fiction and quietly discredits the other three.