Device card

Overview

Show identity, connection, workload and recent device health. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Device card when you need to show identity, connection, workload and recent device health. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<article class="he-device-card"><header class="he-device-card__header"><div><p class="he-eyebrow">Edge device</p><h3>AIEdge D1</h3></div><span class="he-status-badge he-status-badge--healthy">Healthy</span></header><dl class="he-description-list"><dt>Heartbeat</dt><dd>28 sec ago</dd><dt>Camera</dt><dd>Streaming</dd></dl></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

Connection status, last heartbeat, and service failures are explicit text, not dot color alone.

• 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