Cards

Containers for grouped content. Cards use borders, not shadows, for structure.

Card Title

Card content goes here.

Data Pipeline Pro

ETL processing & stream connectors

Live

Auth Gateway

OAuth2 / SSO federation layer

Beta

Metrics Collector

Application performance monitoring

Dev

Usage

<div class="ds-list-card">
  <div class="ds-list-card-row">Row 1</div>
  <div class="ds-list-card-row">Row 2</div>
  <div class="ds-list-card-row">Row 3</div>
</div>

Rules

1. No shadows on page-level cards. Use shadows only for modals and overlays.
2. Hover state: --surface-hover on the row, not just the cell.
3. Hairline borders provide enough visual separation — no row striping.