Cornerstone

Pagination: Simple

Pagination Display Logic:

  • When the current page is 1, hide the first and previous buttons.
  • When the current page is equal to the number of total pages, hide the next and last buttons.
  • For the number listing, display up to the page range starting with the current page, followed by an ellipsis and the last page number. Example: 2, 3, 4 … 7
  • If the number listing would be greater than the total number of pages, reverse the order. Example 1 … 5, 6, 7
<nav aria-label="Page navigation">
    <ul class="tcu-pagination _simple tcu-component">
        <!-- Previous Page -->
        <li class="tcu-pagination__item-back">
            <a href="?page=2">
                <span class="tcu-pagination__icon" aria-hidden="true"></span>
                <span class="tcu-pagination__text">Prev</span>
            </a>
        </li>

        <!-- Small Index -->
        <li class="tcu-pagination__index">
            <span>Page <strong>3</strong> of <strong>25</strong></span>
        </li>

        <!-- Next Page -->
        <li class="tcu-pagination__item-forward">
            <a href="?page=4" aria-label="Next">
                <span class="tcu-pagination__text">Next</span>
                <span class="tcu-pagination__icon" aria-hidden="true"></span>
            </a>
        </li>
    </ul>
</nav>