Card
A flexible container for grouping and organizing content with optional header, footer, and multiple content sections. Perfect RTL support.
Preview
Card Title
Card description goes here
This is the card content area where you can place any content
Installation
Usage
Composition Pattern
The Card component follows a composition pattern with six sub-components:
- •
Card- Main container with border, shadow, and rounded corners - •
CardHeader- Container for title and description with padding - •
CardTitle- Renders as h3, styled for headings - •
CardDescription- Muted text for descriptions - •
CardContent- Main content area with padding - •
CardFooter- Bottom section, typically for actions
Examples
Full Card with All Components
Card Title
Card description goes here
Card content goes here. You can add any components or content.
Card with Form
Create Account
Enter your details below
Interactive Card
Notifications
You have 3 unread messages
Click to view all notifications
Card Grid (Dashboard Stats)
Total Users
+20% from last month
Revenue
+20% from last month
Active
+20% from last month
Props
Card
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply |
CardHeader
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply |
CardTitle
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply (renders as h3) |
CardDescription
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply |
CardContent
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply |
CardFooter
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes to apply |
Accessibility
Semantic Structure
CardTitle renders as an h3 element for proper heading hierarchy. Adjust with className if different heading level needed.
Interactive Cards
For clickable cards, wrap in a button or add proper role, tabIndex, and keyboard handlers:
Color Contrast
All card text colors meet WCAG AA contrast requirements. CardDescription uses muted colors while maintaining readability.
RTL Considerations
Cards automatically support RTL layout. All spacing and alignment adjust correctly for right-to-left languages.
LTR (English)
Settings
Manage your preferences
Content flows left to right
RTL (العربية)
الإعدادات
إدارة تفضيلاتك
المحتوى يتدفق من اليمين إلى اليسار