Metrics group

Overview

A metrics group is a horizontal row of small tinted cards, one per metric. Each card holds a single number — count, currency, or percentage — and a single secondary label. The group is the wrapper that lays the cards out; the card is the atom. Use them at the top of a report, a dashboard tab, or a settlement summary so the user gets the headline numbers in one fixation.

Anatomy

Three parts inside the card. The wrapping group adds two more — gap and width behaviour — that turn a row of cards into a single scanner-friendly band.

Sizes

Two layouts cover the surfaces in the product. Desktop fills a row at any width with flex-1 cards; mobile wraps to two cards per row at fixed half widths.

Content

Numbers come pre-formatted. The card doesn't format anything — it just renders the string passed in, with tabular figures so a row of cards stacks on the decimal point. Use Intl.NumberFormatwith the user's locale upstream.

Info icon

The info icon turns the label into a help anchor. Use it sparingly — most labels (Transactions, Refunds, Net sales) speak for themselves. The icon earns its place when the metric's formula or scope is non-obvious — “Approval rate”, “Chargebacks”, “Median ticket”.

In product

A real surface from the merchant dashboard — the daily end-of-day report. Six metrics, one card each, half-width on mobile, six across on desktop. The header carries the date and a link to the full report; the metrics row is the headline.

Behavior

• 01Cards stretch, never crop. On desktop, every card uses flex: 1 0 0 with a min-width: 0so the row distributes evenly. The value text never truncates — if a number won't fit, it wraps.
• 02Cap the row at six on desktop. Below seven, a row reads as one band. At seven or more, the eye loses the line and starts processing them as a list — at which point a real list is the right component.
• 03Mobile wraps to two columns. Below 600 px, every card sits at calc(50% - 8px) and wraps. Don't scroll horizontally; the user shouldn't need to swipe to see the headline numbers.
• 04Cards are not interactive. No hover state on the surface; no click handler on the card itself. The info glyph is the one tappable surface inside, and it opens a tooltip — not a route. To navigate to a detail view, put a link in the header above the group.
• 05Empty values render as “0” or “—”. Never empty string, never null. A zero is a meaningful metric; a dash signals the metric is unavailable for this period.

Accessibility

• The group is the unit. Wrap MetricsGroup in role="group" with an aria-labelthat names the report — “Today’s metrics”, “Daily totals”. Screen readers announce the label once and step through each card in DOM order.
• Card semantics: each card is a plain <div> with no ARIA role. The value and label are separate paragraphs so they announce in order — number first, label second — which mirrors visual reading.
• Info icons get an explicit label. The icon's aria-labelreads the explanation, not the word “info”. The tooltip shows the same copy on hover/focus for sighted users.
• Tabular numerals are an accessibility feature. They make values comparable in a glance for sighted users. Combine with slashed-zero so a zero never reads as a capital O.
• Screen-reader value formatting: if the displayed value is € 1.234,56, the accessible name should be 1234.56 EUR — screen readers read the symbol literally, so format the announcement separately when the screen-reader pronunciation differs from the visual.

Code

The component composes from MetricsGroup + MetricCard. The group is a flex row; the card is the tile. The wrapper MetricCardSlot handles the desktop flex-1 / mobile half-width sizing.

import { MetricsGroup, MetricCard, MetricCardSlot } from "@flatpay-dk/ui";

// Format upstream — never inside the card
const fmt = (n: number, currency = "EUR") =>
  new Intl.NumberFormat("da-DK", {
    style: "currency",
    currency,
    minimumFractionDigits: 2,
  }).format(n);

// Daily totals — desktop layout
<MetricsGroup label="Today's metrics">
  <MetricCardSlot>
    <MetricCard value="92" label="Transactions" />
  </MetricCardSlot>
  <MetricCardSlot>
    <MetricCard value={fmt(1114)} label="Net sales" />
  </MetricCardSlot>
  <MetricCardSlot>
    <MetricCard
      value="98,4%"
      label="Approval rate"
      info
      infoDescription="Successful authorisations over the report period."
    />
  </MetricCardSlot>
  <MetricCardSlot>
    <MetricCard value="0" label="Refunds" />
  </MetricCardSlot>
</MetricsGroup>

// Mobile layout — two cards per row
<MetricsGroup size="mobile" label="Today's metrics">
  {metrics.map((m) => (
    <MetricCardSlot key={m.id} size="mobile">
      <MetricCard value={fmt(m.value)} label={m.label} size="mobile" />
    </MetricCardSlot>
  ))}
</MetricsGroup>

// Unavailable metric — render an em dash, not an empty string
<MetricCard value="—" label="Median ticket" />

Best practices

Metrics groups multiply across the product. A small habit applied consistently keeps every dashboard reading like one publication.

Props

MetricCard

MetricsGroup

Related