COMPONENTS

Metric cards

Use the existing card class and native term/value pairs for readable values, trends and comparisons. No metric-specific classes or data attributes.

Usage

Markup: .card > dl > dt, dd > output

Behaviour: Backend supplies values; native meter/progress optional. No JavaScript or new attributes.

  • Use .card on an article, with a direct dl containing dt for the metric label and dd > output for its value. Further dd elements contain comparison text, context or a native progress/meter.
  • Theme, palette, shape, density, typography, border, depth, decorative edges and optional materials reuse the existing card contract. Place shared attributes on html, a parent or the card.
  • Write the trend and comparison period in words. An increase is not always good: costs and incidents can rise. Colour and arrows are never the only explanation.
  • The backend supplies formatted values, comparison text and native progress/meter values. CSS does not calculate statistics, animate counters, fetch data or announce updates on a timer.
  • Use the existing grid layout to arrange multiple cards. Long values wrap, the DOM reading order stays unchanged and no chart or icon is required.
  • Load the complete/scoped build, or tokens, base, components and reva.card-patterns.css. Materials and motion remain optional.

Component API and styling module · Inherited appearance settings

Value and comparison

One existing class; label, value and comparison stay readable in HTML.

Total revenue
€42,500
Up 8.4% versus August
Recognised revenue in September.
HTMLSelect text to copy
<article class="card">
  <dl>
    <dt>Total revenue</dt>
    <dd><output>€42,500</output></dd>
    <dd>Up 8.4% versus August</dd>
    <dd><small>Recognised revenue in September.</small></dd>
  </dl>
</article>

Decrease with context

Explicit language separates the direction from its business meaning.

Support incidents
12
Down 25% versus August
Fewer incidents this month.
HTMLSelect text to copy
<article class="card">
  <dl>
    <dt>Support incidents</dt>
    <dd><output>12</output></dd>
    <dd>Down 25% versus August</dd>
    <dd><small>Fewer incidents this month.</small></dd>
  </dl>
</article>

Value and target

A labelled native meter shows a bounded value; the number and target remain visible.

Team utilisation
78%
Target range: 70–85%
HTMLSelect text to copy
<article class="card">
  <dl>
    <dt>Team utilisation</dt>
    <dd><output>78%</output></dd>
    <dd>Target range: 70–85%</dd>
    <dd><label>Utilisation <meter min="0" max="100" low="70" high="85" optimum="78" value="78">78%</meter></label></dd>
  </dl>
</article>