• CSS
• Layout
• Typography
• Buttons
• Form elements
• Images
• Pagination
• Badges

Pagination

Pagination is a set of controls in ZoaUI that can work independently of JavaScript. They can be aligned left, center, or right, with shapes rectangular, corner-rounded or round.

Note: Alignment and triangles do not work on IE7 or below.

<div class="zo-paginationContainer">
    <ul class="zo-pagination">
        <li class="zo-pagination__item">
            <span class="zo-pagination__span zo--round">
                <span class="zo-sr">Previous</span>
                <span class="zo-triangle zo-triangle--left"></span>
            </span>
        </li>
        <li class="zo-pagination__item">
            <span class="zo-pagination__span zo--active zo--round">
                1
            </span>
        </li>
        <li class="zo-pagination__item">
            <a href="#" class="zo-pagination__link zo--round">
                2
            </a>
        </li>
        <li class="zo-pagination__item">
            <a href="#" class="zo-pagination__link zo--round">
                3
            </a>
        </li>
        <li class="zo-pagination__item">
            <a href="#" class="zo-pagination__link zo--round">
                <span class="zo-sr">Next</span>
                <span class="zo-triangle zo-triangle--right"></span>
            </a>
        </li>
    </ul>
</div>

<div class="zo-paginationContainer">
    <ul class="zo-pagination">
        <li class="zo-pagination__item zo-pagination__item--text">
            <span class="zo-pagination__span">
                Previous
            </span>
        </li>
        <li class="zo-pagination__item">
            <span class="zo-pagination__span zo--active">
                1
            </span>
        </li>
        ...
        <li class="zo-pagination__item">
            <a href="#" class="zo-pagination__link zo-pagination__item--text">
                Next
            </a>
        </li>
    </ul>
</div>

<div class="zo-paginationContainer zo--textCenter">
    ...
</div>