layout
Card
Content container with optional hover lift effect. Compound component with header, content, and footer slots.
Import
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@stella-ds/react'CardCardHeaderCardTitleCardDescriptionCardContentCardFooter
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hoverable | boolean | false | Adds hover lift (box-shadow + translateY) |
Preview
Card Title
A short description of the card content.
This is the main content area of the card.
Examples
Full
<Card hoverable>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description goes here.</CardDescription>
</CardHeader>
<CardContent>Main content area.</CardContent>
<CardFooter><Button size="sm">Action</Button></CardFooter>
</Card>