<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 class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z" />
</svg>
</span>
Previous
</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>
</ul>
<div class="pager__next-container">
<a href="#" class="pager__next" aria-label="next page">
Next
<span class="pager__next-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
</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-chevron.twig' %}
</span>
Previous
</a>
{% else %}
<div class="pager__prev pager__prev--inactive" aria-hidden="true">
<span class="pager__prev-icon">
{% include 'bits/icons/left-chevron.twig' %}
</span>
Previous
</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/right-chevron.twig' %}
</span>
</a>
{% else %}
<div class="pager__next pager__next--inactive" aria-hidden="true">
Next
<span class="pager__next-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
</div>
{% endif %}
</div>
</nav>
{
"pagination": {
"pages": [
{
"title": 1,
"link": "#",
"current": true
},
{
"title": 2,
"link": "#"
},
{
"title": 3,
"link": "#"
},
{
"title": 4,
"link": "#"
}
],
"next": {
"link": "#"
}
}
}
breakpoint = 700px
.pager
--buttonBackgroundColor transparent
--buttonBackgroundColorFocused charcoal
--buttonBackgroundColorDisabled transparent
--buttonBorderColor charcoal
--buttonBorderColorFocused charcoal
--buttonBorderColorDisabled grey
--buttonTextColor charcoalLight
--buttonTextColorFocused white
--buttonTextColorDisabled grey
--buttonIconColor illiniOrange
--buttonIconColorFocused white
--buttonIconColorDisabled grey
--pageBackgroundColor cloud
--pageBackgroundColorFocused charcoal
--pageBorderColor charcoal
--pageBorderColorFocused charcoal
--pageTextColor charcoal
--pageTextColorFocused white
--currentBackgroundColor charcoal
--currentBorderColor charcoal
--currentTextColor white
--ellipsisColor charcoal
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)
&__prev
&__next
&__page-link
&__page-current
border-radius 8px
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
padding 0 20px
&-icon
display inline-block
transition all 0.3s
transform translate(0, 2px)
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
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
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.