Pagination

Overview

<nav aria-label="Pagination example">
   <ul class="env-pagination env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Previous</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">4</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">5</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Next</a></li>
   </ul>
</nav>

States

Disabled

<nav aria-label="Pagination example">
   <ul class="env-pagination env-list env-list--horizontal">
      <li class="env-pagination__item">
         <a class="env-pagination__link env-is-disabled" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Next</a></li>
   </ul>
</nav>

Active

<nav aria-label="Pagination example">
   <ul class="env-pagination env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Previous</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item">
         <a class="env-pagination__link env-is-active" href="#">2 <span class="env-assistive-text">Current</span></a>
      </li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Next</a></li>
   </ul>
</nav>

Alignment

Center

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--center env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Previous</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Next</a></li>
   </ul>
</nav>

End

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--end env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Previous</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">Next</a></li>
   </ul>
</nav>

Sizes

--small

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--small env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
   </ul>
</nav>

--large

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--large env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
   </ul>
</nav>

--x-large

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--x-large env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
   </ul>
</nav>

--xx-large

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--xx-large env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
   </ul>
</nav>

--xxx-large

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--xxx-large env-list env-list--horizontal">
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">1</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">2</a></li>
      <li class="env-pagination__item"><a class="env-pagination__link" href="#">3</a></li>
   </ul>
</nav>