Resa Design System

Appearance

Paginations ​

v-0.0.0

How it works ​

Desktop ​

Theses buttons should always be visible :

  • Left Arrow
  • First page
  • Previous page
  • Current page
  • Next page
  • Last page
  • Right arrow

In between, if there is more then one page you should display ...

It is possible that some of those pages have multiple status at once, see examples for each specific cases.

Mobile ​

Theses buttons should always be visible :

  • Left Arrow
  • Current page
  • Right arrow

Default ​

html
<nav class="pagination" role="navigation">
    <ul class="pagination__list">
        <li class="pagination__item--arrow">
            <button class="cta__btn--prev">
                Previous
            </button>
        </li>
        <li class="pagination__item--page">
            <button class="cta__btn">1</button>
        </li>
        <li class="pagination__item--filler">
            <span class="pagination__content">...</span>
        </li>
        <li class="pagination__item--page">
            <button class="cta__btn">4</button>
        </li>
        <li class="pagination__item--page active">
            <span class="cta__btn pagination__content">5</span>
        </li>
        <li class="pagination__item--page">
            <button class="cta__btn">6</button>
        </li>
        <li class="pagination__item--filler">
            <span class="pagination__content">...</span>
        </li>
        <li class="pagination__item--page">
            <button class="cta__btn">9</button>
        </li>
        <li class="pagination__item--arrow">
            <button class="cta__btn--next">
                Next
            </button>
        </li>
    </ul>
</nav>

Examples ​