Cards

A card is a UI container that groups related content and actions about a single concept — such as a document, contact, or image summary.

Anatomy

• Required: card container
• Common: image, headline (+ optional subheading), description, call-to-action
• Header, body, and footer slots are all optional

Alignment

• Vertical: header, body, footer stacked
• Horizontal: image/media beside header and body

Dividers in cards

• Full-width dividers for expandable content regions
• Inset dividers (not full width) for related content separation

Example — vertical

Example — horizontal

Guidelines

• Use a subtle border and level-2 surface background.
• Footer actions align right; one primary button per card.
• Header uses bold weight with bottom divider.
• Display cards in grid, vertical list, or carousel; align left, right, or center as layout scales.