A-One Design System

COMPONENT: A-Z Index (consumer-only)
VARIANTS: default | active (letter selected) | disabled (no results for letter)

Vertical alphabet pagination for the Careers Explore page. 26 letters stacked in a flex column, neutral-400 by default. Active letter (primary-ink, bold). Disabled letters (0.4 opacity, cursor not-allowed). Hover changes ink to primary-ink.

1. Default — all 26 letters, none active

Default state: All letters neutral-400. Hover changes ink to primary-ink. Used on initial page load before any letter is selected.

Structure:

<nav class="az-index">

          <span class="az-index-letter">A</span>

          …

        </nav>

2. With 'D' active — Design selected

Active state: active on the letter element — primary-ink color, bold weight.

Active letter:

<span class="az-index-letter active">D</span>

3. With disabled letters — no careers for those letters

Disabled state: disabled — 0.4 opacity, cursor not-allowed, hover does not change ink. Applied when the careers dataset has no entries starting with that letter (Q, X, Z commonly).

Disabled letter:

<span class="az-index-letter disabled" aria-disabled="true" tabindex="-1">X</span>