Pagination

Default

• «
• 1
• 2
• 3
• ...
• »

<ul class="pagination">
  <li class="pagination__item disabled">
    <a class="pagination__link" href="#url">&laquo;</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">1</a>
  </li>
  <li class="pagination__item pagination__item--active">
    <a class="pagination__link" href="#url">2</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">3</a>
  </li>
  <li class="pagination__item">
    <span>...</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">&raquo;</a>
  </li>
</ul>

Small

• «
• ...
• 5
• 6
• 7
• ...
• »

<ul class="pagination pagination--sm">
  <li class="pagination__item">
    <a class="pagination__link" href="#url">&laquo;</a>
  </li>
  <li class="pagination__item">
    <span>...</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">5</a>
  </li>
  <li class="pagination__item pagination__item--active">
    <a class="pagination__link" href="#url">6</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">7</a>
  </li>
  <li class="pagination__item">
    <span>...</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">&raquo;</a>
  </li>
</ul>

Large

• «
• ...
• 7
• 8
• 9
• »

<ul class="pagination pagination--lg">
  <li class="pagination__item">
    <a class="pagination__link" href="#url">&laquo;</a>
  </li>
  <li class="pagination__item">
    <span>...</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">7</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#url">8</a>
  </li>
  <li class="pagination__item pagination__item--active">
    <a class="pagination__link" href="#url">9</a>
  </li>
  <li class="pagination__item disabled">
    <a class="pagination__link" href="#url">&raquo;</a>
  </li>
</ul>