Paginations
#01 Default pagination
<nav aria-label="NBK Pagination" class="nbk-pagination">
<ul class="nbk-pagination__navigation">
<li class="nbk-pagination__item">
<a class="nbk-pagination__link" href="#">
<span class="nbk-pagination__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</a>
</li>
<li class="nbk-pagination__item">
<a class="nbk-pagination__link" href="#">6</a>
</li>
<li class="nbk-pagination__item active" aria-current="page">
<a class="nbk-pagination__link" href="#">7</a>
</li>
<li class="nbk-pagination__item">
<a class="nbk-pagination__link" href="#">8</a>
</li>
<li class="nbk-pagination__item">
<a class="nbk-pagination__link" href="#">
<span class="nbk-pagination__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a></li>
</ul>
</nav>
#02 Pagination with counter
<nav aria-label="NBK Pagination" class="nbk-pagination">
<p class="nbk-pagination__description">
<b>32 - 44</b>
von
<b>144</b>
</p>
<ul class="nbk-pagination__navigation">
<li class="nbk-pagination__item">
<a class="nbk-pagination__link" href="#">
<span class="nbk-pagination__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</a>
</li>
<li class="nbk-pagination__item " >
<a class="nbk-pagination__link" href="#">3</a>
</li>
<li class="nbk-pagination__item " >
<a class="nbk-pagination__link" href="#">4</a>
</li>
<li class="nbk-pagination__item active " aria-current="page" >
<a class="nbk-pagination__link" href="#">5</a>
</li>
<li class="nbk-pagination__item " >
<a class="nbk-pagination__link" href="#">6</a>
</li>
<li class="nbk-pagination__item " >
<a class="nbk-pagination__link" href="#">7</a>
</li>
<li class="nbk-pagination__item">
<a class="nbk-pagination__link" href="#">
<span class="nbk-pagination__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a></li>
</ul>
</nav>