Metric card

Overview

Summarize a key value, state and comparison. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Metric card when you need to summarize a key value, state and comparison. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<article class="he-metric-card"><span class="he-metric-card__label">Fleet uptime</span><div><span class="he-metric-card__value">99.8</span><span class="he-metric-card__unit">%</span></div><span class="he-metric-card__trend">+0.2% over 7 days</span></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

Reading order is label, value with unit, comparison; sparklines have a text summary.

• 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