Card — surface for evidence and decisions (HTML/CSS)

Specimen

One framed specimen with Preview, Code, and Install. Copy the active panel.

Preview

Keep the next decision close to the evidence that makes it trustworthy.

No runtime required. The card is structural; its child controls own interaction.

Code

card.html

<style>
.au-card {
  --au-card-bg: var(--au-surface);
  --au-card-border: var(--au-border-color);
  --au-card-radius: var(--au-radius-lg);
  --au-card-padding: var(--au-space-6);

  background: var(--au-card-bg);
  border: 1px solid var(--au-card-border);
  border-radius: var(--au-card-radius);
  color: var(--au-fg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.au-card__header,
.au-card__body,
.au-card__footer {
  padding: var(--au-card-padding);
}

.au-card__header {
  border-bottom: 1px solid var(--au-card-border);
}

.au-card__footer {
  align-items: center;
  border-top: 1px solid var(--au-card-border);
  display: flex;
  gap: var(--au-space-3);
  justify-content: flex-end;
}

.au-card__eyebrow {
  color: var(--au-fg-subtle);
  font-family: var(--au-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.au-card__title {
  font-size: 18px;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}

.au-card__body > :first-child {
  margin-top: 0;
}

.au-card__body > :last-child {
  margin-bottom: 0;
}

.au-card--muted {
  --au-card-bg: var(--au-surface-muted);
}

.au-card--interactive {
  transition: border-color var(--au-duration-fast) var(--au-ease), transform var(--au-duration-fast) var(--au-ease);
}

.au-card--interactive:hover {
  border-color: var(--au-border-emphasis);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .au-card--interactive { transition-duration: 0.01ms; }
}
</style>

<article class="au-card">
  <header class="au-card__header">
    <p class="au-card__eyebrow">agent state</p>
    <h2 class="au-card__title">A bounded action</h2>
  </header>
  <div class="au-card__body">
    <p>Keep the next decision close to the evidence that makes it trustworthy.</p>
  </div>
  <footer class="au-card__footer">
    <button class="au-btn au-btn--secondary" type="button">Inspect</button>
    <button class="au-btn au-btn--primary" type="button">Continue</button>
  </footer>
</article>

Install

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/card/card.css">

Component contract

Parts: header, body, and footer slots.
States: Static by default; interactive movement is optional.
No JavaScript: Fully rendered semantic HTML.
CSS variables: --au-card-bg, --au-card-border, --au-card-radius, --au-card-padding.