Card
Card Component
Playground
Card Title
Card description text
This is the card content area.
Props
| Prop | Type | Default | Value |
|---|---|---|---|
variant | | 'default'
| 'outlined'
| 'elevated'
| 'glass'
| 'surfaceLowest'
| 'surfaceLow'
| 'surfaceContainer'
| 'surfaceHigh'
| 'surfaceHighest' | — | |
padding | 'none' | 'sm' | 'md' | 'lg' | — | |
hoverable | 'none' | 'lift' | 'border' | 'glow' | — |
Related Components
CardHeaderCardContentCardFooter
Usage
<Card variant="elevated" hoverable>
<CardHeader title="Title" description="Description" />
<CardContent>Content here</CardContent>
<CardFooter>Footer actions</CardFooter>
</Card>Variants
Style Variants
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Disabled State
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.
Card Title
Card description text
This is the card content area.