<nav class="pager" aria-label="Pagination">
<div class="pager__prev-container">
<div class="pager__prev pager__prev--inactive" aria-hidden="true">
<span class="pager__prev-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<mask id="mask0_4035_73409" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="20" height="20" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4035_73409)">
<path d="M6.52051 10.8333L11.1872 15.5L9.99968 16.6667L3.33301 9.99999L9.99968 3.33333L11.1872 4.49999L6.52051 9.16666H16.6664V10.8333H6.52051Z" fill="#162F93" />
</g>
</svg>
</span>
<span class="pager__button-text">
Prev
</span>
</div>
</div>
<ul class="pager__pages">
<li class="pager__page">
<span class="pager__page-current">1</span>
</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">
<a href="#" class="pager__page-link">4</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">5</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">6</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">7</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">8</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">9</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">10</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">11</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">12</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">13</a>
</li>
<li class="pager__page">
<a href="#" class="pager__page-link">14</a>
</li>
</ul>
<div class="pager__next-container">
<a href="#" class="pager__next" aria-label="next page">
<span class="pager__button-text">
Next
</span>
<span class="pager__next-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_5509_8875)">
<path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
</g>
</svg>
</span>
</a>
</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/left-arrow.twig" %}
</span>
<span class="pager__button-text">
Prev
</span>
</a>
{% else %}
<div class="pager__prev pager__prev--inactive" aria-hidden="true">
<span class="pager__prev-icon">
{% include "bits/icons/left-arrow.twig" %}
</span>
<span class="pager__button-text">
Prev
</span>
</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">
<span class="pager__button-text">
Next
</span>
<span class="pager__next-icon">
{% include "bits/icons/right-arrow.twig" %}
</span>
</a>
{% else %}
<div class="pager__next pager__next--inactive" aria-hidden="true">
<span class="pager__button-text">
Next
</span>
<span class="pager__next-icon">
{% include "bits/icons/right-arrow.twig" %}
</span>
</div>
{% endif %}
</div>
</nav>
{
"pagination": {
"pages": [
{
"title": 1,
"current": true
},
{
"title": 2,
"link": "#"
},
{
"title": 3,
"link": "#"
},
{
"title": 4,
"link": "#"
},
{
"title": 5,
"link": "#"
},
{
"title": 6,
"link": "#"
},
{
"title": 7,
"link": "#"
},
{
"title": 8,
"link": "#"
},
{
"title": 9,
"link": "#"
},
{
"title": 10,
"link": "#"
},
{
"title": 11,
"link": "#"
},
{
"title": 12,
"link": "#"
},
{
"title": 13,
"link": "#"
},
{
"title": 14,
"link": "#"
}
],
"next": {
"link": "#"
}
}
}
breakpoint = 700px
breakpointSmall = 500px
.pager
--buttonBackgroundColor transparent
--buttonBackgroundColorFocused black
--buttonBackgroundColorDisabled transparent
--buttonBorderColor transparent
--buttonBorderColorFocused black
--buttonBorderColorDisabled grey
--buttonTextColor blue500
--buttonTextColorFocused white
--buttonTextColorDisabled blue500
--buttonIconColor blue500
--buttonIconColorFocused white
--buttonIconColorDisabled grey
--pageBackgroundColor transparent
--pageBackgroundColorFocused black
--pageBorderColor transparent
--pageBorderColorFocused black
--pageTextColor blue500
--pageTextColorFocused white
--currentBackgroundColor blue500
--currentBorderColor blue500
--currentTextColor white
--ellipsisColor blue500
color charcoal
font-size 20px
margin-top 48px
display flex
justify-content space-around
+below(breakpoint)
flex-wrap wrap
&__prev-container
&__next-container
margin-bottom 16px
flex-shrink 0
+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)
&__page-link
&__page-current
@extends $label
border-radius 50%
display flex
justify-content center
line-height 2em
min-width 2.2em
&__page-current
border 2px solid var(--buttonBorderColor)
a&__prev
a&__next
a&__page-link
text-decoration none
transition all 0.3s
a&__page-link
&:active
&:focus
&:hover
background-color var(--pageBackgroundColorFocused)
border 2px solid var(--pageBorderColorFocused)
color var(--pageTextColorFocused)
&__prev
&__next
padding 0 20px
&-icon
display inline-block
transition all 0.3s
transform translate(0, 2px)
a&__prev
a&__next
@extends $label
align-items center
background-color var(--buttonBackgroundColor)
color var(--buttonTextColor)
display flex
& path
fill var(--buttonIconColor)
&__next
&-icon
margin-left 8px
& svg
width 20px
a&__next
&:active
&:focus
&:hover
& .pager__next-icon
transform translate(4px, 2px)
&__prev
&-icon
margin-right 8px
a&__prev
&:active
&:focus
&:hover
& .pager__prev-icon
transform translate(-4px, 2px)
&__prev--inactive
&__next--inactive
@extends $label
color var(--buttonTextColorDisabled)
opacity 0.5
& path
opacity 0.5
&__button-text
+below(breakpoint)
display none
&__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.