Feed-in Hero
A bordered hero card for showcasing a single live energy KPI with tone-aware styling.
Feed-in right now
1,240 WUsage
import {
FeedInHero,
FeedInHeroLabel,
FeedInHeroValue,
FeedInHeroValueUnit,
} from '@epilot/spark-ui/feed-in-hero'<FeedInHero>
<FeedInHeroLabel>Feed-in right now</FeedInHeroLabel>
<FeedInHeroValue tone="success">
1,240 <FeedInHeroValueUnit>W</FeedInHeroValueUnit>
</FeedInHeroValue>
</FeedInHero>FeedInHero is a layout primitive: a centered, bordered card. The label, value, and unit slots are simple wrappers that apply the right typography and (for the value) tone color.
Examples
All tones
The tone prop on FeedInHeroValue colors the number to convey state.
success
1,240 Wwarning
1,240 Werror
1,240 Waccent
1,240 Wneutral
1,240 WAPI Reference
FeedInHeroValue
| Prop | Type | Default |
|---|---|---|
tone | "success" | "warning" | "error" | "accent" | "neutral" | "neutral" |
FeedInHeroValueUnit
A smaller, semibold unit suffix to render inline with the value (e.g. W, kW).