Pagination
List for paginating links. Three elements are expected in the list: A previous page label, a group of page numbers, and a "next page" label.
.c-pagination
<ul class="c-pagination t-links t-uppercase t-lsp-b t-size-xs t-align-center t-weight-bold" aria-label="Pagination">
<li class="t-align-left">
<a href="#">
<span class="c-icon c-icon--baseline c-pagination__icon c-pagination__icon--prev">
<svg aria-hidden="true">
<use xlink:href="#long-arrow-left"></use>
</svg>
</span>
Previous<span class="is-sr-only"> Page</span>
</a>
</li>
<li>
<ul class="l-align-center-children">
<li class="is-hidden-until-bp-m">
<a class="c-pagination__count" href="#" aria-label="Page 1">1</a>
</li>
<li class="is-hidden-until-bp-m">
<a class="c-pagination__count" href="#" aria-label="Page 2">2</a>
</li>
<li class="is-hidden-until-bp-m c-pagination__count" aria-label="You're on page 3">
<span aria-hidden="true"> 3</span>
</li>
<li class="is-hidden-until-bp-m" aria-hidden="true">…</li>
<li class="is-hidden-until-bp-m">
<a class="c-pagination__count" href="#" aria-label="Skip to page 100">100</a>
</li>
</ul>
</li>
<li class="t-align-right">
<a href="#">
Next<span class="is-sr-only"> Page</span>
<span class="c-icon c-icon--baseline c-pagination__icon c-pagination__icon--next">
<svg aria-hidden="true">
<use xlink:href="#long-arrow-right"></use>
</svg>
</span>
</a>
</li>
</ul>
Repo | Count | Location(s) |
---|---|---|
texastribune | 4 | |
state-salaries-draft | 3 |