Edinburgh GEL

Pagination

Split long lists into multiple pages.

Pagination vs. paging should be defined by CMS user, and should provide active state to highlight the current page in the list and prevent the user clicking it as well as previous and next links as appropriate. Ellipsis should be used to abbreviate long lists.

Accessibility review

Pagination is created by using standard well-formed HTML lists. These are fully accessible. There is no problems with this elements.

Accessibility issues

As the pagination is created automatically the links are numbered 1,2,3,4 etc. This means that the link text is not very descriptive. However the final link does have the text of ‘Next page’.

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<h3>Pagination</h3>
<ul class="pagination">
  <li><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="active"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li>
</ul>

<h3>Pagination - abbreviated</h3>
<ul class="pagination">
  <li><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">...</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li>
</ul>

<h3>Pagination - Active and disabled</h3>
<ul class="pagination">
  <li class="disabled"><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li>
  </ul>
 
 

<h3>Paging</h3>
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>