Data Display
Card
Card is a flexible, container like component that visually groups related pieces of information and actions about a single subject. It supports images, text and actions in a flexible content container. |
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Semantic HTML structure
- Sufficient color contrast
- Clear visual hierarchy
- Keyboard accessible when interactive
- Proper heading levels
When to use this component
✓Do's
- •Grouping related content visually
- •Clickable content blocks for navigation
- •Dashboard widgets and summaries
- •Service or feature showcases
✗Don'ts
- •If you have tabular data, use table.
- •Simple text content, no card needed
- •Full-page layouts, use Section
- •Inline content grouping, use Divider
Do's and Don'ts
✓ Do's
Use a card for a single piece of structured content with a clear title, brief context, and up to 2 actions (primary + secondary).
✗ Don'ts
Certificate Application
Don't overload a card with many actions, it creates confusing click targets and dilutes the primary action.
✓ Do's
Senior Dev
Delhi · Full-Time
Data Analyst
Delhi · Full-Time
Use consistent card sizes in a grid, uniform height and width aid scanning and comparison.
✗ Don'ts
Short
Senior Developer, Government Technology
Delhi · Full-Time · ₹8–12 LPA · 5+ years
Don't mix cards of vastly different sizes in the same grid, it breaks visual rhythm and makes scanning harder.