Pager
The Basic Pager contains Previous and Next buttons with a list of ennumerated pages. The Load More variant contains a single button
.pager--load-more
Ajax pager.
{{ attach_library('h4h_theme/pager') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{% if modifier_class == 'pager--load-more' %}
<ul class="js-pager__items pager--container {{ modifier_class }}">
<li class="pager__item">
<a href="{{ ajax_url }}" rel="next" class="btn btn--secondary btn--large">{{ ajax_desc }}</a>
</li>
</ul>
{% else %}
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<ul class="js-pager__items pager--container">
<li class="pager__item pager__item--basic pager__item--previous">
<a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev">{{ icons.get('arrowright') }}</a>
</li>
{% for key, item in items.pages %}
<li class="pager__item pager__item--basic {{ current == key ? ' is-active' : '' }}">
{% if current == key %}
{% set title = 'Current page'|t %}
{% else %}
{% set title = 'Go to page @key'|t({ '@key': key }) %}
{% endif %}
<a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }}>
<span class="visually-hidden">
{{ current == key ? 'Current page'|t : 'Page'|t }}
</span>
{{- key -}}
</a>
</li>
{% endfor %}
<li class="pager__item pager__item--basic pager__item--next">
<a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"}}>{{ icons.get('arrowright') }}</a>
</li>
</ul>
</nav>
{% endif %}