Cornerstone

Pagination: Default

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 tcu-component">
        <!-- First and Previous -->
        <li class="tcu-pagination__item-back">
            <a href="?page=1">
                <span class="tcu-pagination__icon _double" aria-hidden="true"></span>
                <span class="tcu-pagination__text">First</span>
            </a>
        </li>
        <li class="tcu-pagination__item-back tcu-pagination__small">
            <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 tcu-pagination__small">
            <span>Page <strong>3</strong> of <strong>25</strong></span>
        </li>
        <!-- Current Page -->
        <li class="active">
            <span>3<span class="tcu-visuallyhidden">Current Page</span></span>
        </li>

        <li>
            <a href="?page=4">4</a>
        </li>
        <li>
            <a href="?page=5">5</a>
        </li>

        <li>
            <a href="?page=6">
                <span>⋅⋅⋅</span>
            </a>
        </li>

        <!-- Last Page -->
        <li>
            <a href="?page=25">25</a>
        </li>
        <!-- Next and Last -->
        <li class="tcu-pagination__item-forward tcu-pagination__small">
            <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>
        <li class="tcu-pagination__item-forward">
            <a href="?page=25" aria-label="Last">
                <span class="tcu-pagination__text">Last</span>
                <span class="tcu-pagination__icon _double" aria-hidden="true"></span>
            </a>
        </li>
    </ul>
</nav>