Device Card
A clickable card surface for representing a device such as a wallbox, heat pump, or battery.
Scheduled to finish at 18:30
Usage
import {
DeviceCard,
DeviceCardBody,
DeviceCardControls,
DeviceCardDetail,
DeviceCardFooter,
DeviceCardHeader,
DeviceCardIcon,
DeviceCardMeters,
DeviceCardPower,
DeviceCardState,
DeviceCardTitle,
DeviceCardTitleColumn,
} from '@epilot/spark-ui/device-card'DeviceCard is a non-interactive container. Place the clickable region inside DeviceCardBody, which renders as a <button> so it is keyboard-focusable. Within it, DeviceCardHeader lays out the gauge/icon + title column + power on one row; DeviceCardMeters stacks compact metering rows below. Use DeviceCardControls for any interactive controls that should sit outside the click area.
<DeviceCard>
<DeviceCardBody onClick={() => router.push('/devices/wallbox')}>
<DeviceCardHeader>
<DeviceCardIcon icon="ev_station" tone="warning" />
<DeviceCardTitleColumn>
<DeviceCardTitle>Garage wallbox</DeviceCardTitle>
<DeviceCardState tone="success">Charging · 11 kW</DeviceCardState>
<DeviceCardDetail>32 min remaining</DeviceCardDetail>
</DeviceCardTitleColumn>
<DeviceCardPower>11 kW</DeviceCardPower>
</DeviceCardHeader>
</DeviceCardBody>
<DeviceCardFooter>Scheduled to finish at 18:30</DeviceCardFooter>
</DeviceCard>Examples
Without a footer
The footer is a status strip pinned to the bottom edge of the card. Omit it when you don't have status to show.
API Reference
Compose with the helper parts:
| Component | Role |
|---|---|
DeviceCardBody | Clickable region (<button>) that vertically stacks children |
DeviceCardHeader | Horizontal row inside the body: gauge/icon + title + power |
DeviceCardIcon | Rounded square icon tile (use when no SOC gauge) |
DeviceCardTitleColumn | Middle column wrapper that stacks title, state, detail |
DeviceCardTitle | Bold device name |
DeviceCardState | Colored dot + status label |
DeviceCardDetail | Muted supporting line below the state |
DeviceCardPower | Right-aligned prominent number (e.g. "4.4 kW") |
DeviceCardMeters | Compact metering rows section below the header |
DeviceCardControls | Non-clickable controls strip below the body (mode, toggles) |
DeviceCardFooter | Bottom strip with a divider (optional status) |