---Loading---

Pagination

Learn how to build a pagination component with Phenix Design System css utilities with live examples ready for quick usage.

Pagination Component

in the example below we will use the PDS Utilities to build a standard pagination component using an unordered list with flexbox and button utilities.

<!-- Pagination -->
<ul class="reset-list pagination flexbox">
<li class="me-10"><a href="#" class="btn">Previous Page</a></li>
<li class="me-10"><a href="#" class="btn square primary">01</a></li>
<li class="me-10"><a href="#" class="btn square">02</a></li>
<li class="me-10"><a href="#" class="btn square">03</a></li>
<li class="me-10"><a href="#" class="btn square">04</a></li>
<li class="me-10"><a href="#" class="btn square">05</a></li>
<li class="me-10"><a href="#" class="btn square">06</a></li>
<li class="me-10"><a href="#" class="btn square">07</a></li>
<li class="me-10"><a href="#" class="btn">Next Page</a></li>
</ul>
<!-- // Pagination -->

Pagination With icons

in the example below we will use the PDS Utilities to build a standard pagination component using an unordered list with flexbox and buttons utilities alongside font icons for next/prev buttons.

01
02
03
04
05
06
07

<!-- Pagination -->
<ul class="reset-list pagination flexbox">
<li class="me-10"><a href="#" class="btn">Previous Page</a></li>
<li class="me-10"><a href="#" class="btn square primary">01</a></li>
<li class="me-10"><a href="#" class="btn square">02</a></li>
<li class="me-10"><a href="#" class="btn square">03</a></li>
<li class="me-10"><a href="#" class="btn square">04</a></li>
<li class="me-10"><a href="#" class="btn square">05</a></li>
<li class="me-10"><a href="#" class="btn square">06</a></li>
<li class="me-10"><a href="#" class="btn square">07</a></li>
<li class="me-10"><a href="#" class="btn">Next Page</a></li>
</ul>
<!-- // Pagination -->

Flexbox Alignment

in the example below you can find the pagination buttons aligned with flexbox utilities.

01
02
03
04
05
06
07

01
02
03
04
05
06
07

01
02
03
04
05
06
07

<!-- Pagination Center -->
<ul class="reset-list pagination flexbox align-center-x">
<li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
<li class="me-10"><a href="#" class="btn square primary">01</a></li>
<li class="me-10"><a href="#" class="btn square">02</a></li>
<li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>
<!-- // Pagination Center -->
<!-- Pagination End -->
<ul class="reset-list pagination flexbox align-end-x">
<li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
<li class="me-10"><a href="#" class="btn square primary">01</a></li>
<li class="me-10"><a href="#" class="btn square">02</a></li>
<li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>
<!-- // Pagination End -->

Table of Content