Card
A versatile card component for displaying content.
Basic Card
Card Title
This is a basic card with a title and description.
Cards can contain any content you want to display in a contained format.
Card with Image
This card includes an image at the top.
Card Variants
Default Card
This is the default card style.
Bordered Card
This card has a border around it.
Elevated Card
This card has a shadow for elevation.
Image Position
Left Image Card
This card has an image positioned on the left side.
The image is positioned on the left side of the card, which is useful for media cards.
Interactive Card
Clickable Card
This entire card is clickable.
Click anywhere on this card to trigger an action.
Usage
import { Card } from "@/components/card"
import { Button } from "@/components/ui/button"
export default function MyComponent() {
return (
<Card
title="Card Title"
description="Card description text"
image="/path-to-image.jpg"
footer={<Button>Action</Button>}
variant="elevated"
>
<p>Additional content goes here</p>
</Card>
)
}Props
Name
Type
Default
Description
title
ReactNode
undefined
The title of the card.
description
ReactNode
undefined
The description text for the card.
image
string
undefined
URL of the image to display in the card.
footer
ReactNode
undefined
Content to display in the card footer.
variant
string
"default"
Card style variant: "default", "bordered", or "elevated".
imagePosition
string
"top"
Position of the image: "top" or "left".
onClick
function
undefined
Function called when the card is clicked.