<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.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()