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.

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

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