Pagination

Use pagination to separate long sets of data so that it is easier for a user to consume information.Use the class a-pagination to render a pagination component.

Base

<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a href="#">
    <a href="#" class="a-btn">1</a>
    <a href="#" class="a-btn">2</a>
    <a href="#" class="a-btn">3</a>
    <a href="#" class="a-btn">4</a>
    <a href="#" class="a-btn">5</a>
    <a href="#" class="a-btn" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Pill

Use the -pill modifier class to render Pagination with a more pronounced border-radius.

<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup -pill">
    <a href="#" class="a-btn" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn">1</a>
    <a href="#" class="a-btn">2</a>
    <a href="#" class="a-btn">3</a>
    <a href="#" class="a-btn">4</a>
    <a href="#" class="a-btn">5</a>
    <a href="#" class="a-btn" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

States

Pagination links are customizable for different circumstances. Use -active to indicate the current page, and -disabled for unclickable links (i.e. beginning or end of the list).

Active
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn">1</a>
    <a href="#" class="a-btn">2</a>
    <a href="#" class="a-btn -active">3</a>
    <a href="#" class="a-btn">4</a>
    <a href="#" class="a-btn">5</a>
    <a href="#" class="a-btn" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
Disabled
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -disabled" aria-disabled="true">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn">1</a>
    <a href="#" class="a-btn">2</a>
    <a href="#" class="a-btn">3</a>
    <a href="#" class="a-btn">4</a>
    <a href="#" class="a-btn">5</a>
    <a href="#" class="a-btn" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Additional Sizes

Pagination supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

-sm

-md

-lg

-xl

<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -sm" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn -sm">1</a>
    <a href="#" class="a-btn -sm">2</a>
    <a href="#" class="a-btn -sm">3</a>
    <a href="#" class="a-btn -sm">4</a>
    <a href="#" class="a-btn -sm">5</a>
    <a href="#" class="a-btn -sm" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -md" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn -md">1</a>
    <a href="#" class="a-btn -md">2</a>
    <a href="#" class="a-btn -md">3</a>
    <a href="#" class="a-btn -md">4</a>
    <a href="#" class="a-btn -md">5</a>
    <a href="#" class="a-btn -md" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -lg" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn -lg">1</a>
    <a href="#" class="a-btn -lg">2</a>
    <a href="#" class="a-btn -lg">3</a>
    <a href="#" class="a-btn -lg">4</a>
    <a href="#" class="a-btn -lg">5</a>
    <a href="#" class="a-btn -lg" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -xl" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn -xl">1</a>
    <a href="#" class="a-btn -xl">2</a>
    <a href="#" class="a-btn -xl">3</a>
    <a href="#" class="a-btn -xl">4</a>
    <a href="#" class="a-btn -xl">5</a>
    <a href="#" class="a-btn -xl" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>