Pagination

The pagination component serves as a way to navigate between pages of lengthy content.

The link for the current page of results should always include aria-current="page". The .cmp-pagination__link class adds pagination styles to the <a> link.

The ... (ellipsis) signifies truncation. It can be enabled by adding a .cmp-pagination__item--jump class to the list item after the ellipsis. The ellipsis is displayed as the item before that link.

Pagination

Previous Next

1. 1
2. 2
3. 3
4. 8

<nav class="cmp-pagination" aria-label="Pagination">
  <a class="cmp-pagination__link cmp-pagination__link--prev" href="#">
    <svg class="cmp-pagination__icon">
      <use xlink:href="#icon-arrow-left"></use>
    </svg>
    <span class="util-visually-hidden">Previous</span>
  </a>
  <a class="cmp-pagination__link cmp-pagination__link--next" href="#">
    <svg class="cmp-pagination__icon">
      <use xlink:href="#icon-arrow-right"></use>
    </svg>
    <span class="util-visually-hidden">Next</span>
  </a>
  <ol class="cmp-pagination__list">
    <li class="cmp-pagination__item">
      <a class="cmp-pagination__link" href="#" aria-current="page">1</a>
    </li>
    <li class="cmp-pagination__item">
      <a class="cmp-pagination__link" href="#">2</a>
    </li>
    <li class="cmp-pagination__item">
      <a class="cmp-pagination__link" href="#">3</a>
    </li>
    <li class="cmp-pagination__item cmp-pagination__item--jump">
      <a class="cmp-pagination__link" href="#">8</a>
    </li>
  </ol>
</nav>

CSS Classes

Class	Description
.cmp-pagination	Outer flex container, centered
.cmp-pagination__list	Ordered list of page numbers
.cmp-pagination__item	Individual page item (hidden below 480px)
.cmp-pagination__item--jump	Jump-to page with ellipsis separator
.cmp-pagination__link	Page number link (Oswald font, 1.5rem)
.cmp-pagination__link--prev	Previous arrow link (red, order 1)
.cmp-pagination__link--next	Next arrow link (red, order 3)
.cmp-pagination__icon	SVG arrow icon (1.25rem)

Behavior

• Page numbers are hidden on viewports below 480px (only prev/next arrows show)
• The current page uses aria-current="page" for accessibility and receives bold styling
• Jump pages display an ellipsis before the page number
• Previous/next arrows use Bulldog Red and turn black on hover

Accessibility

The pagination component includes the following accessibility features:

• The component is wrapped in a <nav> element with aria-label="Pagination" so assistive technology identifies it as a navigation landmark.
• Page links use an <ol> (ordered list) to convey their sequential relationship.
• The current page link receives aria-current="page" so screen readers announce it as the active page.
• Previous and next arrows include visually hidden text (“Previous” and “Next”) so screen readers announce them correctly.

When implementing pagination, also consider:

• Disabling or removing the previous link on the first page and the next link on the last page. Use aria-disabled="true" when keeping the element in the DOM.