Description list

Overview

Show labeled entity attributes. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Description list when you need to show labeled entity attributes. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<dl class="he-description-list"><dt>Device</dt><dd>AIEdge D1</dd><dt>Farm</dt><dd>Riverside Farm</dd><dt>Model</dt><dd>Pose 0.8.4</dd></dl>

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 description-list semantics on web and keep term/value relationships adjacent.

• 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