Data display

Card

The primary content surface — white background, soft-1 shadow, 8 px corner radius, 20 px padding. One outer shell; the inside is composed from primitives (titles, metrics, charts, lists, progress bars, activity rows). Build dashboards from these variants — don't reach for new surfaces.

Overview

One .card shell — many internals. Cards are the canonical surface for grouping related data on a page; everything dense is composed inside one. Each variant below shares the same outer shell — only the inside changes. Most cards open with a header (title + optional secondary action) and close with a foot (meta + optional link).

Use cases

  • Basic record cards. Title, meta, status pill. The default for "browse entities" surfaces where every card is the entry to a detail page.
  • KPI / metric cards. Single number front-and-center, trend underneath, sparkline beside it.
  • Multi-stat cards. Hero stat + supporting stats below.
  • Chart cards. Donut, bar, sparkline visualizations inside a card with title + meta.
  • Progress cards. Single or multi-track progress bars showing completion or quota usage.
  • Activity feed cards. Vertical stream of dated events.
  • List-inside-card. A short list of rows wrapped by a card — settings, members, related items.

Properties

ElementClassNotes
Card shell.cardWhite background, soft-1 shadow, 8 px radius, 20 px padding.
Header.ds-card-headerFlex row — title left, optional secondary action right.
Foot.ds-card-footBottom row for meta + optional link. Hairline above.
Title<h5>15/600 inside the header.
Meta line.ds-card-meta13/400 help-text under the title.
Metric.ds-metricBig-number primitive — 32/700 number + 11 px uppercase label.
Trend.ds-trend.up / .downInline delta indicator with arrow + percentage.

Best practices

  • One purpose per card. If a card needs two sections of unrelated data, it should be two cards.
  • Don't double-shadow. Cards inside cards = no extra shadow on the inner card.
  • Padding is sacred. 20 px on all sides. Don't tighten to fit more content — split into multiple cards instead.
  • Click target = whole card. If the card represents an entity, the entire surface is the click target (use cursor:pointer + hover lift).