Pagination

Learn how to build an 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 unordered list with flexbox and buttons utilities.

• Previous Page
• 01
• 02
• 03
• 04
• 05
• 06
• 07
• Next Page

<!-- 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 unordered list with flexbox and buttons utilities along side 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 -->