4.7 Pagination View in a new window
Example
Markup
{% set data = data|default({
"svgUrl":"."
})
%}
<div class="nsw-container p-0">
<nav aria-label="Pagination">
<ul class="nsw-pagination">
<li class="nsw-pagination__item nsw-pagination__item--prev-page">
<a class="nsw-direction-link" href="#">
<span class="nsw-direction-link__text ">
Back <span class="sr-only">of page</span>
</span>
<img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon nsw-icon--rotate-180">
</a>
</li>
<li class="nsw-pagination__item">
<a class="nsw-pagination__link" href="#">
<span class="nsw-pagination__text">
<span class="sr-only">Page </span>1
</span>
</a>
</li>
<li class="nsw-pagination__item">
<a class="nsw-pagination__link" href="#">
<span class="nsw-pagination__text">
<span class="sr-only">Page </span>2
</span>
</a>
</li>
<li class="nsw-pagination__item nsw-pagination__item--is-active">
<a class="nsw-pagination__link is-current" href="#" aria-current="page">
<span class="nsw-pagination__text">
<span class="sr-only">Page </span>3
</span>
</a>
</li>
<li class="nsw-pagination__item">
<a class="nsw-pagination__link" href="#">
<span class="nsw-pagination__text">
<span class="sr-only">Page </span>4
</span>
</a>
</li>
<li class="nsw-pagination__item">
<a class="nsw-pagination__link" href="#">
<span class="nsw-pagination__text">
…
<span class="sr-only">Page 5</span>
</span>
</a>
</li>
<li class="nsw-pagination__item">
<a class="nsw-pagination__link" href="#">
<span class="nsw-pagination__text">
<span class="sr-only">Page </span>12
</span>
</a>
</li>
<li class="nsw-pagination__item nsw-pagination__item--next-page">
<a class="nsw-direction-link" href="#">
<span class="nsw-direction-link__text">
Next <span class="sr-only">page</span>
</span>
<img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon">
</a>
</li>
</ul>
</nav>
</div>