Card
Displays content in a container with a header, footer, and body.
When To Use
Use cards to group related content and actions. They provide a flexible and extensible container for displaying information. Cards are useful for:
- Displaying related information in a cohesive unit
- Organizing content in grids or lists
- Showcasing products, articles, or services
- Creating dashboards with multiple data points
- Building responsive layouts
Cards help create a clear visual hierarchy and improve the organization of your interface.
Examples
Card Title
Card Description
This is the main content of the card. You can put any elements inside a card.
Cards provide a flexible and extensible content container with multiple variants.
Create an account
Enter your information to create your account
Introduction to UI Design
Learn the fundamentals of user interface design
Design
4.8
1234 students
4 weeks
127 reviews
Advanced React Patterns
Master complex React concepts and patterns
Development
4.9
876 students
6 weeks
92 reviews
Responsive Web Development
Build responsive websites for all devices
Development
4.7
2154 students
5 weeks
213 reviews
UX Research Methods
Learn effective user research techniques
UX
4.6
953 students
3 weeks
84 reviews
Premium Features
Access exclusive premium features
- ✓ Priority support
- ✓ Advanced analytics
- ✓ Custom integrations
- ✓ Team collaboration
Security Center
Manage your account security
Two-factor authenticationEnabled
Password strength
Login devices3 active
Props
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |