Mozaic

Import

@import 'settings-tools/_all-settings';
@import 'components/_c.pagination';
@import 'components/_c.select'; // (Optionnal)

Default Pagination

<div class="mc-pagination">
  <a href="#" class="mc-pagination__button" aria-label="Previous page">
    <svg class="mc-pagination__button-icon">
      <use xlink:href="#iconLeftL" />
    </svg>
  </a>

  <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>

  <a href="#" class="mc-pagination__button" aria-label="Next Page">
    <svg class="mc-pagination__button-icon">
      <use xlink:href="#iconRightL" />
    </svg>
  </a>
</div>

Viewport: px

<div class="example">
  <div class="mc-pagination">
    <a href="#" class="mc-pagination__button" aria-label="Previous page">
      <svg class="mc-pagination__button-icon">
        <use xlink:href="#iconLeftL" />
      </svg>
    </a>

    <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>

    <a href="#" class="mc-pagination__button" aria-label="Next Page">
      <svg class="mc-pagination__button-icon">
        <use xlink:href="#iconRightL" />
      </svg>
    </a>
  </div>
</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>

Light Pagination

<div class="mc-pagination mc-pagination--light">
  <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>
</div>

Viewport: px

<div class="example">
  <div class="mc-pagination mc-pagination--light">
    <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>
  </div>
</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>

Accessibility and semantic

Use aria-label="the button purpose" on every button of the pagination