Pagination

stablev1.0.0

Let the user know in which page he is and switch between them.

Overview

To be used when the content is very lenghty and can be splitted in different pages.

It's a clear, useful and intuitive way to give an idea on how long is the content, in which part the user is, and to jump to another page.

The pagination component takes the whole width of its parent container.

English, 3 pages

Page:

Previous Next

French, 23 pages

Page :

Précédente Suivante Dernière

Usage

Dependencies

To get the pagination component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/02-molecules/pagination';

include /node_modules/design-system/src/pug/02-molecules/pagination

Basic code

The pagination component is structured the following way:

div parent element with the pagination class.
- div child element with the pagination__label class, containing :
  - p element with the pagination__text class and the text Page: inside (depending on language chosen).
- (Mobile only) The pagination component becomes a dropdown (see dropdown's documentation here)
- (Desktop only) ol element with the pagination__links class, containing :
  - li element with the pagination__item pagination__item--is-active class, containing :
  - li element with the pagination__item class, containing :
  - and so on for each number.
- (Mobile + Desktop) div element with the pagination__directors class, containing :
  - a element with the following classes:
    - btn
    - btn--sm
    - btn--secondary
    - btn--outline
    - pagination__director
    - pagination__director--previous
    - pagination__director--is-disabled
    and containing:
  - a element with the following classes:
    - btn
    - btn--sm
    - btn--secondary
    - btn--outline
    - pagination__director
    - pagination__director--next
    and containing:
  - (Only displayed when relevant) a element with the following classes:
    - btn
    - btn--sm
    - btn--secondary
    - btn--outline
    - pagination__director
    - pagination__director--last
    and containing:

Html
Pug

<div class="pagination" aria-label="Pagination">
  <div class="pagination__label">
    <p class="pagination__text">Page:</p>
  </div>
  <div class="pagination__dropdown">
    <div class="dropdown">
      <button class="dropdown__trigger">1 of 3</button>
      <ul class="dropdown__content">
        <li class="dropdown__item"><a class="dropdown__link" href="#" aria-label="Go to page 2">2 of 3</a></li>
        <li class="dropdown__item"><a class="dropdown__link" href="#" aria-label="Go to page 3">3 of 3</a></li>
      </ul>
    </div>
  </div>
  <ol class="pagination__links">
    <li class="pagination__item pagination__item--is-active"><a class="btn btn--sm btn--secondary pagination__link" href="#" aria-current="true">1</a></li>
    <li class="pagination__item"><a class="btn btn--sm btn--secondary btn--outline pagination__link" href="#" aria-label="Go to page 2">2</a></li>
    <li class="pagination__item"><a class="btn btn--sm btn--secondary btn--outline pagination__link" href="#" aria-label="Go to page 3">3</a></li>
  </ol>
  <div class="pagination__directors">
    <a class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--previous pagination__director--is-disabled" href="#" aria-label="Go to previous page">
      <svg class="icon icon--left" aria-hidden="true">
        <use xlink:href="img/sprite.svg#icon-chevron-left"></use>
      </svg>
      <span class="pagination__direction">Previous</span>
    </a>
    <a class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--next" href="#" aria-label="Go to next page">
      <span class="pagination__direction">Next</span>
      <svg class="icon icon--right" aria-hidden="true">
        <use xlink:href="img/sprite.svg#icon-chevron-right"></use>
      </svg>
    </a>
    <a class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--last" href="#" aria-label="Last one">
      <span class="pagination__direction"></span>
      <svg class="icon icon--right" aria-hidden="true">
        <use xlink:href="img/sprite.svg#icon-chevron-right-end"></use>
      </svg>
    </a>
  </div>
</div>

+pagination(3, 'fr', 'img/sprite.svg')

Pug mixin

We created a pug mixin to implement the pagination component with ease, find the parameters below:

+pagination(pageNumber, lang, svgUrl)

#	Name	Type	Default	Required	Description
1	`pageNumber`	`whole number`	`6`	Yes	Set amount of pages.
2	`lang`	`string`	`en`	Yes	Set language for the text inside the component.
3	`svgUrl`	`string`	`img/sprite.svg`	Yes	Specify the path where the sprite is located.

HTML attributes

HTML attributes are mandatory to respect accessibility. They are also useful for robots scanning our content.

Aria
Microdata

Aria

Aria attributes (aria-label and aria-current) are added automatically when you use the Pug mixin. They are mandatory to have an accessible page.

HTML
Pug

<div aria-label="Pagination" class="pagination">
  <div class="pagination__label">
    <p class="pagination__text">Page:</p>
  </div>
  <div class="pagination__dropdown">
    <div class="dropdown"><button class="dropdown__trigger">1 of 3</button>
      <ul class="dropdown__content">
        <li class="dropdown__item">
          <a aria-label="Go to page 2" class="dropdown__link" href="#">2 of 3</a>
        </li>
        <li class="dropdown__item">
          <a aria-label="Go to page 3" class="dropdown__link" href="#">3 of 3</a>
        </li>
      </ul>
    </div>
  </div>
  <ol class="pagination__links">
    <li class="pagination__item pagination__item--is-active">
      <a aria-current="true" class="btn btn--sm btn--secondary pagination__link" href="#">1</a>
    </li>
    <li class="pagination__item">
      <a aria-label="Go to page 2" class="btn btn--sm btn--secondary btn--outline pagination__link" href="#">2</a>
    </li>
    <li class="pagination__item">
      <a aria-label="Go to page 3" class="btn btn--sm btn--secondary btn--outline pagination__link" href="#">3</a>
    </li>
  </ol>
  <div class="pagination__directors">
    <a aria-label="Go to previous page" class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--previous pagination__director--is-disabled" href="#">
      <svg aria-hidden="true" class="icon icon--left">
        <use xlink:href="img/sprite.svg#icon-chevron-left"></use>
      </svg>
      <span class="pagination__direction">Previous</span>
    </a>
    <a aria-label="Go to next page" class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--next" href="#">
      <span class="pagination__direction">Next</span>
      <svg aria-hidden="true" class="icon icon--right">
        <use xlink:href="img/sprite.svg#icon-chevron-right"></use>
      </svg>
    </a>
    <a aria-label="Last one" class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--last" href="#">
      <span class="pagination__direction"></span>
      <svg aria-hidden="true" class="icon icon--right">
        <use xlink:href="img/sprite.svg#icon-chevron-right-end"></use>
      </svg>
    </a>
  </div>
</div>

+pagination(3, '', '')

Microdata

Microdata provides a simple mechanism to label content in a document, so search engines can better identify page content using schema.org annotations, and CMS can find and use information from documents.

Microdata is added automatically when you use the Pug mixin.

HTML
Pug

<div itemscope itemtype="http://schema.org/SiteNavigationElement" class="pagination" aria-label="Pagination">
  <div class="pagination__label">
    <p class="pagination__text">Page:</p>
  </div>
  <div class="pagination__dropdown">
    <div class="dropdown"><button class="dropdown__trigger">1 of 3</button>
      <ul class="dropdown__content">
        <li class="dropdown__item">
          <a class="dropdown__link" href="#" aria-label="Go to page 2"itemprop="name">2 of 3</a>
        </li>
        <li class="dropdown__item">
          <a class="dropdown__link" href="#" aria-label="Go to page 3"itemprop="name">3 of 3</a>
        </li>
      </ul>
    </div>
  </div>
  <ol class="pagination__links">
    <li class="pagination__item pagination__item--is-active"><a class="btn btn--sm btn--secondary pagination__link" href="#" aria-current="true">1</a></li>
    <li class="pagination__item">
      <a itemprop="url" class="btn btn--sm btn--secondary btn--outline pagination__link" href="#" aria-label="Go to page 2">2</a>
    </li>
    <li class="pagination__item">
      <a itemprop="url" class="btn btn--sm btn--secondary btn--outline pagination__link" href="#" aria-label="Go to page 3">3</a>
    </li>
  </ol>
  <div class="pagination__directors">
    <a itemprop="url" class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--previous pagination__director--is-disabled" href="#" aria-label="Go to previous page">
      <svg class="icon icon--left" aria-hidden="true">
        <use xlink:href="img/sprite.svg#icon-chevron-left"></use>
      </svg>
      <span class="pagination__direction">Previous</span>
    </a>
    <a itemprop="url" class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--next" href="#" aria-label="Go to next page">
      <span class="pagination__direction">Next</span>
      <svg class="icon icon--right" aria-hidden="true">
        <use xlink:href="img/sprite.svg#icon-chevron-right"></use>
      </svg>
    </a>
    <a itemprop="url" class="btn btn--sm btn--secondary btn--outline pagination__director pagination__director--last" href="#" aria-label="Last one">
      <span class="pagination__direction"></span>
      <svg class="icon icon--right" aria-hidden="true">
        <use xlink:href="img/sprite.svg#icon-chevron-right-end"></use>
      </svg>
    </a>
  </div>
</div>

+pagination(3, '', '')