Pagination

A component for navigating through pages of content.

Standard

« 1 2 3 »

Code Example Shortcut: z-pagination

<div class="pagination-nav center-flex">
    <a class="item">«</a>
    <a class="item">1</a>
    <a class="item current">2</a>
    <a class="item">3</a>
    <a class="item">»</a>
</div>

Tabbed

← Prev 1 2 3 Next →

Code Example Shortcut: z-pagination-tabbed

<div class="pagination-nav center-flex">
    <a class="item-minimal">← Prev</a>
    <a class="item-minimal">1</a>
    <a class="item-minimal current">2</a>
    <a class="item-minimal">3</a>
    <a class="item-minimal">Next →</a>
</div>

Themed

« 1 2 3 »

← Prev 1 2 3 Next →

Code Example Shortcut: z-pagination-themed

<div class="pagination-nav center-flex">
    <a class="item bg-cta-hover">«</a>
    <a class="item bg-cta-hover">1</a>
    <a class="item bg-cta bg-cta-hover current">2</a>
    <a class="item bg-cta-hover">3</a>
    <a class="item bg-cta-hover">»</a>
</div>

<div class="pagination-nav center-flex">
    <a class="item-minimal bg-cta-hover">← Prev</a>
    <a class="item-minimal bg-cta-hover">1</a>
    <a class="item-minimal bg-cta bg-cta-hover current">2</a>
    <a class="item-minimal bg-cta-hover">3</a>
    <a class="item-minimal bg-cta-hover">Next →</a>
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.