Card Component Demo
This page showcases the Card component with various variants and features.
Practical Example
Here's a real-world example of the Card component used in a product listing:
Featured Products
Premium Headphones
$129.99- ✓Noise cancellation
- ✓Wireless
- ✓30-hour battery
- ✓Quick charge
Ergonomic Mouse
$59.99- ✓Ergonomic design
- ✓Wireless
- ✓Programmable buttons
- ✓Long battery life
Mechanical Keyboard
$89.99- ✓Mechanical switches
- ✓RGB lighting
- ✓Aluminum frame
- ✓Programmable keys
Component Variants
Below are all the available variants and configurations of the Card component:
Basic Cards
Default Card
This is a standard card with title and description.
Cards can contain any content you want to display in a contained, styled container.
Flat Variant
A simplified card with less shadow
Flat cards are useful for secondary content that doesn't need to stand out as much.
Outline Variant
A card with only a border
Outline cards have minimal styling, useful for when you want a container with less visual weight.
Interactive Cards
Interactive Card
This card is clickable
Click me! Interactive cards provide visual feedback on hover and handle click events.
Selected Card
This card is in selected state
Selected cards use a gradient background and are useful for indicating the currently active option.
Cards with Icons
Card with Icon
Icons help convey meaning
Adding icons to cards can help users quickly identify the card's purpose.
Interactive with Icon
Icons work with interactive cards too
Interactive cards with icons provide an even better visual indicator.
Selected with Icon
Selected state with an icon
Icons in selected cards automatically adjust their color to match the selected state.
Cards with Features & Tags
Feature Card
A card that showcases features
Feature cards are great for showcasing product features or plan details.
Features
- Responsive design
- Accessibility built-in
- Dark mode support
- Multiple variants
Tags Card
A card with categorization tags
Tags help categorize content or show related topics.
Pricing Cards Example
Basic Plan
Great for getting started
$9.99/mo
Features
- 10 projects
- 5GB storage
- Basic support
- 24/7 access
Pro Plan
Perfect for professionals
$19.99/mo
Features
- Unlimited projects
- 25GB storage
- Priority support
- Advanced analytics
Enterprise Plan
For large organizations
$49.99/mo
Features
- Unlimited everything
- 100GB storage
- 24/7 phone support
- Custom solutions
Custom Styling
Custom Padding
Using padding='sm'
You can customize the padding to fit your content needs.
Custom Rounding
Using rounded='lg'
Customize the border radius to match your design system.
Custom Shadow
Using shadow='xl'
Adjust the shadow depth to create different levels of elevation.
Gradient Variant
A card with gradient background
Gradient cards are eye-catching and great for CTAs or highlighting important content.
Custom Styling
Using custom className
You can pass a custom className to override or extend the default styles.
Team Meeting
March 15, 2023 • 2:00 PM
Discuss quarterly goals and project timelines.