foundation

card

Composable surface with variants context | insight | recommend (absorbed domain cards).

au-card

Installation

tokens.css + card.css + button.css

head.html

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

Basic

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

Code

card.html + card.css

card

<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-5);
  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-muted); font: 400 12px/1.3 var(--au-font-sans); margin: 0 0 8px; }
.au-card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; 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), background-color var(--au-duration-fast) var(--au-ease); }
.au-card--interactive:hover { background: color-mix(in srgb, var(--au-fg) 3%, var(--au-card-bg)); border-color: var(--au-border-emphasis); }
@media (prefers-reduced-motion: reduce) {.au-card--interactive { transition-duration: 0.01ms; } }

/* --- absorbed: variant context --- */
/* agent-ui / context-cards — first-class component (promoted from host extracts). */
/* 09 Context cards */
.au-context-cards { display: grid; gap: 8px; }
.au-context-cards__header {
  align-items: baseline;
  display: flex;
  gap: 8px;
}
.au-context-cards__title { font: 600 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-cards__count { color: var(--au-fg-subtle); font: 400 11px/1.3 var(--au-font-mono); }
.au-context-card {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-md);
  display: grid;
  gap: 8px;
  padding: 12px;
}
.au-context-card__bar {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-context-card__title { color: var(--au-fg); font: 500 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-card__meta { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-mono); }
.au-context-card__body { color: var(--au-fg-muted); font: 400 13px/1.45 var(--au-font-sans); margin: 0; }
.au-context-card__source {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 400 12px/1.3 var(--au-font-sans);
  gap: 8px;
}
.au-context-card__type {
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-pill);
  font: 500 10px/1 var(--au-font-mono);
  letter-spacing: 0.03em;
  padding: 4px 8px;
  text-transform: uppercase;
}
.au-context-card__type[data-au-type="pdf"] { color: var(--au-danger); }
.au-context-card__type[data-au-type="csv"] { color: var(--au-success); }


/* --- absorbed: variant insight --- */
/* agent-ui / insight-cards — first-class component (promoted from host extracts). */
/* 15 Insight cards */
.au-insight {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-insight__bar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-insight__title { font: 600 14px/1.3 var(--au-font-sans); margin: 0; }
.au-insight__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-insight__chart {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-md);
  height: 72px;
  overflow: hidden;
}
.au-insight__chart svg { display: block; height: 100%; width: 100%; }
.au-insight__cta { justify-self: start; }
.au-insight__panel[hidden] { display: none; }

/* --- absorbed: variant recommend --- */
/* agent-ui / recommendation — first-class component (promoted from host extracts). */
/* 08 Recommendation */
.au-recommend {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-recommend__title { font: 600 15px/1.3 var(--au-font-sans); margin: 0; }
.au-recommend__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-recommend__token {
  background: color-mix(in srgb, var(--au-action) 12%, var(--au-surface));
  border-radius: var(--au-radius-sm);
  color: var(--au-action);
  font: 500 13px/1.3 var(--au-font-mono);
  padding: 4px 8px;
}
.au-recommend__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.au-recommend__confidence {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 500 12px/1 var(--au-font-sans);
  gap: 8px;
}
.au-recommend__meter { display: inline-flex; gap: 2px; }
.au-recommend__meter span {
  background: color-mix(in srgb, var(--au-success) 35%, var(--au-surface-muted));
  border-radius: 1px;
  display: block;
  height: 8px;
  width: 4px;
}
.au-recommend__meter[data-au-level="high"] span { background: var(--au-success); }
.au-recommend__alts { display: grid; gap: 8px; margin: 0; }
.au-recommend__alt {
  background: var(--au-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--au-radius-md);
  color: var(--au-fg-muted);
  cursor: pointer;
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
}
@media (max-width: 640px) {
  .au-recommend__alt { min-height: 40px; }
}
.au-recommend__alt:hover,
.au-recommend__alt:focus-visible {
  border-color: var(--au-border-color);
  color: var(--au-fg);
}
.au-recommend__alt:focus-visible {
  box-shadow: var(--au-focus-ring);
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
/* Track-and-fill confidence meter (porter: Recommendation Card). Prefer this
   over the dot meter when the confidence is a real value, not a coarse level. */
.au-recommend__confidence-fill {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
.au-recommend__confidence-fill .au-recommend__confidence-label {
  color: var(--au-fg-muted);
  font: 500 12px/1 var(--au-font-sans);
}
.au-recommend__track {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-pill);
  display: block;
  flex: 1;
  height: 4px;
  overflow: hidden;
}
.au-recommend__track-fill {
  background: linear-gradient(90deg, var(--au-action), color-mix(in srgb, var(--au-action) 55%, var(--au-success)));
  border-radius: var(--au-radius-pill);
  display: block;
  height: 100%;
}
.au-recommend__acts {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</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>

Context

All chunks

Vendor onboarding rule

290 characters

Cold-chain certification must be verified before a new dairy is added to the reorder workflow.

Seasonal demand row

1,250 characters

Q4 velocity table: pistachio +18%, vanilla +6%, rocky road −11%; retire flavors below 40 scoops weekly.

Code

card.html + card.css

card

<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-5);
  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-muted); font: 400 12px/1.3 var(--au-font-sans); margin: 0 0 8px; }
