Design Kit

Pagination

Use pagination to separate long sets of data so that it is easier for a user to consume information.

Examples

Use the class chi-pagination to render a pagination component.

Base

<!-- For light backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a href="#">
    <a href="#" class="chi-button -flat">1</a>
    <a href="#" class="chi-button -flat">2</a>
    <a href="#" class="chi-button -flat -active">3</a>
    <a href="#" class="chi-button -flat">4</a>
    <a href="#" class="chi-button -flat">5</a>
    <a href="#" class="chi-button -flat" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
<!-- For dark backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -light" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a href="#">
    <a href="#" class="chi-button -flat -light">1</a>
    <a href="#" class="chi-button -flat -light">2</a>
    <a href="#" class="chi-button -flat -light -active">3</a>
    <a href="#" class="chi-button -flat -light">4</a>
    <a href="#" class="chi-button -flat -light">5</a>
    <a href="#" class="chi-button -flat -light" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Disabled

Apply the class -disabled to any link to render in a disabled state.

<!-- For light backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -disabled" aria-label="Previous" aria-disabled="true">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a href="#">
    <a href="#" class="chi-button -flat -active">1</a>
    <a href="#" class="chi-button -flat">2</a>
    <a href="#" class="chi-button -flat">3</a>
    <a href="#" class="chi-button -flat">4</a>
    <a href="#" class="chi-button -flat">5</a>
    <a href="#" class="chi-button -flat" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
<!-- For dark backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -light -disabled" aria-label="Previous" aria-disabled="true">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a href="#">
    <a href="#" class="chi-button -flat -light -active">1</a>
    <a href="#" class="chi-button -flat -light">2</a>
    <a href="#" class="chi-button -flat -light">3</a>
    <a href="#" class="chi-button -flat -light">4</a>
    <a href="#" class="chi-button -flat -light">5</a>
    <a href="#" class="chi-button -flat -light" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Additional Sizes

Pagination supports the following sizes: -sm, -md (default), -lg, and -xl.

-sm

-md

-lg

-xl

-sm

-md

-lg

-xl

<!-- For light backgrounds -->
<!-- sm -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -sm" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat -sm">1</a>
    <a href="#" class="chi-button -flat -sm">2</a>
    <a href="#" class="chi-button -flat -sm -active">3</a>
    <a href="#" class="chi-button -flat -sm">4</a>
    <a href="#" class="chi-button -flat -sm">5</a>
    <a href="#" class="chi-button -flat -sm" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

<!-- md -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat">1</a>
    <a href="#" class="chi-button -flat">2</a>
    <a href="#" class="chi-button -flat -active">3</a>
    <a href="#" class="chi-button -flat">4</a>
    <a href="#" class="chi-button -flat">5</a>
    <a href="#" class="chi-button -flat" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

<!-- lg -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -lg" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat -lg">1</a>
    <a href="#" class="chi-button -flat -lg">2</a>
    <a href="#" class="chi-button -flat -lg -active">3</a>
    <a href="#" class="chi-button -flat -lg">4</a>
    <a href="#" class="chi-button -flat -lg">5</a>
    <a href="#" class="chi-button -flat -lg" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

<!-- xl -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -xl" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat -xl">1</a>
    <a href="#" class="chi-button -flat -xl">2</a>
    <a href="#" class="chi-button -flat -xl -active">3</a>
    <a href="#" class="chi-button -flat -xl">4</a>
    <a href="#" class="chi-button -flat -xl">5</a>
    <a href="#" class="chi-button -flat -xl" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

<!-- For dark backgrounds -->
<!-- sm -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -light -sm" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat -light -sm">1</a>
    <a href="#" class="chi-button -flat -light -sm">2</a>
    <a href="#" class="chi-button -flat -light -sm -active">3</a>
    <a href="#" class="chi-button -flat -light -sm">4</a>
    <a href="#" class="chi-button -flat -light -sm">5</a>
    <a href="#" class="chi-button -flat -light -sm" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

<!-- md -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -light" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat -light">1</a>
    <a href="#" class="chi-button -flat -light">2</a>
    <a href="#" class="chi-button -flat -light -active">3</a>
    <a href="#" class="chi-button -flat -light">4</a>
    <a href="#" class="chi-button -flat -light">5</a>
    <a href="#" class="chi-button -flat -light" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

<!-- lg -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -light -lg" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat -light -lg">1</a>
    <a href="#" class="chi-button -flat -light -lg">2</a>
    <a href="#" class="chi-button -flat -light -lg -active">3</a>
    <a href="#" class="chi-button -flat -light -lg">4</a>
    <a href="#" class="chi-button -flat -light -lg">5</a>
    <a href="#" class="chi-button -flat -light -lg" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

<!-- xl -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-button-group">
    <a href="#" class="chi-button -flat -light -xl" aria-label="Previous">
      <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="chi-button -flat -light -xl">1</a>
    <a href="#" class="chi-button -flat -light -xl">2</a>
    <a href="#" class="chi-button -flat -light -xl -active">3</a>
    <a href="#" class="chi-button -flat -light -xl">4</a>
    <a href="#" class="chi-button -flat -light -xl">5</a>
    <a href="#" class="chi-button -flat -light -xl" aria-label="Next">
      <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon