# Numbered pager

> Numbered links between the pages of a long list, each page at its own URL.

- Block class: `.hs-pager`
- CSS: `components/pager.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html
- Variants: Pager
- HTML page: https://brand.honorsociety.org/components/pager/

## What it is

Real links, 40px round targets, 16px/600 navy. The current page fills navy.

## When to use

- Any long list that Drupal core pages today. It replaces the unstyled core pager.
- A list where the reader needs to reach a given page by number.

## When not to use

- Under a card grid that grows, use [Load more](/components/load-more/).
- To switch between sibling views, use [Tabs](/components/tabs/).
- To filter one list, use [Filter chips and tags](/components/chips/).

## Rules

- Markup: `nav.hs-pager` with an `aria-label`, then `ul.hs-pager__list` > `li.hs-pager__item` > `a.hs-pager__link`.
- Every page link has a real URL (`?page=3`), so every page works without JavaScript.
- Mark the current page with `aria-current="page"`. It fills navy, as a current chip does.
- Previous and Next carry `rel="prev"` and `rel="next"`, an arrow SVG and the word in `span.hs-pager__word`.
- Show a gap as `span.hs-pager__gap` with `aria-hidden="true"` and `…`.
- Place it on a light ground. The current fill is `--hs-navy` itself, not a ground property.

## Accessibility

- The `nav` carries an `aria-label` (“Pages”). `aria-current="page"` marks the current page.
- Each link is a 40px round target. Numbers use tabular figures.
- The current page is white on navy, 12.4:1.
- Below 36rem, Previous and Next drop the word visually. The word stays for a screen reader, and the arrow SVG is `aria-hidden`.
- Transitions stop under `prefers-reduced-motion: reduce`.

## Variants

### Pager

On a phone, Previous and Next keep only the arrow.

```html
<nav class="hs-pager" aria-label="Pages">
  <ul class="hs-pager__list">
    <li class="hs-pager__item"><a class="hs-pager__link" href="?page=1" rel="prev"><svg class="hs-pager__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 6l-6 6 6 6"/></svg><span class="hs-pager__word">Previous</span></a></li>
    <li class="hs-pager__item"><a class="hs-pager__link" href="?page=1">1</a></li>
    <li class="hs-pager__item"><a class="hs-pager__link" href="?page=2" aria-current="page">2</a></li>
    <li class="hs-pager__item"><a class="hs-pager__link" href="?page=3">3</a></li>
    <li class="hs-pager__item"><span class="hs-pager__gap" aria-hidden="true">&hellip;</span></li>
    <li class="hs-pager__item"><a class="hs-pager__link" href="?page=8">8</a></li>
    <li class="hs-pager__item"><a class="hs-pager__link" href="?page=3" rel="next"><span class="hs-pager__word">Next</span><svg class="hs-pager__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"/></svg></a></li>
  </ul>
</nav>
```