Content Card
Cards with featured images for blog posts, articles, or services.
Article
Understanding Speech Development
Learn about the key milestones in speech development and how to support your child's communication journey.
Read more
Cards
Cards group related content and actions. They create visual hierarchy and help users scan information quickly.
Basic Card
The foundation card style with rounded corners, shadow, and padding.
Card Title
This is a basic card with standard padding and styling. Use it for general content containers.
Another Card
Cards automatically maintain consistent spacing and visual weight.
Third Card
The shadow provides depth and separates content from the background.
className="rounded-2xl bg-bg-card card-depth p-6"Interactive Card
Cards that respond to user interaction with hover effects.
Stat Card
Display key metrics and statistics prominently.
Active Clients
1,234
+12% from last month
Sessions
847
This week
Goals Met
92%
Above target
Satisfaction
4.9
Out of 5 stars
Profile Card
Display user or therapist information with avatar and details.
SJ
Sarah Johnson
Speech-Language Pathologist
California, Texas, Florida
4.9 (127 reviews)
Card on Dark Background
Cards styled for dark background contexts.
Dark Card
Use semi-transparent backgrounds on dark surfaces.
With Border
Subtle borders help define edges on dark backgrounds.
Backdrop Blur
Use backdrop-blur for a frosted glass effect.
Usage Guidelines
Do
- Use consistent padding (p-6 standard)
- Apply card-depth for depth
- Group related content within cards
- Use hover states for interactive cards
- Maintain visual hierarchy within cards
Don't
- Nest cards within cards
- Mix card sizes inconsistently
- Overload cards with too much content
- Use cards for single elements
- Forget hover states on clickable cards