Dependencies
Uses:Pagination
Using the .c-pagination component, we can build up a simple pagination pattern.
<ul class="c-pagination | o-list-inline">
<li class="o-list__item | is-disabled">
<a class="c-pagination__link" href="#">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path d="M10.806 10.817 7.978 8l2.824-2.84-1.41-1.41L5.15 8l4.242 4.23z"/>
</svg>
<span class="u-hidden">Previous</span>
</a>
</li>
<li class="o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#">1</a>
</li>
<li class="o-list__item | u-removed-<bp3">
<span class="c-pagination__link">...</span>
</li>
<li class="o-list__item | is-current">
<a class="c-pagination__link" href="#">2</a>
</li>
<li class="o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#">3</a>
</li>
<li class="o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#">4</a>
</li>
<li class="o-list__item | u-removed-<bp3">
<span class="c-pagination__link">...</span>
</li>
<li class="o-list__item | u-removed-<bp3">
<a class="c-pagination__link" href="#">25</a>
</li>
<li class="o-list__item">
<a class="c-pagination__link" href="#next">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path d="m5.166 10.833 1.417 1.417 4.25-4.241-4.25-4.259L5.17 5.163 8 8.009z"/>
</svg>
<span class="u-hidden">Next</span>
</a>
</li>
</ul>Results Example
Used with the search results, align the next and previous actions to the right of the pagination.
<ul class="c-pagination | o-list-inline | u-w-1/1">
<li class="c-pagination__item | o-list__item | u-removed-upto-bp3">
<button class="c-pagination__link" type="button">1</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-upto-bp3">
<button class="c-pagination__link" type="button">...</button>
</li>
<li class="c-pagination__item | o-list__item">
<button class="c-pagination__link" type="button">3</button>
</li>
<li class="c-pagination__item | o-list__item | is-current">
<button class="c-pagination__link" type="button">4</button>
</li>
<li class="o-list__item | c-pagination__item">
<button class="c-pagination__link" type="button">5</button>
</li>
<li class="o-list__item | c-pagination__item | u-removed-upto-bp3">
<button class="c-pagination__link" type="button">...</button>
</li>
<li class="o-list__item | c-pagination__item | u-removed-upto-bp3">
<button class="c-pagination__link" type="button">175</button>
</li>
<li class="o-list__item | c-pagination__item | u-ml-auto">
<button class="c-pagination__link" type="button">
<span>Prev</span>
</button>
</li>
<li class="o-list__item | c-pagination__item">
<button class="c-pagination__link" type="button">
<span>Next</span>
</button>
</li>
</ul>