Numbered 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.
• To switch between sibling views, use Tabs.
• To filter one list, use Filter chips and tags.

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.

<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>