Herd distribution

Overview

Compare health or lifecycle categories across a herd. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Herd distribution when you need to compare health or lifecycle categories across a herd. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<figure class="he-herd-distribution"><figcaption><b>Herd status</b></figcaption><div class="he-herd-distribution__bar" role="img" aria-label="Healthy 82 percent, review 13 percent, critical 5 percent"><i class="he-herd-distribution__segment" style="--he-segment:82%;--he-segment-color:var(--he-color-status-healthy-border)"></i><i class="he-herd-distribution__segment" style="--he-segment:13%;--he-segment-color:var(--he-color-status-review-border)"></i><i class="he-herd-distribution__segment" style="--he-segment:5%;--he-segment-color:var(--he-color-status-critical-border)"></i></div></figure>

Anatomy

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

Accessibility

Provide category counts and percentages as an accessible list or table.

• 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

Related components