Card

Group related information and actions.

States

defaulthoverfocusdisabled

Tokens

background	`{semantic.surface.primary}`
foreground	`{semantic.text.primary}`
border	`{semantic.border.default}`
radius	`{radius.lg}`
padding	`{space.4}`
focusRing	`{semantic.focus.ring}`

Accessibility

{
  "ruleIds": [
    "STYLE-A11Y-001"
  ],
  "keyboard": "Only interactive cards receive keyboard focus.",
  "focusVisible": true
}

Do / Don't

Do

Keep related content together.

Don't

Do not nest cards repeatedly.