<section class="usa-section grid-container">
<h1>Bounded sets</h1>
<h2>Single</h2>
<nav aria-label="pagination single page test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Last page, page 1" aria-current="page">
1
</a>
</li>
</ul>
</nav>
<hr>
<h2>4 total</h2>
<nav aria-label="pagination four items test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 1" aria-current="page">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<hr>
<h2>1 of 7</h2>
<nav aria-label="pagination one of seven test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 1" aria-current="page">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 7">
7
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>5 of 7</h2>
<nav aria-label="pagination five of seven test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 5" aria-current="page">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 7">
7
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>1 of 8</h2>
<nav aria-label="pagination one of eight test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 1" aria-current="page">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 8">
8
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>2 of 8</h2>
<nav aria-label="pagination two of eight test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 2" aria-current="page">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 8">
8
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>4 of 8</h2>
<nav aria-label="pagination four of eight test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 4" aria-current="page">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 8">
8
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>5 of 8</h2>
<nav aria-label="pagination five of eight test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 5" aria-current="page">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 7">
7
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 8">
8
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>6 of 8</h2>
<nav aria-label="pagination six of eight test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 6" aria-current="page">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 7">
7
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 8">
8
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<hr>
<h2>1 of 9</h2>
<nav aria-label="pagination one of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 1" aria-current="page">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 9">
9
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>2 of 9</h2>
<nav aria-label="pagination two of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 2" aria-current="page">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 9">
9
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>4 of 9</h2>
<nav aria-label="pagination four of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 4" aria-current="page">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 9">
9
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>5 of 9</h2>
<nav aria-label="pagination five of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 5" aria-current="page">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 9">
9
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>6 of 9</h2>
<nav aria-label="pagination six of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 6" aria-current="page">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 7">
7
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 8">
8
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 9">
9
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
</section>
<div class="usa-section usa-section--light">
<div class="grid-container">
<nav aria-label="pagination light section test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 9">
9
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 10" aria-current="page">
10
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 11">
11
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 24">
24
</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
<section class="usa-section grid-container">
<h1>Unbounded sets</h1>
<h2>1</h2>
<nav aria-label="unbounded pagination one of seven test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 1" aria-current="page">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>2</h2>
<nav aria-label="unbounded pagination two of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 2" aria-current="page">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>4</h2>
<nav aria-label="unbounded pagination four of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 4" aria-current="page">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>5</h2>
<nav aria-label="unbounded pagination five of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 2">
2
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 3">
3
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 4">
4
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 5" aria-current="page">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 6">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
<h2>6</h2>
<nav aria-label="unbounded pagination six of nine test" class="usa-pagination ">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">
Previous
</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
1
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 5">
5
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 6" aria-current="page">
6
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 7">
7
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 8">
8
</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" role="presentation">
<span>
…
</span>
</li>
<li class="usa-pagination__item usa-pagination__arrow">
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">
Next
</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
</svg>
</a>
</li>
</ul>
</nav>
</section>
No notes defined.
<section class="usa-section grid-container">
<h1>Bounded sets</h1>
<h2>Single</h2>
{% render '@pagination',
{
aria_label: 'pagination single page test',
pagination: {
items: 1,
current: 1
}
},
merge=true
%}
<hr>
<h2>4 total</h2>
{% render '@pagination',
{
aria_label: 'pagination four items test',
pagination: {
items: 4,
current: 1
}
},
merge=true
%}
<hr>
<h2>1 of 7</h2>
{% render '@pagination',
{
aria_label: 'pagination one of seven test',
pagination: {
items: 7,
current: 1
}
},
merge=true
%}
<h2>5 of 7</h2>
{% render '@pagination',
{
aria_label: 'pagination five of seven test',
pagination: {
items: 7,
current: 5
}
},
merge=true
%}
<h2>1 of 8</h2>
{% render '@pagination',
{
aria_label: 'pagination one of eight test',
pagination: {
items: 8,
current: 1
}
},
merge=true
%}
<h2>2 of 8</h2>
{% render '@pagination',
{
aria_label: 'pagination two of eight test',
pagination: {
items: 8,
current: 2
}
},
merge=true
%}
<h2>4 of 8</h2>
{% render '@pagination',
{
aria_label: 'pagination four of eight test',
pagination: {
items: 8,
current: 4
}
},
merge=true
%}
<h2>5 of 8</h2>
{% render '@pagination',
{
aria_label: 'pagination five of eight test',
pagination: {
items: 8,
current: 5
}
},
merge=true
%}
<h2>6 of 8</h2>
{% render '@pagination',
{
aria_label: 'pagination six of eight test',
pagination: {
items: 8,
current: 6
}
},
merge=true
%}
<hr>
<h2>1 of 9</h2>
{% render '@pagination',
{
aria_label: 'pagination one of nine test',
pagination: {
items: 9,
current: 1
}
},
merge=true
%}
<h2>2 of 9</h2>
{% render '@pagination',
{
aria_label: 'pagination two of nine test',
pagination: {
items: 9,
current: 2
}
},
merge=true
%}
<h2>4 of 9</h2>
{% render '@pagination',
{
aria_label: 'pagination four of nine test',
pagination: {
items: 9,
current: 4
}
},
merge=true
%}
<h2>5 of 9</h2>
{% render '@pagination',
{
aria_label: 'pagination five of nine test',
pagination: {
items: 9,
current: 5
}
},
merge=true
%}
<h2>6 of 9</h2>
{% render '@pagination',
{
aria_label: 'pagination six of nine test',
pagination: {
items: 9,
current: 6
}
},
merge=true
%}
</section>
<div class="usa-section usa-section--light">
<div class="grid-container">
{% render '@pagination',
{
aria_label: 'pagination light section test'
},
merge=true
%}
</div>
</div>
<section class="usa-section grid-container">
<h1>Unbounded sets</h1>
<h2>1</h2>
{% render '@pagination',
{
aria_label: 'unbounded pagination one of seven test',
pagination: {
unbounded: true,
items: 7,
current: 1
}
},
merge=true
%}
<h2>2</h2>
{% render '@pagination',
{
aria_label: 'unbounded pagination two of nine test',
pagination: {
unbounded: true,
items: 9,
current: 2
}
},
merge=true
%}
<h2>4</h2>
{% render '@pagination',
{
aria_label: 'unbounded pagination four of nine test',
pagination: {
unbounded: true,
items: 9,
current: 4
}
},
merge=true
%}
<h2>5</h2>
{% render '@pagination',
{
aria_label: 'unbounded pagination five of nine test',
pagination: {
unbounded: true,
items: 9,
current: 5
}
},
merge=true
%}
<h2>6</h2>
{% render '@pagination',
{
aria_label: 'unbounded pagination six of nine test',
pagination: {
unbounded: true,
items: 9,
current: 6
}
},
merge=true
%}
</section>
package:
name: null
version: 2.1.0
uswds:
path: ../../dist