Info Block
A bordered card for an icon + label pair, with optional title row and description.
Live load2.1 kW
Mostly the heat pump and lights.Usage
import {
InfoBlock,
InfoBlockContent,
InfoBlockDescription,
InfoBlockHeader,
InfoBlockIcon,
InfoBlockLabel,
InfoBlockTitle,
InfoBlockValue,
} from '@epilot/spark-ui/info-block'InfoBlock is a layout shell. Compose any subset of the parts depending on whether you need a header row, a single label/value, or both.
<InfoBlock>
<InfoBlockIcon className="bg-base-accent-soft text-accent">
<BoltIcon />
</InfoBlockIcon>
<InfoBlockContent>
<InfoBlockHeader>
<InfoBlockTitle>Live load</InfoBlockTitle>
<InfoBlockValue>2.1 kW</InfoBlockValue>
</InfoBlockHeader>
<InfoBlockDescription>
Mostly the heat pump and lights.
</InfoBlockDescription>
</InfoBlockContent>
</InfoBlock>Examples
Label + value
For a simpler "stat" layout drop the header and use InfoBlockLabel directly above the value.
Today14.6 kWh
API Reference
InfoBlock accepts a variant prop:
| Prop | Type | Default |
|---|---|---|
variant | "default" | "bare" | "default" |
"default" adds a rounded border and padding; "bare" strips both for inline use.
| Component | Purpose |
|---|---|
InfoBlock | Outer bordered container |
InfoBlockIcon | Square icon slot (color via className) |
InfoBlockContent | Vertical stack for the text columns |
InfoBlockHeader | Title row (space-between flex) |
InfoBlockTitle | Bold heading |
InfoBlockLabel | Muted label above a value |
InfoBlockDescription | Muted secondary line |
InfoBlockValue | Bold tabular number |