Skip to main content
v0.1 dev

Component 56 · Herd health

Health signal row

Show one observed or inferred animal-health signal against baseline.

implementedPhase 4stable

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

Atlantic · interactive specimen
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

temperatureactivityruminationheatgaitbodyConditionpose

States

baselinechangedanomalyinsufficientData

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

SurfaceCanonical nameStatus
FigmaHE/Health signal rowstable
Web.he-health-signal-rowimplemented
FlutterHeHealthSignalRowimplemented
Token rootcomponent.healthsignalrowgenerated