.au-card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; 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), background-color var(--au-duration-fast) var(--au-ease); }
.au-card--interactive:hover { background: color-mix(in srgb, var(--au-fg) 3%, var(--au-card-bg)); border-color: var(--au-border-emphasis); }
@media (prefers-reduced-motion: reduce) {.au-card--interactive { transition-duration: 0.01ms; } }

/* --- absorbed: variant context --- */
/* agent-ui / context-cards — first-class component (promoted from host extracts). */
/* 09 Context cards */
.au-context-cards { display: grid; gap: 8px; }
.au-context-cards__header {
  align-items: baseline;
  display: flex;
  gap: 8px;
}
.au-context-cards__title { font: 600 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-cards__count { color: var(--au-fg-subtle); font: 400 11px/1.3 var(--au-font-mono); }
.au-context-card {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-md);
  display: grid;
  gap: 8px;
  padding: 12px;
}
.au-context-card__bar {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-context-card__title { color: var(--au-fg); font: 500 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-card__meta { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-mono); }
.au-context-card__body { color: var(--au-fg-muted); font: 400 13px/1.45 var(--au-font-sans); margin: 0; }
.au-context-card__source {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 400 12px/1.3 var(--au-font-sans);
  gap: 8px;
}
.au-context-card__type {
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-pill);
  font: 500 10px/1 var(--au-font-mono);
  letter-spacing: 0.03em;
  padding: 4px 8px;
  text-transform: uppercase;
}
.au-context-card__type[data-au-type="pdf"] { color: var(--au-danger); }
.au-context-card__type[data-au-type="csv"] { color: var(--au-success); }


/* --- absorbed: variant insight --- */
/* agent-ui / insight-cards — first-class component (promoted from host extracts). */
/* 15 Insight cards */
.au-insight {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-insight__bar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-insight__title { font: 600 14px/1.3 var(--au-font-sans); margin: 0; }
.au-insight__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-insight__chart {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-md);
  height: 72px;
  overflow: hidden;
}
.au-insight__chart svg { display: block; height: 100%; width: 100%; }
.au-insight__cta { justify-self: start; }
.au-insight__panel[hidden] { display: none; }

