Pagination

figma:ready

scss:ready

freemarker:ready

vue:ready

Import


@import 'settings-tools/all-settings';
@import 'components/c.button'; // (Optionnal)
@import 'components/c.pagination';
@import 'components/c.select'; // (Optionnal)

Default Pagination


<nav class="mc-pagination" role="navigation" aria-label="pagination">
  <button
    href="#"
    class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
    aria-label="Previous page"
  >
    <svg class="mc-button__icon">
      <use xlink:href="#iconPaginationPrev" />
    </svg>
  </button>
  <div class="mc-pagination__field">
    <select class="mc-select mc-pagination__select">
      <option value="1">Page 1 of 99</option>
      <option value="2">Page 2 of 99</option>
      <option value="3">Page x of 99</option>
      <option value="99">Page 99 of 99</option>
    </select>
  </div>
  <button
    button
    href="#"
    class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
    aria-label="Next Page"
  >
    <svg class="mc-button__icon">
      <use xlink:href="#iconPaginationNext" />
    </svg>
  </button>
</nav>

Compact Pagination


<nav
  class="mc-pagination mc-pagination--compact"
  role="navigation"
  aria-label="pagination"
>
  <a href="#" class="mc-pagination__button" aria-label="Previous page">
    <svg class="mc-pagination__button-icon">
      <use xlink:href="#iconLeftL" />
    </svg>
  </a>
  <a href="#" class="mc-pagination__button" aria-label="Next Page">
    <svg class="mc-pagination__button-icon">
      <use xlink:href="#iconRightL" />
    </svg>
  </a>
</nav>