<nav class="pager" aria-label="Pagination">
<div class="pager__prev-container">
<a href="#" class="pager__prev" aria-label="previous page">
<span class="pager__prev-icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark" d="M3.52075 7.83331L8.18742 12.5L6.99992 13.6666L0.333252 6.99998L6.99992 0.333313L8.18742 1.49998L3.52075 6.16665H13.6666V7.83331H3.52075Z" fill="#14516E" />
</svg>
</span>
Prev
</a>
</div>
<ul class="pager__pages">
<li class="pager__page">
<a href="#" class="pager__page-link">1</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">2</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">3</a>
</li>
<li class="pager__page">
<span class="pager__page-current">4</span>
</li>
</ul>
<div class="pager__next-container">
<div class="pager__next pager__next--inactive" aria-hidden="true">
Next
<span class="pager__next-icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark" d="M10.4791 7.83331H0.333252V6.16665H10.4791L5.81242 1.49998L6.99992 0.333313L13.6666 6.99998L6.99992 13.6666L5.81242 12.5L10.4791 7.83331Z" fill="#88C965" />
</svg>
</span>
</div>
</div>
</nav>
<nav class="pager" aria-label="Pagination">
<div class="pager__prev-container">
{% if pagination.prev.link|length %}
<a href="{{pagination.prev.link}}" class="pager__prev" aria-label="previous page">
<span class="pager__prev-icon">
{% include 'bits/icons/arrow-left.twig' %}
</span>
Prev
</a>
{% else %}
<div class="pager__prev pager__prev--inactive" aria-hidden="true">
<span class="pager__prev-icon">
{% include 'bits/icons/arrow-left.twig' %}
</span>
Prev
</div>
{% endif %}
</div>
<ul class="pager__pages">
{% for page in pagination.pages %}
<li class="pager__page">
{% if not page.current and not page.link %}
<span class="pager__page-ellipses">{{page.title}}</span>
{% elseif not page.current %}
<a href="{{page.link}}" class="pager__page-link">{{page.title}}</a>
{% else %}
<span class="pager__page-current">{{page.title}}</span>
{% endif %}
</li>
{% endfor %}
</ul>
<div class="pager__next-container">
{% if pagination.next.link|length %}
<a href="{{pagination.next.link}}" class="pager__next" aria-label="next page">
Next
<span class="pager__next-icon">
{% include 'bits/icons/arrow-right.twig' %}
</span>
</a>
{% else %}
<div class="pager__next pager__next--inactive" aria-hidden="true">
Next
<span class="pager__next-icon">
{% include 'bits/icons/arrow-right.twig' %}
</span>
</div>
{% endif %}
</div>
</nav>
{
"site": {
"name": "E3 Alliance"
},
"pagination": {
"pages": [
{
"title": 1,
"link": "#"
},
{
"title": 2,
"link": "#"
},
{
"title": 3,
"link": "#"
},
{
"title": 4,
"link": "#",
"current": true
}
],
"next": {
"link": ""
},
"prev": {
"link": "#"
}
}
}
breakpoint = 700px
.pager
--buttonBackgroundColor transparent
--buttonBackgroundColorFocused transparent
--buttonBackgroundColorDisabled transparent
--buttonBorderColor transparent
--buttonBorderColorFocused transparent
--buttonBorderColorDisabled transparent
--buttonTextColor sapphire
--buttonTextColorFocused jet
--buttonTextColorDisabled #B8C8D0
--buttonIconColor sapphire
--buttonIconColorFocused jet
--buttonIconColorDisabled #B8C8D0
--pageBackgroundColor cloud
--pageBackgroundColorFocused jet
--pageBorderColor transparent
--pageBorderColorFocused transparent
--pageTextColor sapphire
--pageTextColorFocused white
--currentBackgroundColor sapphire
--currentBorderColor transparent
--currentTextColor white
--ellipsisColor jet
color jet
display flex
font-size 20px
font-weight 500
justify-content space-around
margin-top 48px
text-transform uppercase
+below(breakpoint)
flex-wrap wrap
&__prev-container
&__next-container
flex-shrink 0
margin-bottom 16px
+below(breakpoint)
order 1
&__page-current
background-color var(--currentBackgroundColor)
color var(--currentTextColor)
&__page-link
background-color var(--pageBackgroundColor)
color var(--pageTextColor)
&__page-link
border 2px solid var(--pageBorderColor)
&__page-link
&__page-current
padding 0 8px
&__page-ellipses
color var(--ellipsisColor)
&__prev
&__next
&__page-link
&__page-current
border-radius 50%
display flex
justify-content center
line-height 2em
min-width 2.2em
&__prev
&__next
&__page-current
border 2px solid var(--buttonBorderColor)
a&__prev
a&__next
a&__page-link
text-decoration none
transition all 0.3s
&:active
&:focus
&:hover
background-color var(--pageBackgroundColorFocused)
border 2px solid var(--pageBorderColorFocused)
color var(--pageTextColorFocused)
&__prev
&__next
display flex
align-content center
a&__prev
a&__next
background-color var(--buttonBackgroundColor)
color var(--buttonTextColor)
& ._mark
fill var(--buttonIconColor)
&:active
&:focus
&:hover
background-color var(--buttonBackgroundColorFocused)
color var(--buttonTextColorFocused)
& .pager__next-icon
& .pager__prev-icon
& ._mark
fill var(--buttonIconColorFocused)
&__next
&-icon
margin-left 8px
&__prev
&-icon
margin-right 8px
&__prev--inactive
&__next--inactive
background-color var(--buttonBackgroundColorDisabled)
border-color var(--buttonBorderColorDisabled)
color var(--buttonTextColorDisabled)
& ._mark
fill var(--buttonIconColorDisabled)
&__pages
display flex
flex-wrap wrap
justify-content center
+above(breakpoint)
flex-grow 1
+below(breakpoint)
justify-content center
width 100%
&__page
margin 0 8px 16px 8px
No notes defined.