Drawer

Overview

Display detail or an editor alongside the current view. It raises contextual work above the current page and returns focus to the invoking control.

When to use

Use HE/Drawer when you need to display detail or an editor alongside the current view. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<aside class="he-drawer" style="position:relative;transform:none;width:min(100%,420px)" aria-label="Device detail"><header class="he-drawer__header"><h3>AIEdge D1</h3></header><p>Device detail remains beside fleet context.</p></aside>

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

Modal drawers follow dialog focus rules; persistent drawers remain in normal reading order.

• 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