- Guidelines
- React API Reference
- Blazor API Reference
Cards are flexible containers that group related content and actions. They create visual boundaries that help users scan and process information more efficiently, serving as entry points to more detailed content or functionality.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use cards to group related content, present collections of similar items, or create distinct content sections within a layout. |
| Content | Include a clear hierarchy with headings, supporting content, and optional imagery. Limit content to what’s necessary for understanding. |
| Behavior | Cards can be interactive (fully clickable) or contain interactive elements. Provide clear visual feedback for interactive states. |
| States | For interactive cards, include hover and focus states. For static cards, ensure sufficient contrast with the background. |
| Feedback | Provide visual feedback for interactive elements within cards. Consider subtle elevation changes or borders for hover states. |
| Examples | Product listings, dashboard widgets, content previews, or user profile summaries. |
Best Practices
- Content Hierarchy: Establish a clear visual hierarchy within each card with consistent heading styles and content organization.
- Consistent Structure: Maintain consistency in card layouts, spacing, and content organization across a collection.
- Appropriate Density: Balance information density—include enough content to be useful without overwhelming users.
- Clear Interactivity: Make it obvious which elements or entire cards are interactive through appropriate visual cues.
- Visual Separation: Use sufficient spacing between cards and from other page elements to create clear visual boundaries.
Do’s and Don’ts
Do
- Maintain consistent card layouts within collections.
- Include clear headings and concise content.
- Use cards to organize related information.
- Ensure interactive elements are clearly identifiable.
Don't
- Overload cards with too much content or functionality.
- Use inconsistent layouts across a collection of cards.
- Nest cards within other cards.
- Make interactivity ambiguous or unclear.
Additional Guidance
- Psychological Impact:
- Chunking: Cards help users mentally group related information, making it easier to process and remember.
- Visual Scanning: Well-designed card collections allow users to quickly scan and identify relevant information.
- Mental Models: Cards mimic physical card systems, leveraging familiar concepts from the physical world.