Score Ring Component Breakdown

Overview

The dd-score-ring component is a radial SVG donut gauge that displays a score against a maximum, with a visible number and a short label. An arc sweeps proportionally to the value to give an immediate sense of how full or complete a score is.

This component is ideal for audit scores, health indicators, and KPI summaries, and it supports an optional link form so the whole gauge can navigate to a detail view. In WordPress, configure it via ACF fields for score, max, tone, and an optional URL. In Drupal, use a Paragraph type with number fields for score and max plus a select for tone.

Basic Usage

Wrap the gauge in a container with class dd-score-ring containing an inline SVG for the arc, a visible number, and a dd-score-ring__label. Use the figure form for a static gauge or the -link anchor form to make it navigable.

Preview

Performance

13 checks

On-Page

Security

View details

Code

<!-- Static figure form: svg carries the accessible name -->
<div class="dd-score-ring -good">
  <svg class="dd-score-ring__svg" viewBox="0 0 100 100" role="img" aria-label="Performance: 82 out of 100">
    <circle class="dd-score-ring__track" cx="50" cy="50" r="42" fill="none" />
    <circle class="dd-score-ring__value" cx="50" cy="50" r="42" fill="none" stroke-dasharray="263.9" stroke-dashoffset="47.5" transform="rotate(-90 50 50)" />
    <text class="dd-score-ring__num" x="50" y="54" text-anchor="middle" aria-hidden="true">82</text>
  </svg>
  <div class="dd-score-ring__label">Performance</div>
  <div class="dd-score-ring__sub">13 checks</div>
</div>

<!-- Warn tone -->
<div class="dd-score-ring -warn">
  <svg class="dd-score-ring__svg" viewBox="0 0 100 100" role="img" aria-label="On-Page: 64 out of 100">
    <circle class="dd-score-ring__track" cx="50" cy="50" r="42" fill="none" />
    <circle class="dd-score-ring__value" cx="50" cy="50" r="42" fill="none" stroke-dasharray="263.9" stroke-dashoffset="95.0" transform="rotate(-90 50 50)" />
    <text class="dd-score-ring__num" x="50" y="54" text-anchor="middle" aria-hidden="true">64</text>
  </svg>
  <div class="dd-score-ring__label">On-Page</div>
</div>

<!-- Link form: the <a> owns the name, the svg is decorative -->
<a class="dd-score-ring -bad -link" href="#section-security" aria-label="Security: 40 out of 100. View details">
  <svg class="dd-score-ring__svg" viewBox="0 0 100 100" aria-hidden="true">
    <circle class="dd-score-ring__track" cx="50" cy="50" r="42" fill="none" />
    <circle class="dd-score-ring__value" cx="50" cy="50" r="42" fill="none" stroke-dasharray="263.9" stroke-dashoffset="158.3" transform="rotate(-90 50 50)" />
    <text class="dd-score-ring__num" x="50" y="54" text-anchor="middle" aria-hidden="true">40</text>
  </svg>
  <div class="dd-score-ring__label">Security</div>
  <div class="dd-score-ring__sub">View details</div>
</a>

Group multiple rings in a grid to compare scores side by side.

CSS Modifiers (from _dd_score_ring.scss)

The SCSS file defines the ring geometry, arc stroke, and typography, with size and tone modifiers driven by design tokens. Key modifiers include:

-sm: Small size for dense layouts.
-lg: Large size for feature or hero placement.
-good: Success-toned arc for healthy scores.
-warn: Warning-toned arc for middling scores.
-bad: Error-toned arc for poor scores.
-link: Renders the anchor form so the whole gauge is navigable.

Framework files

source/scss/components/_dd_score_ring.scss (styles)

Accessibility and Best Practices

In the figure form the SVG carries role="img" and an aria-label stating the score and maximum. In the link form the <a> owns the accessible name and the SVG is marked aria-hidden="true" to avoid a duplicate announcement. The value is always present as visible text, so meaning does not depend on the arc or colour (WCAG 1.1.1 and 1.4.1). The arc grow-in animation is gated behind prefers-reduced-motion, and the link hit area is at least 24 by 24 CSS pixels (WCAG 2.5.8 Target Size Minimum).