Cards
Flexible containers that group related content. Cards support multiple variants, sizes, and sub-components for structured layouts.
Elevated Card
With drop shadow
Default variant with subtle elevation shadow for visual depth.
Outlined Card
Border only
Flat design with a border. No shadow for minimal visual weight.
Filled Card
Background tint
Solid background fill. Ideal for nested or grouped cards.
Card Sizes
Compact padding for dense layouts.
Standard padding for most use cases.
Generous padding for prominent cards.
Interactive & Selectable Cards
Option 1
Click to select
Option 2
Click to select
Option 3
Click to select
<Card
interactive
selected={isSelected}
onClick={() => setSelected(!isSelected)}
>
<CardBody>
<CardTitle>Selectable Card</CardTitle>
<p>Click to select this card</p>
</CardBody>
</Card>Card Sub-components
Cards support multiple sub-components for structured layouts: CardMedia, CardHeader, CardTitle, CardSubtitle, CardBody, CardActions, and CardFooter.
Featured Card
With media and actions
This card demonstrates all available sub-components working together.
<Card>
<CardMedia>
<img src="/image.jpg" alt="..." />
</CardMedia>
<CardHeader>
<CardTitle>Featured Card</CardTitle>
<CardSubtitle>With media and actions</CardSubtitle>
</CardHeader>
<CardBody>
<p>Card content goes here...</p>
<div>
<Chip size="sm">Design</Chip>
<Chip size="sm">UI/UX</Chip>
</div>
</CardBody>
<CardActions>
<Button variant="ghost" leftIcon={<HeartIcon />}>
Like
</Button>
<Button variant="ghost" leftIcon={<ShareIcon />}>
Share
</Button>
</CardActions>
<CardFooter>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">View Details</Button>
</CardFooter>
</Card>Interactive Card
Hover to see effect
Interactive cards respond to cursor position with elevation changes.
Best Practices
Do
Clear Hierarchy
Use sub-components for structure
Entire card is interactive
Don't
Sparse content in large interactive area
Nested cards create visual confusion