Component

Card metric

Published on

Description

A card metric shows one number with a label underneath. Use it for dashboard summaries: counts, totals, scores. The number is formatted with DataNumber, so it follows the locale of the reader.

Use a regular Card when the content needs a heading, a description or a link.

Example

Open in new tab
View HTML markup 
<ul class="grid">
  <li>
    <article is="ds-card" aria-labelledby="card-metric-domains" class="metric ">
      <div class="text"><data value="12">12</data> <span id="card-metric-domains">Domains monitored</span></div>
    </article>
  </li>
  <li>
    <article is="ds-card" aria-labelledby="card-metric-findings" class="metric ">
      <div class="text"><data value="3">3</data> <span id="card-metric-findings">Open findings</span></div>
    </article>
  </li>
</ul>

Accessibility

  • The card is an <article> named by its label through aria-labelledby, so each metric is announced by what it measures.
  • The number is a <data> element whose value carries the machine-readable figure.
  • Pass a unique id per card so the generated label ids do not collide.

References

  • Card — for content with a heading and a link
  • DataNumber — the number formatter used inside

Variables

  • value — the number to show
  • id — used to build the label id
  • children — the label