Card
A flexible container component that provides structure for content with optional header, body, and footer sections. Built on the Surface component with support for multiple variants and padding options.
Variants
Default
Card Header
This is the card body with default styling. It has a subtle border and clean background.
Subtle
Card Header
This is the subtle variant with an alternative background and no border.
Elevated
Card Header
This is the elevated variant with a shadow for depth and emphasis.
Padding Options
None
No Padding
Sections handle their own padding.
Small
Small Padding
Compact spacing for dense layouts.
Medium (default)
Medium Padding
Balanced spacing for most use cases.
Large
Large Padding
Generous spacing for emphasis.
Slot Combinations
Header + Body
This card has a header and body section.
The divider automatically appears between sections.
Body + Footer
This card has a body and footer section.
Complete Card
NewThis card demonstrates all three slots: header, body, and footer. Each section is automatically separated by dividers.
The elevated variant adds depth with a shadow, making it stand out from the page.
Default Slot (Simple Content)
Simple Card
When you don't need separate sections, use the default slot for simple content.
Quick Tip
The default slot is perfect for simple, single-section cards.
Real-World Examples
Jane Doe
Product Designer
Passionate about creating accessible and beautiful user experiences.
New Alert
PendingZika risk level updated in your area
Review the latest information and take appropriate precautions.
TOTAL ALERTS
12% from last month
Usage Example
Card Title
Card content goes here.
Simple content without sections.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | 'default' | Card style: default, subtle, elevated |
| padding | string | 'md' | Section padding: none, sm, md, lg |
| class | string | '' | Additional CSS classes |
Slots
| Slot | Required | Description |
|---|---|---|
| header | No | Card header content (typically title or heading) |
| body | No | Main card content |
| footer | No | Card footer content (typically actions or metadata) |
| default | No | Simple content without sections (alternative to named slots) |
Key Features
Flexible Structure
Use named slots for structured content or default slot for simple layouts
Automatic Dividers
Dividers automatically appear between sections when multiple slots are used
Built on Surface
Inherits all Surface component features including variants and styling
Responsive Padding
Padding adapts to screen size for optimal spacing on all devices