Pagination
Default
<ul class="pagination">
<li class="pagination__item disabled">
<a class="pagination__link" href="#url">«</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">»</a>
</li>
</ul>
Small
<ul class="pagination pagination--sm">
<li class="pagination__item">
<a class="pagination__link" href="#url">«</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">»</a>
</li>
</ul>
Large
<ul class="pagination pagination--lg">
<li class="pagination__item">
<a class="pagination__link" href="#url">«</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">»</a>
</li>
</ul>