Card Components
Reusable card molecules that combine atomic elements for structured content display
Interactive Card Builder
Customize Card
Preview
Card Types
Basic Card
Simple content container
This is a basic card component with header, content, and optional elements.
Total Children Reached
2.4M
+12% from last month
Project Active
All systems operational
Child Health Initiative
New research findings on childhood development and nutrition programs.
Interactive Card
Click or focus this card to see hover and focus states.
Quick Contact
Get in touch with our team
Card Variants
Default
Standard card with subtle background
Bordered
Card with visible border outline
Elevated
Card with drop shadow elevation
Interactive
Card with hover and focus states
Usage Guidelines
Best Practices
- • Use consistent card spacing in layouts
- • Include clear headings for card content
- • Maintain visual hierarchy within cards
- • Use appropriate card variants for context
- • Ensure interactive cards have focus states
- • Test card layouts on mobile devices
Common Mistakes
- • Overcrowding cards with too much content
- • Using inconsistent spacing between cards
- • Missing focus states on interactive cards
- • Poor contrast in card content
- • Not testing responsive card layouts
- • Mixing too many card variants