Tabs

Overview

Switch among peer views in one context. It preserves organization, region, farm and entity scope while the user changes location or peer view.

When to use

Use HE/Tabs when you need to switch among peer views in one context. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<div class="he-tabs" role="tablist"><button class="he-tab" role="tab" aria-selected="true">Health</button><button class="he-tab" role="tab" aria-selected="false">Services</button></div>

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

Implement tabs, tablist, and tabpanel roles with arrow-key selection behavior.

• 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