Mozaic

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>

Viewport: px

<div class="example">
  <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="#iconLeftL" />
      </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="#iconRightL" />
      </svg>
    </button>
  </nav> 
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftL" viewBox="0 0 24 24">
    <path
      class="cls-2"
      d="M16.5,22a1,1,0,0,1-.71-.29l-9-9a1,1,0,0,1,0-1.42l9-9a1,1,0,1,1,1.42,1.42L8.91,12l8.3,8.29a1,1,0,0,1,0,1.42A1,1,0,0,1,16.5,22Z"
    />
  </symbol>
  <symbol id="iconRightL" viewBox="0 0 24 24">
    <path
      class="cls-2"
      d="M7.5,22a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L15.09,12,6.79,3.71A1,1,0,1,1,8.21,2.29l9,9a1,1,0,0,1,0,1.42l-9,9A1,1,0,0,1,7.5,22Z"
    />
  </symbol>
</svg>

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>

Viewport: px

<div class="example">
  <nav class="mc-pagination mc-pagination--compact" role="navigation" aria-label="pagination">
    <button class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l mc-pagination__button" aria-label="Previous page">
      <svg class="mc-button__icon"">
        <use xlink:href="#iconLeftL" />
      </svg>
    </button>

    <button class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l mc-pagination__button" aria-label="Next Page">
      <svg class="mc-button__icon">
        <use xlink:href="#iconRightL" />
      </svg>
    </button>
  </nav>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="iconLeftL" viewBox="0 0 24 24">
    <path
      class="cls-2"
      d="M16.5,22a1,1,0,0,1-.71-.29l-9-9a1,1,0,0,1,0-1.42l9-9a1,1,0,1,1,1.42,1.42L8.91,12l8.3,8.29a1,1,0,0,1,0,1.42A1,1,0,0,1,16.5,22Z"
    />
  </symbol>
  <symbol id="iconRightL" viewBox="0 0 24 24">
    <path
      class="cls-2"
      d="M7.5,22a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L15.09,12,6.79,3.71A1,1,0,1,1,8.21,2.29l9,9a1,1,0,0,1,0,1.42l-9,9A1,1,0,0,1,7.5,22Z"
    />
  </symbol>
</svg>