Web services

Pagination

Pagination links let users navigate through a series of steps or sequential content, with each step on a different page. We use two different types of pagination, numbers and letters.

Jump to a component:

Numbers pagination

Users can navigate by clicking on the numbers or by using the back and next arrows.

Styling

Links are displayed as numbers in chronological order. When you hover over the numbers, that page’s title appears. Users can also use the back and next arrows to navigate. A turquoise box shows your current location in the series.

Responsive behavior for Numbers pagination

On large screens, the pagination links display in a long, horizontal line. On small screens, the back and next arrows stack on top of the numbers. On very small screens, the numbers wrap to form a grid as needed.

How to use for Numbers pagination

Add in the HTML (see “development info”).

Development info for Numbers pagination

Stylesheet location: /_source/styles/components/_pagination.scss 

<div id="pagination">
  <ol class="local-nav">
    <li class="back-button"><a class="prev" href="">back<span class="epithet"> Previous page name</span></a></li>
    <li><a href="">1<span class="epithet"> Page 1</span></a></li>
    <li><a class="prev" href="">2<span class="epithet"> Page 2</span></a></li>
    <li><a class="current" href="">3<span class="epithet"> Page 3</span></a></li>
    <li><a class="next" href="">4<span class="epithet"> Page 4</span></a></li>
    <li class="next-button"><a class="next" href="">next<span class="epithet"> Next page name</span></a></li>
  </ol>
</div>
Example of Numbers pagination

Letters pagination

Good for A to Z index lists (like the Programs page, IT services list, and the Intranet forms page). Letters with entries link to that section of the page, and letters without entries are grayed out and inactive.

Styling

Active letters look like buttons (teal background with white text), and inactive letters are grayed out. The letters go across the page in a horizontal row.

Responsive behavior for Letters pagination

On large screens, the pagination links display in a long, horizontal line. As soon as the page becomes too narrow, each letter box will drop to the next line and form a second (or third) row.

How to use for Letters pagination

Add in the HTML (see “development info”).

Development info for Letters pagination

Stylesheet location: /_source/styles/components/_pagination.scss 

<!-- the pagination -->
<div class="azIndex">
  <ul>
    <li data-index="A"><a href="#A">A</a></li> <!-- active -->
    <li class="jxAzEmpty" data-index="B"><a href="#B" aria-disabled="true">B</a></li> <!-- inactive -->
    <li data-index="C"><a href="#C">C</a></li> <!-- active -->    
    ...
  </ul>
</div>

<!-- the content -->
<div class="jxAzList"> <!-- could also be an indexlist -->
  <div data-index="A">
    <h4 id="A">A</h4> <!-- whatever heading level you need -->
    <!-- ul if indexlist, or other content -->
  </div>
  <div data-index="C"> <!-- no B, so go straight to C (in this example) -->
    <h4 id="C">C</h4>
    ...
  </div>
</div>
Example of Letters pagination

Jump to: