Pagination
Pagination
<div class="pagination">
<div class="counts">
<p>
Showing
<span>1</span>
to
<span>10</span>
of
<span>97</span>
<i class="fa-light fa-pipe text-xs items-center"></i>
results to show:
</p>
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
10
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-down" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">10</a>
<a href="#" tabindex="-1">50</a>
<a href="#" tabindex="-1">100</a>
</div>
</div>
</div>
</div>
<nav aria-label="Pagination">
<a href="#" class="arrow">
<i class="fa-light fa-chevron-left text-xs items-center"></i>
</a>
<a href="#" aria-current="page" class="active">1</a>
<a href="#" >2</a>
<a href="#" >3</a>
<span >...</span>
<a href="#" >8</a>
<a href="#" >9</a>
<a href="#" >10</a>
<a class="arrow" href="#" class="arrow">
<i class="fa-light fa-chevron-right text-xs items-center "></i>
</a>
</nav>
</div>Pagination on left
<div class="pagination">
<nav aria-label="Pagination">
<a href="#" class="arrow">
<i class="fa-light fa-chevron-left text-xs items-center"></i>
</a>
<a href="#" aria-current="page" class="active">1</a>
<a href="#" >2</a>
<a href="#" >3</a>
<span >...</span>
<a href="#" >8</a>
<a href="#" >9</a>
<a href="#" >10</a>
<a class="arrow" href="#" class="arrow">
<i class="fa-light fa-chevron-right text-xs items-center "></i>
</a>
</nav>
<div class="counts">
<p>
Showing
<span>1</span>
to
<span>10</span>
of
<span>97</span>
<i class="fa-light fa-pipe text-xs items-center"></i>
results to show:
</p>
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
10
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-down" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">10</a>
<a href="#" tabindex="-1">50</a>
<a href="#" tabindex="-1">100</a>
</div>
</div>
</div>
</div>
</div>Pagination centered
<div class="pagination justify-center">
<nav aria-label="Pagination">
<a href="#" class="arrow">
<i class="fa-light fa-chevron-left text-xs items-center"></i>
</a>
<a href="#" aria-current="page" class="active">1</a>
<a href="#" >2</a>
<a href="#" >3</a>
<span >...</span>
<a href="#" >8</a>
<a href="#" >9</a>
<a href="#" >10</a>
<a class="arrow" href="#" class="arrow">
<i class="fa-light fa-chevron-right text-xs items-center "></i>
</a>
</nav>
</div>