Card
Displays content in a contained box with optional header, content, and footer sections.
Installation
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@sourceful-energy/ui"Usage
Card Title
Card Description
Card Content
Card Footer
Examples
Device Card
Solar Inverter
Online
SolarEdge SE7600H
5.2 kW
Current output
Simple Card
Notifications
You have 3 unread messages.
Stats Card
Today's Production
24.5 kWh
+12% from yesterday
Card with Actions
Settings
Manage your device preferences.
Configure how your device operates and connects to the grid.
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