Pagination

Overview

Move through server-paginated result sets. It preserves organization, region, farm and entity scope while the user changes location or peer view.

When to use

Use HE/Pagination when you need to move through server-paginated result sets. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<nav class="he-pagination" aria-label="Results pages"><button>Previous</button><a href="#" aria-current="page">1</a><a href="#">2</a><button>Next</button></nav>

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 navigation semantics and announce current page and total pages.

• 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