/* --- absorbed: variant recommend --- */
/* agent-ui / recommendation — first-class component (promoted from host extracts). */
/* 08 Recommendation */
.au-recommend {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-recommend__title { font: 600 15px/1.3 var(--au-font-sans); margin: 0; }
.au-recommend__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-recommend__token {
  background: color-mix(in srgb, var(--au-action) 12%, var(--au-surface));
  border-radius: var(--au-radius-sm);
  color: var(--au-action);
  font: 500 13px/1.3 var(--au-font-mono);
  padding: 4px 8px;
}
.au-recommend__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.au-recommend__confidence {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 500 12px/1 var(--au-font-sans);
  gap: 8px;
}
.au-recommend__meter { display: inline-flex; gap: 2px; }
.au-recommend__meter span {
  background: color-mix(in srgb, var(--au-success) 35%, var(--au-surface-muted));
  border-radius: 1px;
  display: block;
  height: 8px;
  width: 4px;
}
.au-recommend__meter[data-au-level="high"] span { background: var(--au-success); }
.au-recommend__alts { display: grid; gap: 8px; margin: 0; }
.au-recommend__alt {
  background: var(--au-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--au-radius-md);
  color: var(--au-fg-muted);
  cursor: pointer;
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
}
@media (max-width: 640px) {
  .au-recommend__alt { min-height: 40px; }
}
.au-recommend__alt:hover,
.au-recommend__alt:focus-visible {
  border-color: var(--au-border-color);
  color: var(--au-fg);
}
.au-recommend__alt:focus-visible {
  box-shadow: var(--au-focus-ring);
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
/* Track-and-fill confidence meter (porter: Recommendation Card). Prefer this
   over the dot meter when the confidence is a real value, not a coarse level. */
.au-recommend__confidence-fill {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
.au-recommend__confidence-fill .au-recommend__confidence-label {
  color: var(--au-fg-muted);
  font: 500 12px/1 var(--au-font-sans);
}
.au-recommend__track {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-pill);
  display: block;
  flex: 1;
  height: 4px;
  overflow: hidden;
}
.au-recommend__track-fill {
  background: linear-gradient(90deg, var(--au-action), color-mix(in srgb, var(--au-action) 55%, var(--au-success)));
  border-radius: var(--au-radius-pill);
  display: block;
  height: 100%;
}
.au-recommend__acts {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>

<div class="au-context-cards" data-au-component="card" data-au-variant="context"><div class="au-context-cards__header"><h3 class="au-context-cards__title">All chunks</h3><span class="au-context-cards__count">32</span></div><article class="au-context-card"><div class="au-context-card__bar"><h3 class="au-context-card__title">Vendor onboarding rule</h3><span class="au-context-card__meta">290 characters</span></div><p class="au-context-card__body">Cold-chain certification must be verified before a new dairy is added to the reorder workflow.</p><footer class="au-context-card__source"><span class="au-context-card__type" data-au-type="pdf">PDF</span><span>Dairy Onboarding SOP.pdf</span></footer></article><article class="au-context-card"><div class="au-context-card__bar"><h3 class="au-context-card__title">Seasonal demand row</h3><span class="au-context-card__meta">1,250 characters</span></div><p class="au-context-card__body">Q4 velocity table: pistachio +18%, vanilla +6%, rocky road −11%; retire flavors below 40 scoops weekly.</p><footer class="au-context-card__source"><span class="au-context-card__type" data-au-type="csv">CSV</span><span>Sales Velocity Export.csv</span></footer></article></div>

Insight

Trend

Volume up 12%.

Code

card.html + card.css

card

<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-5);
  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-muted); font: 400 12px/1.3 var(--au-font-sans); margin: 0 0 8px; }
.au-card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; 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), background-color var(--au-duration-fast) var(--au-ease); }
.au-card--interactive:hover { background: color-mix(in srgb, var(--au-fg) 3%, var(--au-card-bg)); border-color: var(--au-border-emphasis); }
@media (prefers-reduced-motion: reduce) {.au-card--interactive { transition-duration: 0.01ms; } }

/* --- absorbed: variant context --- */
/* agent-ui / context-cards — first-class component (promoted from host extracts). */
/* 09 Context cards */
.au-context-cards { display: grid; gap: 8px; }
.au-context-cards__header {
  align-items: baseline;
  display: flex;
  gap: 8px;
}
.au-context-cards__title { font: 600 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-cards__count { color: var(--au-fg-subtle); font: 400 11px/1.3 var(--au-font-mono); }
.au-context-card {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-md);
  display: grid;
  gap: 8px;
  padding: 12px;
}
.au-context-card__bar {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-context-card__title { color: var(--au-fg); font: 500 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-card__meta { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-mono); }
.au-context-card__body { color: var(--au-fg-muted); font: 400 13px/1.45 var(--au-font-sans); margin: 0; }
.au-context-card__source {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 400 12px/1.3 var(--au-font-sans);
  gap: 8px;
}
.au-context-card__type {
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-pill);
  font: 500 10px/1 var(--au-font-mono);
  letter-spacing: 0.03em;
  padding: 4px 8px;
  text-transform: uppercase;
}
.au-context-card__type[data-au-type="pdf"] { color: var(--au-danger); }
.au-context-card__type[data-au-type="csv"] { color: var(--au-success); }


/* --- absorbed: variant insight --- */
/* agent-ui / insight-cards — first-class component (promoted from host extracts). */
/* 15 Insight cards */
.au-insight {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-insight__bar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-insight__title { font: 600 14px/1.3 var(--au-font-sans); margin: 0; }
.au-insight__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-insight__chart {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-md);
  height: 72px;
  overflow: hidden;
}
.au-insight__chart svg { display: block; height: 100%; width: 100%; }
.au-insight__cta { justify-self: start; }
.au-insight__panel[hidden] { display: none; }

