Skip to main content

Pagination

Default


<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


<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


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