Components · Data
Card
A composable card surface (header, title, body, footer) with a four-step elevation scale (0 to 3) driven by data-elevation, and an interactive mode that turns it into a focusable, Enter/Space-activatable control.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
Variants & states
- elevation 0-3
- interactive (button role)
- header / title / body / footer composition
Tokens used
--semantic-color-surface-card--semantic-color-border-default--semantic-elevation-1--semantic-color-focus-ring
Copy-paste
import { Card, CardHeader, CardTitle, CardBody, CardFooter } from 'operator-components';
<Card elevation={2} interactive onClick={() => selectSector('7')}>
<CardHeader><CardTitle>Sector 7</CardTitle></CardHeader>
<CardBody>14 active units, link nominal.</CardBody>
<CardFooter>Updated 2 min ago</CardFooter>
</Card>Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)