Card
The Card component displays a structured layout with a header, content, and footer, making it perfect for organizing information in a clean, visually appealing way. It's ideal for showcasing products, presenting user profiles, or highlighting key details, providing a versatile solution for displaying diverse types of information in a compact and engaging format.
Create project
Deploy your new project in one-click.
Additional Examples
Interactive Card
Notifications
You have 3 unread messages.
Push Notifications
Send notifications to device.
Your call has been confirmed.
1 hour ago
You have a new message!
1 hour ago
Your subscription is expiring soon!
2 hours ago
With Chart
Bar Chart - Interactive
Showing total visitors for the last 3 months
Configurable Props
<Card>
Prop | Type | Default | Description |
|---|---|---|---|
<Card> | string | "" | Wrapper for the card. |
<CardHeader>
Prop | Type | Default | Description |
|---|---|---|---|
<CardHeader> | string | "" | Acts as the header for the card, containing the title and description. |
<CardTitle>
Prop | Type | Default | Description |
|---|---|---|---|
<CardTitle> | string | Acts as the title for the card. |
<CardDescription>
Prop | Type | Default | Description |
|---|---|---|---|
<CardDescription> | string | Acts as the description for the card. |
<CardContent>
Prop | Type | Default | Description |
|---|---|---|---|
<CardContent> | string | Contains the content of the card, can be used to display additional content or entire components |
<CardFooter>
Prop | Type | Default | Description |
|---|---|---|---|
<CardFooter> | string | Acts the footer for the card, containing other content or entire components. |