Component 56 · Herd health
Health signal row
Show one observed or inferred animal-health signal against baseline.
Overview
Show one observed or inferred animal-health signal against baseline. It converts domain state into an understandable, traceable and accessible interface contract.
When to use
Use HE/Health signal row when you need to show one observed or inferred animal-health signal against baseline. Keep its role distinct from transport freshness, animal-health severity and model confidence.
Example
ActivityChanged18% below 7-day baseline
<div class="he-health-signal-row"><b>Activity</b><span class="he-status-badge he-status-badge--review">Changed</span><span>18% below 7-day baseline</span></div>Anatomy
1Identity
2Primary value
3State
4Evidence or action
Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.
Variants and states
Variants
States
Accessibility
State metric, value/unit, direction, comparison period and confidence in reading order.
- Maintain a visible keyboard focus indicator and a logical focus sequence.
- Never rely on colour alone for operational, freshness or severity state.
- Keep touch targets at least 44 × 44 px unless the target is an inline text link.
Cross-platform contract
| Surface | Canonical name | Status |
|---|---|---|
| Figma | HE/Health signal row | stable |
| Web | .he-health-signal-row | implemented |
| Flutter | HeHealthSignalRow | implemented |
| Token root | component.healthsignalrow | generated |