Cow card

Overview

Summarize one cow's identity, status and leading indicators. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Cow card when you need to summarize one cow's identity, status and leading indicators. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<article class="he-cow-card"><header class="he-cow-card__header"><div class="he-cow-card__identity"><span class="he-avatar">18</span><div><h3>Cow 1842</h3><p>Group A</p></div></div><span class="he-status-badge he-status-badge--review">Review</span></header><p>Activity differs from the 7-day baseline.</p></article>

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

Use visible cow ID, named health status, exact last-seen time and text for every indicator.

• 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