docs

Styling

Headless card exposes stable slot hooks only. Tone, density, interaction affordances, and any local state attributes belong to your own contract.

Slot and owner hooks

Selector	Who owns it	Typical use
`[data-slot="card"]`	Library	Root surface layout, border, padding, and elevation.
`[data-slot="card-header"]` through `[data-slot="card-actions"]`	Library	Stable region selectors for spacing, typography, media, and footer layout.
`.is-featured` / `[data-tone]`	You	Product-specific emphasis, editorial treatments, or marketing variants.
`[aria-current]` / `[aria-disabled]`	You	State-driven styling when card internals participate in navigation flows.

CSS starter

[data-slot="card"] {
  display: grid;
  gap: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--tng-semantic-border-subtle);
  background: var(--tng-semantic-background-surface);
  padding: 1rem;
}

[data-slot="card-media"] {
  overflow: hidden;
  border-radius: 0.75rem;
}

[data-slot="card-footer"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}

[data-slot="card-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Practical guidance

Keep spacing and surface styling on the root slot so nested content regions stay reusable.
Base interaction states on real buttons and links rather than styling a static card like a button.
Prefer owner-authored variant attributes when cards need editorial, dashboard, or marketing skins.
Use media and footer slots for layout only, and keep content semantics inside the projected markup.