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:
- Number: Users can navigate by clicking on the numbers or by using the back and next arrows.
- Letter: Good for A to Z index lists (like the 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/inactive.
Number pagination development info
- Stylesheet location:
/source-v6/styles/components/_pagination.scss
id="pagination"
- It’s possible for JavaScript to generate the pagination (as opposed to building it by hand, which is also an option). If there’s a need, we can move the script from Panther Tracks to the general website.
-
<div id="pagination"> <ol class="local-nav"> <li class="back-button"> <a href="" class="prev"> back <span>number of previous page</span> <span class="epithet">Title of previous page</span> </a> </li> <li> <a href=""> <span>1</span> <span class="epithet">Title of page 1</span> </a> </li> <li> <a href=""> <span>2</span> <span class="epithet">Title of page 2</span> </a> </li> <li> <a href=""> <span>3</span> <span class="epithet">Title of page 3</span> </a> </li> <li class="next-button"> <a href="" class="next"> next <span>number of next page</span> <span class="epithet">Title of next page</span> </a> </li> </ol> </div>
Letter pagination development info
- Stylesheet location:
/source-v6/styles/components/_pagination.scss
class="azIndex"
- It’s possible for JavaScript to generate the pagination (as opposed to building it by hand, which is also an option). Talk to Keith.
-
<!-- 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">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 --> <!-- no B, so go straight to C (in this example) --> <h4 id="C">C</h4> ... </div> </div> </div>
Styling
Pagination looks similar to other websites that have sequential series of pages, such as Google Search.
- Numbers: 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.
- Letters: 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
- Numbers: 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.
- Letters: 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.