Basic Pagination
Page1 of 6
<div class="c-pagination u-d-flex u-f-align-center u-p-vert-sm">
<nav class="c-pagination__nav" aria-label="Pagination Navigation" aria-describedby="c-pagination__page-index">
<ul class="o-list-inline u-m-b-0">
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__prev c-pagination__prev--disabled" aria-disabled="true">
<span class="u-visually-hidden">Previous Page</span>
<span class="o-svg-icon o-svg-icon--lg">
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 320 512">
<path
d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" />
</svg>
</span>
</a>
</li>
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__link active" aria-current="page"><span class="u-visually-hidden">Page</span>1</a>
</li>
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__link">
<span class="u-visually-hidden">Page</span> 2</a>
</li>
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__link">
<span class="u-visually-hidden">Page</span> 3</a>
</li>
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__link">
<span class="u-visually-hidden">Page</span> 4</a>
</li>
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__link">
<span class="u-visually-hidden">Page</span> 5</a>
</li>
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__link">
<span class="u-visually-hidden">Page</span> 6</a>
</li>
<li class="c-pagination__item o-list-inline__item">
<a href="#" class="c-pagination__next">
<span class="u-visually-hidden">Next Page</span>
<span class="o-svg-icon o-svg-icon--lg">
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 320 512">
<path
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
</svg>
</span>
</a>
</li>
</ul>
</nav>
<div class="c-pagination__page-index" id="c-pagination__page-index">
<p class="u-m-b-0"><span class="u-visually-hidden">Page</span><span class="c-pagination__active">1</span> of <span class="c-pagination__total">6</span></p>
</div>
</div>