Card
Displays content in a contained box with optional header, content, and footer sections.
Installation
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@ramp-ds/ui"Usage
Card Title
Card Description
Card Content
Card Footer
Examples
Project Card
Marketing Site
Live
Deployed from main, 2 hours ago
1,284
Visits today
Simple Card
Notifications
You have 3 unread messages.
Stats Card
Active users today
6,210
+12% from yesterday
Card with Actions
Settings
Manage your workspace preferences.
Configure how your workspace behaves and connects to external services.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes for the card container. |
All Card sub-components (CardHeader, CardTitle, CardDescription, CardContent, CardFooter) accept the same className prop for customization.
Accessibility
- Cards are semantic containers using div elements
- Use appropriate heading levels in CardTitle
- Ensure sufficient color contrast for text
- Interactive elements within cards should be focusable