UIF Core // Pagination

Pagination
deprecated `v2.0.0`

This component is now deprecated and will be removed/refactored in v2.0.0

Introduction

Allow users to navigate through a list of phenomena over multiple pages or screens, as this list would otherwise be too long display in one go.

Examples

Pagination on first item

prev
1
2
3
4
...
13
next

Page 1 of 13

<nav>
       <ol class="pagination">
           <li class="pagination__item pagination__item--prev">
               <a href="#" class="pagination__link pagination__link--prev icon icon--left-grey is-disabled">prev</a>
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link is-current">1</a>
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link">2</a>
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link">3</a>
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link">4</a>
           </li>
           <li class="pagination__item">
               ...
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link">13</a>
           </li>
           <li class="pagination__item pagination__item--next">
               <a href="#" class="pagination__link pagination__link--next icon icon--right-grey">next</a>
           </li>
       </ol>
         <div class="pagination-label">Page 1 of 13</div>
     </nav>

Pagination on fourth item

prev
...
2
3
4
5
6
...
13
next

Page 4 of 13

<nav>
       <ol class="pagination">
           <li class="pagination__item pagination__item--prev">
               <a href="#" class="pagination__link pagination__link--prev icon icon--left-grey">prev</a>
           </li>
           <li class="pagination__item">
               ...
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link">2</a>
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link">3</a>
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link is-current">4</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">
               ...
           </li>
           <li class="pagination__item">
               <a href="#" class="pagination__link">13</a>
           </li>
           <li class="pagination__item pagination__item--next">
               <a href="#" class="pagination__link pagination__link--next icon icon--right-grey">next</a>
           </li>
       </ol>
         <div class="pagination-label">Page 4 of 13</div>
     </nav>

Dependencies

src/styles/base/*.scss
src/styles/components/elements/_icon.scss
src/styles/components/blocks/_pagination.scss

Usage

Class/JavaScript Hook	Description	Required?
`.pagination`	Placed on the `ol` tag that will contain the pagination. Include inside a `nav` tag for better accessibility.	Required
`.pagination__item`	Placed on each `li` inside the `.pagination`. Applicable for all items, including previous, next, ellipses, and item/page numbers.	Required
`.pagination__link`	Placed on all links inside the `.pagination__item`.	Required
`.pagination__item--prev\|next`	Placed on the previous and next buttons, on both the `.pagination__item` and `.pagination__link` element levels.	Required
`.pagination__link--prev\|next`	Placed on the previous and next buttons, on both the `.pagination__item` and `.pagination__link` element levels.	Required
`.is-disabled`	Placed on the previous or next button that is disabled due to current position being on the first or last item	Required
`.is-current`	Placed on current page/item on the `.pagination__link` element level.	Required
`.pagination-label`	Placed on the tag that wraps the text used in place of all page numbers on smaller screens, in the form of 'Page x of y'. This is placed immediately after, not inside, the `.pagination` block, hence it is its own block level class.	Required