Card
Cards group related content into a single visual unit. They create hierarchy through their contained structure — header for context, content for details, footer for actions. Use cards to break complex interfaces into scannable chunks.
Variants
DefaultFull card with actions
Notifications
You have 3 unread messages.
SimpleHeader only
With ContentRich content layout
Usage Guidelines
Do
Use cards to group related information that belongs together — a project, a user, a setting.
Don't
Don't nest cards inside cards. If you need more hierarchy, use headings and sections within a single card.
Do
Keep card content focused. One card = one concept or action group.
Don't
Don't stuff unrelated information into a single card just to save space.