Pagination
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>