Card

Surface that groups related content and actions. Part of the Containment family.

Live demo

Supporting title

Secondary text line

Usage

<span class="orbit-card" role="group" aria-label="card">
  <!-- Card composition: container, content, state layer -->
</span>

.orbit-card {
  border-radius: var(--md-shape-corner-8);
  background: var(--md-card-container);
  color: var(--md-on-surface);
  transition: box-shadow 200ms var(--md-motion-easing-standard);
}

Keyboard: Tab moves focus, Space/Enter activate.
Focus ring: 3px outer, 2px offset, --md-primary.
Contrast: on-primary on primary ≥ 4.5:1 (WCAG 2.2 AA).
Announce state changes with aria-live="polite".

Anatomy

1. Container 2. State layer 3. Content (label / icon) 4. Focus ring. Optional: badge, supporting icon on the end side.

Properties

Property	Type / values	Description
`Variant`	`filled` · `tonal` · `outlined` · `text`	Visual emphasis of the control.
`Disabled`	`boolean`	Removes the control from the tab order and applies the 38% on-surface opacity.
`Size class`	`compact` · `medium` · `expanded`	Window-size adaptation; the default resolves from the container.
`Density`	`0` – `3`	Progressively tighter vertical rhythm, docked at 36px minimum.

Design tokens

This component reads --md-card-container, --md-on-surface, --md-outline and elevation levels 0–2. The full reference ships in the token bundle.