Stat card

How to use it

Use on dashboards and reports to show one headline number and how it moved against the previous period. Replace the labels, values, percentages and previous-period text; write the direction ("Up"/"Down") from the number, and pick the --better or --worse modifier and wording from what the metric means, since more support tickets is bad news. For a series over time, show a chart or table instead of a row of cards.

Accessibility

Each card is an <article> named by its label heading. The direction of change is written out ("Up 8.2%", "Up 12% (worse)") followed by the comparison period and previous value, so it never relies on the green/red colour or the aria-hidden arrow icon; whether the change is better or worse is stated in words too. Nothing is interactive. Value text #0f172a on white is 17.9:1, the label #475569 is 7.6:1, and the change text is #166534 on #f0fdf4 (6.8:1) and #991b1b on #fef2f2 (7.6:1).

Source (copy-ready)

Copy code

<div class="dcl-statcard-grid">
  <article class="dcl-statcard" aria-labelledby="dcl-statcard-users-label">
    <h3 class="dcl-statcard__label" id="dcl-statcard-users-label">Monthly active users</h3>
    <p class="dcl-statcard__value">12,480</p>
    <p class="dcl-statcard__change dcl-statcard__change--better">
      <svg class="dcl-statcard__arrow" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 3l5 6H9v4H7V9H3z" fill="#166534"/></svg>
      <span class="dcl-statcard__delta">Up 8.2% (better)</span>
    </p>
    <p class="dcl-statcard__period">vs October: 11,534</p>
  </article>
  <article class="dcl-statcard" aria-labelledby="dcl-statcard-tickets-label">
    <h3 class="dcl-statcard__label" id="dcl-statcard-tickets-label">Open support tickets</h3>
    <p class="dcl-statcard__value">214</p>
    <p class="dcl-statcard__change dcl-statcard__change--worse">
      <svg class="dcl-statcard__arrow" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 3l5 6H9v4H7V9H3z" fill="#991b1b"/></svg>
      <span class="dcl-statcard__delta">Up 12% (worse)</span>
    </p>
    <p class="dcl-statcard__period">vs October: 191</p>
  </article>
</div>
<style>
.dcl-statcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; max-width: 40rem; }
.dcl-statcard { min-width: 0; padding: 1rem 1.125rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-statcard__label { margin: 0; font-size: 0.875rem; font-weight: 600; color: #475569; background-color: #ffffff; }
.dcl-statcard__value { margin: 0.25rem 0 0.5rem; font-size: 2rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
.dcl-statcard__change { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; }
.dcl-statcard__change--better { color: #166534; background-color: #f0fdf4; }
.dcl-statcard__change--worse { color: #991b1b; background-color: #fef2f2; }
.dcl-statcard__arrow { width: 1rem; height: 1rem; flex: none; }
.dcl-statcard__period { margin: 0.5rem 0 0; font-size: 0.875rem; color: #475569; background-color: #ffffff; }
</style>