Portland Community College | Portland, Oregon Portland Community College

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.

Number pagination

Letter pagination

Jump to: