Card Patterns
Versatile card components for content display, stats, features, pricing, user profiles, and image previews.
What's Included#
- Composable base card with header, title, description, content, and footer slots
- Interactive cards with hover effects and link wrapping
- Stats cards with metrics, change indicators, and icons
- Feature and pricing cards with highlighted tiers and feature lists
- User profile cards with avatars and image cards for blog/media content
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the cards pattern from Bootspring"
- "Apply the Bootspring cards pattern to my project"
Key Considerations#
- Keep cards scannable with clear hierarchy using headings and whitespace
- Use consistent heights when displaying cards in a grid layout
- Add hover states for interactive cards to provide visual feedback
- Avoid overcrowding cards with too much information; keep content focused
- Use subtle shadows sparingly for depth without visual clutter
Related Patterns#
- Layouts - Grid layouts for cards
- Tables - Alternative to cards for data display
- Navigation - Card-based navigation