Skip to main content

Pagination

    Pagination

    Pagination is used to show multiple pages of results or items.

    Links:

    Pagination Numerated

    <div class="c-pagination u-d-flex u-f-align-center u-p-vert-sm">
      <nav class="c-pagination__nav" aria-label="Pagination Navigation" aria-describedby="#c-pagination__page-index">
        <ul class="o-list-inline u-m-b-0">
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__prev c-pagination__prev--disabled" aria-disabled="true">
              <span class="u-visually-hidden">Previous Page</span>
              <span class="o-svg-icon o-svg-icon--lg">
                <svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 320 512">
                  <path
                    d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" />
                </svg>
              </span>
            </a>
          </li>
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__link active" aria-current="Page"><span class="u-visually-hidden">Page</span>1</a>
          </li>
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__link">
            <span class="u-visually-hidden">Page</span> 2</a>
          </li>
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__link">
            <span class="u-visually-hidden">Page</span> 3</a>
          </li>
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__link">
            <span class="u-visually-hidden">Page</span> 4</a>
          </li>
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__link">
            <span class="u-visually-hidden">Page</span> 5</a>
          </li>
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__link">
            <span class="u-visually-hidden">Page</span> 6</a>
          </li>
          <li class="c-pagination__item o-list-inline__item">
            <a href="#" class="c-pagination__next">
              <span class="u-visually-hidden">Next Page</span>
              <span class="o-svg-icon o-svg-icon--lg">
                <svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 320 512">
                  <path
                    d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
                </svg>
              </span>
            </a>
          </li>
        </ul>
      </nav>
      <div class="c-pagination__page-index" id="c-pagination__page-index">
        <p class="u-m-b-0"><span class="u-visually-hidden">Page</span><span class="c-pagination__active">1</span> of <span class="c-pagination__total">9</span></p>
      </div>
    </div>