Card
Groups related content on an Orbital Material surface.
Stack parts in document order:
- CardHeader — title, description, and optional header action
- CardMedia or CardPreview — hero image or preview region
- CardContent — body copy
- CardButtonArea — optional whole-card primary action region
- CardFooter — independent secondary actions
Insert CardSectionBorder between stacked slots when a flush horizontal rule is needed inside the card. Keep spacing on the neighboring slots; the border itself is a zero-padding rule.
CardButtonArea vs CardFooter: Wrap the hero and body in CardButtonArea when the entire card navigates or opens details — one primary click target. Keep footer actions in CardFooter outside the button area so secondary commands (Reply, Share, Cancel) do not share the card-level click handler.
Basic card with body content on a solid surface at resting elevation.
Header, image hero, body, and footer actions in one card.
Title header and body content regions.
Photo hero with body copy and footer actions.
Primary click region wraps media and body; footer actions stay outside.
Arbitrary preview content above the card body.
Emphasized card surface using raised elevation.
Flat bordered card surface with no shadow.