Card
A flexible container component with multiple variants and padding options.
Variants
The card comes in three variants: default (shadow), bordered, and elevated.
Default Card
This card has a subtle shadow effect.
Bordered Card
This card has a 2px border.
Elevated Card
This card has a larger shadow for elevation.
<Card variant="default">...</Card>
<Card variant="bordered">...</Card>
<Card variant="elevated">...</Card>Padding
Cards support three padding sizes: small, medium, and large.
Small Padding
Compact spacing for dense layouts.
Medium Padding
Default comfortable spacing.
Large Padding
Generous spacing for spacious layouts.
<Card padding="sm">...</Card>
<Card padding="md">...</Card>
<Card padding="lg">...</Card>All Combinations
Examples of all variant and padding combinations.
Default Variant
Small
Default + Small
Medium
Default + Medium
Large
Default + Large
Bordered Variant
Small
Bordered + Small
Medium
Bordered + Medium
Large
Bordered + Large
Elevated Variant
Small
Elevated + Small
Medium
Elevated + Medium
Large
Elevated + Large
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'bordered' | 'elevated' | 'default' | The visual style variant of the card |
padding | 'sm' | 'md' | 'lg' | 'md' | The internal padding of the card |
children | React.ReactNode | - | The content to display inside the card |
The Card component also accepts all standard HTML div attributes (onClick, className, style, etc.).