/* --- absorbed: variant recommend --- */
/* agent-ui / recommendation — first-class component (promoted from host extracts). */
/* 08 Recommendation */
.au-recommend {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-recommend__title { font: 600 15px/1.3 var(--au-font-sans); margin: 0; }
.au-recommend__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-recommend__token {
  background: color-mix(in srgb, var(--au-action) 12%, var(--au-surface));
  border-radius: var(--au-radius-sm);
  color: var(--au-action);
  font: 500 13px/1.3 var(--au-font-mono);
  padding: 4px 8px;
}
.au-recommend__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.au-recommend__confidence {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 500 12px/1 var(--au-font-sans);
  gap: 8px;
}
.au-recommend__meter { display: inline-flex; gap: 2px; }
.au-recommend__meter span {
  background: color-mix(in srgb, var(--au-success) 35%, var(--au-surface-muted));
  border-radius: 1px;
  display: block;
  height: 8px;
  width: 4px;
}
.au-recommend__meter[data-au-level="high"] span { background: var(--au-success); }
.au-recommend__alts { display: grid; gap: 8px; margin: 0; }
.au-recommend__alt {
  background: var(--au-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--au-radius-md);
  color: var(--au-fg-muted);
  cursor: pointer;
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
}
@media (max-width: 640px) {
  .au-recommend__alt { min-height: 40px; }
}
.au-recommend__alt:hover,
.au-recommend__alt:focus-visible {
  border-color: var(--au-border-color);
  color: var(--au-fg);
}
.au-recommend__alt:focus-visible {
  box-shadow: var(--au-focus-ring);
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
/* Track-and-fill confidence meter (porter: Recommendation Card). Prefer this
   over the dot meter when the confidence is a real value, not a coarse level. */
.au-recommend__confidence-fill {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
.au-recommend__confidence-fill .au-recommend__confidence-label {
  color: var(--au-fg-muted);
  font: 500 12px/1 var(--au-font-sans);
}
.au-recommend__track {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-pill);
  display: block;
  flex: 1;
  height: 4px;
  overflow: hidden;
}
.au-recommend__track-fill {
  background: linear-gradient(90deg, var(--au-action), color-mix(in srgb, var(--au-action) 55%, var(--au-success)));
  border-radius: var(--au-radius-pill);
  display: block;
  height: 100%;
}
.au-recommend__acts {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>

<div class="au-insight" data-au-component="card" data-au-variant="insight"><div class="au-insight__bar"><h3 class="au-insight__title">Trend</h3></div><p class="au-insight__body">Volume up 12%.</p></div>

card.html + card.css

card

<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-5);
  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-muted); font: 400 12px/1.3 var(--au-font-sans); margin: 0 0 8px; }
.au-card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; 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), background-color var(--au-duration-fast) var(--au-ease); }
.au-card--interactive:hover { background: color-mix(in srgb, var(--au-fg) 3%, var(--au-card-bg)); border-color: var(--au-border-emphasis); }
@media (prefers-reduced-motion: reduce) {.au-card--interactive { transition-duration: 0.01ms; } }

/* --- absorbed: variant context --- */
/* agent-ui / context-cards — first-class component (promoted from host extracts). */
/* 09 Context cards */
.au-context-cards { display: grid; gap: 8px; }
.au-context-cards__header {
  align-items: baseline;
  display: flex;
  gap: 8px;
}
.au-context-cards__title { font: 600 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-cards__count { color: var(--au-fg-subtle); font: 400 11px/1.3 var(--au-font-mono); }
.au-context-card {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-md);
  display: grid;
  gap: 8px;
  padding: 12px;
}
.au-context-card__bar {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-context-card__title { color: var(--au-fg); font: 500 13px/1.3 var(--au-font-sans); margin: 0; }
.au-context-card__meta { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-mono); }
.au-context-card__body { color: var(--au-fg-muted); font: 400 13px/1.45 var(--au-font-sans); margin: 0; }
.au-context-card__source {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 400 12px/1.3 var(--au-font-sans);
  gap: 8px;
}
.au-context-card__type {
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-pill);
  font: 500 10px/1 var(--au-font-mono);
  letter-spacing: 0.03em;
  padding: 4px 8px;
  text-transform: uppercase;
}
.au-context-card__type[data-au-type="pdf"] { color: var(--au-danger); }
.au-context-card__type[data-au-type="csv"] { color: var(--au-success); }


/* --- absorbed: variant insight --- */
/* agent-ui / insight-cards — first-class component (promoted from host extracts). */
/* 15 Insight cards */
.au-insight {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-insight__bar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.au-insight__title { font: 600 14px/1.3 var(--au-font-sans); margin: 0; }
.au-insight__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-insight__chart {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-md);
  height: 72px;
  overflow: hidden;
}
.au-insight__chart svg { display: block; height: 100%; width: 100%; }
.au-insight__cta { justify-self: start; }
.au-insight__panel[hidden] { display: none; }

