Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

13 Pagination

Pagination is a type of navigation that lets users tap through a series of related pages. Moving between pages has become less common with the advent of longer pages and AJAX loading.

<div>
 <ul class="pagination__list"> 
   <li class="pagination__item">
     <a href="" class="pagination__link pagination__link--unavailable">«</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">1</a>
   </li> 
   <li class="pagination__item">
     <a href="" class="pagination__link">2</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link pagination__link--active">3</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">4</a>
   </li>
   <li class="pagination__item">
      <a href="" class="pagination__link pagination__link--unavailable">…</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">5</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">6</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">7</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">8</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link pagination__link--unavailable">»</a>
   </li>
 </ul>
</div>

13.1 Horizontally centered

Wrap your .pagination__list with an element that has the .pagination--centered class to center your pagination.

<div class="pagination--centered">
 <ul class="pagination__list"> 
   <li class="pagination__item">
     <a href="" class="pagination__link pagination__link--unavailable">«</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">1</a>
   </li> 
   <li class="pagination__item">
     <a href="" class="pagination__link">2</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link pagination__link--active">3</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">4</a>
   </li>
   <li class="pagination__item">
      <a href="" class="pagination__link pagination__link--unavailable">…</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">5</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">6</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">7</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link">8</a>
   </li>
   <li class="pagination__item">
     <a href="" class="pagination__link pagination__link--unavailable">»</a>
   </li>
 </ul>
</div>