Alert card

Overview

Present an actionable anomaly with context, ownership and lifecycle. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Alert card when you need to present an actionable anomaly with context, ownership and lifecycle. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<article class="he-alert-card he-alert-card--critical"><header class="he-section-header"><div><p class="he-eyebrow">Critical alert</p><h3>Heartbeat missed</h3></div><span class="he-status-badge he-status-badge--critical">Critical</span></header><p>AIEdge D1 has not reported for eight minutes.</p><div class="he-auto-cluster"><button class="he-button">Acknowledge</button><button class="he-button he-button--secondary">Investigate</button></div></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

Lead with severity and subject, expose timestamps and status, and keep acknowledge/resolve controls distinct.

• 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