Component · container.card
Card
A grouped surface that presents a single related unit of content and optional actions.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
media | no | Optional image or media header. |
title | no | Card title. |
body | yes | Primary content. |
actions | no | Optional action row. |
States
- default
- hover
- focus-visible
- selected
- disabled
Keyboard
- If the whole card is activatable, Enter activates it
- Interactive children remain reachable by Tab
Accessibility
Avoid nested conflicting interactive targets. If the card is a single control, give it one accessible name; if it contains multiple controls, do not also make the entire card a separate button without a clear pattern. Decorative media must not add redundant announcements.
Motion
Hover elevation or slight translate is optional; under reduced motion, change border or background without movement.
Platform mappings
web
web
article or section grouping; button/link wrapping only when the entire card is one action.
apple
apple
SwiftUI GroupBox or custom card layout.
android
android
Compose Card.