Flexible containers that group related content and actions for scannable, organized interfaces.
Organize related information and actions into cohesive, scannable units.
Provide content previews that lead to detailed views without losing context.
Create clear content boundaries and establish visual order in complex layouts.
Present content in digestible, scannable chunks with clear visual hierarchy
Group related actions and controls with their associated content
Facilitate content discovery and provide clear pathways to detailed information
Enable flexible, responsive layouts that adapt to different screen sizes
Use cards for rich, mixed content with actions. Use list items for uniform, text-heavy content in linear sequences.
Use cards for contextual information display. Use modals for focused tasks that require user attention.
Use cards for content discovery and browsing. Use sidebars for navigation, tools, or persistent secondary content.
+20.1% from last month
| Component | Content Type | Layout | Interaction | Use Case |
|---|---|---|---|---|
| Card | Mixed content | ✅ Flexible grid | ✅ Multiple actions | Content discovery, dashboards |
| List Item | Uniform data | 📱 Linear stack | ✅ Single action | Data tables, navigation |
| Tile | Simple content | ✅ Grid layout | 🔘 Single action | App launchers, categories |
| Panel | Complex content | 📋 Fixed position | ✅ Multiple actions | Sidebars, detailed views |
Establish clear content priority with consistent typography, spacing, and visual emphasis.
Structure content for quick scanning with clear headings, summaries, and action points.
Maintain consistent patterns for similar content types and predictable action placement.