/* --- absorbed: variant recommend --- */
/* agent-ui / recommendation — first-class component (promoted from host extracts). */
/* 08 Recommendation */
.au-recommend {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.au-recommend__title { font: 600 15px/1.3 var(--au-font-sans); margin: 0; }
.au-recommend__body { color: var(--au-fg-muted); font: 400 14px/1.5 var(--au-font-sans); margin: 0; }
.au-recommend__token {
  background: color-mix(in srgb, var(--au-action) 12%, var(--au-surface));
  border-radius: var(--au-radius-sm);
  color: var(--au-action);
  font: 500 13px/1.3 var(--au-font-mono);
  padding: 4px 8px;
}
.au-recommend__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.au-recommend__confidence {
  align-items: center;
  color: var(--au-fg-muted);
  display: inline-flex;
  font: 500 12px/1 var(--au-font-sans);
  gap: 8px;
}
.au-recommend__meter { display: inline-flex; gap: 2px; }
.au-recommend__meter span {
  background: color-mix(in srgb, var(--au-success) 35%, var(--au-surface-muted));
  border-radius: 1px;
  display: block;
  height: 8px;
  width: 4px;
}
.au-recommend__meter[data-au-level="high"] span { background: var(--au-success); }
.au-recommend__alts { display: grid; gap: 8px; margin: 0; }
.au-recommend__alt {
  background: var(--au-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--au-radius-md);
  color: var(--au-fg-muted);
  cursor: pointer;
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
}
@media (max-width: 640px) {
  .au-recommend__alt { min-height: 40px; }
}
.au-recommend__alt:hover,
.au-recommend__alt:focus-visible {
  border-color: var(--au-border-color);
  color: var(--au-fg);
}
.au-recommend__alt:focus-visible {
  box-shadow: var(--au-focus-ring);
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
/* Track-and-fill confidence meter (porter: Recommendation Card). Prefer this
   over the dot meter when the confidence is a real value, not a coarse level. */
.au-recommend__confidence-fill {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
.au-recommend__confidence-fill .au-recommend__confidence-label {
  color: var(--au-fg-muted);
  font: 500 12px/1 var(--au-font-sans);
}
.au-recommend__track {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-pill);
  display: block;
  flex: 1;
  height: 4px;
  overflow: hidden;
}
.au-recommend__track-fill {
  background: linear-gradient(90deg, var(--au-action), color-mix(in srgb, var(--au-action) 55%, var(--au-success)));
  border-radius: var(--au-radius-pill);
  display: block;
  height: 100%;
}
.au-recommend__acts {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>

<div class="au-recommend" data-au-component="card" data-au-variant="recommend"><h3 class="au-recommend__title">Want me to place this restock order?</h3><p class="au-recommend__body">Reorder waffle cones from <span class="au-recommend__token">cone_king</span> with lead time <span class="au-recommend__token">7_days</span>.</p><div class="au-recommend__confidence au-recommend__confidence-fill" role="meter" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"><span class="au-recommend__confidence-label">High confidence</span><span class="au-recommend__track" aria-hidden="true"><span class="au-recommend__track-fill" style="width:82%"></span></span><span class="au-recommend__track-value" aria-hidden="true">82%</span></div><footer class="au-recommend__acts"><button class="au-btn au-btn--ghost au-btn--sm" type="button">Alternatives</button><button class="au-btn au-btn--primary au-btn--sm" type="button">Accept</button></footer></div>

Component contract

Install: tokens.css · card.css · button.css
States: static composition; domain variants via data-au-variant
Host: content, actions, and any navigation from footer buttons

For agents

card.contract

# agent-ui / card
component: card
selector: .au-card
data_au_component: card
purpose: Composable surface with variants context | insight | recommend (absorbed domain cards).

install:
  - tokens.css
  - card.css
  - button.css when rendering footer actions

states: static composition; domain variants via data-au-variant.
css_variables: Uses shared surface, radius, and space tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: The article, copy, and native buttons remain usable without script.
host_owns: The host owns content, actions, and any navigation from footer buttons.
accessibility: Use a heading in the header. Footer actions need visible labels.
security: Card content is host-owned text. Escape untrusted copy before insertion.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/card/card.{html,css} + README.md + fixture.html