Cards
Cards are container components that group related information and actions into a compact, visually distinct block. They make content scannable, modular, and interactive.
Philosophy
Cards create modular content blocks that are easy to scan and interact with.
They bring focus to chunks of information.
They encourage consistency by repeating a clear pattern.
They adapt well to collections such as grids, lists, or carousels.
Anatomy
Variants
Standard
Prominent image or video with supporting text.
States
Idle
Card displays content.
Usage tips
Dos
Use cards to chunk related content for clarity.
Make the entire card clickable if it represents a single action.
Use consistent padding and elevation across the system.
Apply responsive layouts for cards in collections.
Don’ts
Don’t overload cards with too much detail — keep them lightweight.
Don’t mix too many card styles in one view.
Don’t use cards for deep hierarchies — use tables or lists instead.
Real-world example
