Card

1import { Card, CardHeader, CardFooter, Panel, Stat } from '@/ui/Surface'23// Static card4<Card>5  <CardHeader title="api-gateway" description="Deployed 4 minutes ago" />6  <p className="mt-3 text-body-sm text-fg-muted">Three regions, twelve instances.</p>7  <CardFooter>8    <Button size="sm" variant="text">Logs</Button>9    <Button size="sm" variant="outlined">Rollback</Button>10  </CardFooter>11</Card>1213// Interactive: ONE target for the whole card14<Card as="a" href={'/projects/' + id} interactive aria-labelledby={titleId}>15  <h3 id={titleId}>{project.name}</h3>16  <p>{project.summary}</p>17</Card>1819// A collection is a real list20<ul className="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))]">21  {projects.map((p) => (22    <li key={p.id}>23      <Card as="a" href={p.href} interactive>…</Card>24    </li>25  ))}26</ul>2728// Panel: a card whose header holds controls29<Panel title="Recent deployments" actions={<Button size="xs">View all</Button>} bodyClassName="p-0">30  <DeploymentList />31</Panel>3233// Stat tile: a number you are tracking34<Stat label="Requests" value="1.24M" delta={12.4} deltaLabel="vs last week" spark={series} />3536// Stat tile: a fact you read once — icon in a tinted chip, value as a word37<Stat layout="leading" tone="success" icon={<CheckCircle2 size={20} />}38      label="Status" value="Complete" />3940// …or a ring in place of the icon, when the fact is a proportion41<Stat layout="leading" tone="info" progress={72} label="Progress" value="72%" />

<article class="ds-card">
  <header class="ds-card__header">
    <h3 class="ds-card__title" id="card-1-title">api-gateway</h3>
    <p class="ds-card__desc">Deployed 4 minutes ago</p>
  </header>

  <div class="ds-card__body">Three regions, twelve instances.</div>

  <footer class="ds-card__footer">
    <button class="ds-btn ds-btn--text ds-btn--sm">Logs</button>
    <button class="ds-btn ds-btn--outlined ds-btn--sm">Rollback</button>
  </footer>
</article>

<!-- Interactive: the anchor IS the card, and it names itself -->
<a class="ds-card ds-card--interactive" href="/projects/1" aria-labelledby="card-1-title">
  <h3 id="card-1-title">api-gateway</h3>
  <p>Three regions, twelve instances.</p>
</a>

.ds-card {
  position: relative;
  padding: 20px;                          /* one step above any inner gap */
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--radius-xl);        /* 16 — inner radii cap at ~8 */
  transition:
    transform  180ms var(--ease-standard),
    box-shadow 180ms var(--ease-standard),
    border-color 180ms var(--ease-standard);
}

.ds-card--interactive {
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
}
.ds-card--interactive:hover {
  transform: translateY(-1px);            /* one pixel, not four */
  border-color: var(--ds-border);
  box-shadow: var(--shadow-e3);
}
.ds-card--interactive:active {
  transform: none;
  box-shadow: var(--shadow-e1);
}
.ds-card--interactive:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

/* Selected: border plus a ring, so the edge reads as 2px without reflow */
.ds-card[data-selected] {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 1px var(--ds-accent);
}

/* Footer divider gets more air above than below */
.ds-card__footer {
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--ds-border-subtle);
}

/* Clip anything that reaches the rounded edge */
.ds-card--media { overflow: hidden; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .ds-card--interactive:hover { transform: none; }
}