Page header

Overview

Orient the user and contain page-level actions. It establishes reading order and decision grouping before visual decoration.

When to use

Use HE/Page header when you need to orient the user and contain page-level actions. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<header class="he-page-header"><div class="he-page-header__copy"><p class="he-eyebrow">Riverside Farm</p><h2>Fleet overview</h2><p>Devices and service health.</p></div><button class="he-button">Add device</button></header>

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 one page-level h1 and keep actions after title and description in 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