Card

Overview

Group related content and actions. It establishes reading order and decision grouping before visual decoration.

When to use

Use HE/Card when you need to group related content and actions. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<article class="he-card"><p class="he-eyebrow">Edge device</p><h3 class="he-title">AIEdge D1</h3><p class="he-body">Last heartbeat 28 seconds ago.</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

Only interactive cards receive a focus target; do not nest competing click targets.

• 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