Entity Card
A clickable card surface for representing an entity such as a device, asset, or account.
Usage
import {
EntityCard,
EntityCardBody,
EntityCardControls,
EntityCardDetail,
EntityCardFooter,
EntityCardHeader,
EntityCardIcon,
EntityCardMeters,
EntityCardState,
EntityCardTitle,
EntityCardTitleColumn,
EntityCardValue,
} from '@epilot/spark-ui/entity-card'
import { EvStation } from '@epilot/spark-icons'EntityCard is a non-interactive container. Place the clickable region inside EntityCardBody, which renders as a <button> so it is keyboard-focusable. Within it, EntityCardHeader lays out the gauge/icon + title column + value on one row; EntityCardMeters stacks compact metric rows below. Use EntityCardControls for any interactive controls that should sit outside the click area.
<EntityCard>
<EntityCardBody onClick={() => router.push('/devices/wallbox')}>
<EntityCardHeader>
<EntityCardIcon icon={EvStation} tone="warning" />
<EntityCardTitleColumn>
<EntityCardTitle>Garage wallbox</EntityCardTitle>
<EntityCardState tone="success">Charging · 11 kW</EntityCardState>
<EntityCardDetail>32 min remaining</EntityCardDetail>
</EntityCardTitleColumn>
<EntityCardValue>11 kW</EntityCardValue>
</EntityCardHeader>
</EntityCardBody>
<EntityCardFooter>Scheduled to finish at 18:30</EntityCardFooter>
</EntityCard>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 |
|---|---|
EntityCardBody | Clickable region (<button>) that vertically stacks children |
EntityCardHeader | Horizontal row inside the body: gauge/icon + title + value |
EntityCardIcon | Rounded square icon tile (use when no SOC gauge) |
EntityCardTitleColumn | Middle column wrapper that stacks title, state, detail |
EntityCardTitle | Bold entity name |
EntityCardState | Colored dot + status label |
EntityCardDetail | Muted supporting line below the state |
EntityCardValue | Right-aligned prominent number (e.g. "4.4 kW") |
EntityCardMeters | Compact metric rows section below the header |
EntityCardControls | Non-clickable controls strip below the body (mode, toggles) |
EntityCardFooter | Bottom strip with a divider (optional status) |
Accessibility
EntityCard itself is a non-interactive container. Put the primary action on
EntityCardBody, which renders as a <button> — give it an accessible name
(aria-label or visible title text). Keep interactive controls
(EntityCardControls) outside the body so nested buttons are not inside the
clickable region. EntityCardIcon glyphs are decorative; convey status through
EntityCardState text, not color alone.