Use pagination to divide the content on overview pages with a big amount of content into multiple pages.
When using pagination, the pagination component shows the number of pages, the current page and links to all other pages, in particular the first page, the last page, the previous page and the next page. The pagination component is used on overview pages and on filter pages.
Do not use the pagination component (or hide it) when the content on a overview pages is not divided or does not need to be divided into multiple pages.
Do not use the pagination component on detail pages.
In general, do not use the pagination component for other uses than pagination.
The pagination component consists of the following required elements:
Depending on the available width, the number of pages and what the current page is at a certain point, the elements are shown or hidden in a certain way. See the examples for more context.
<nav class="pager" aria-labelledby="pagination_1-{{ total ~ active }}">
<h2 id="pagination_1-{{ total ~ active }}" class="visually-hidden">Pagination</h2>
{% spaceless %}
<ul class="pager__items">
{% if 1 != active %}
<li class="previous">
<a href="#" class="previous">
Previous
<span class="visually-hidden">page</span>
</a>
</li>
{% endif %}
{% if 1 == active %}
<li class="active">
<span class="visually-hidden">Page</span>
{{ 1 }}
</li>
{% else %}
<li>
<a href="#" title="Go to page {{ 1 }}">
<span class="visually-hidden">Page</span>
{{ 1 }}
</a>
</li>
{% endif %}
{% if active > 3 %}
<li class="spacing">...</li>
{% endif %}
{% if active-1 > 1 and active-1 != total %}
<li class="prev--number">
<a href="#" title="Go to page {{ active-1 }}">
<span class="visually-hidden">Page</span>
{{ active-1 }}
</a>
</li>
{% endif %}
{% if active != 1 and active != total %}
<li class="active">
<span class="visually-hidden">Page</span>
{{ active }}
</li>
{% endif %}
{% if active+1 < total %}
<li class="next--number">
<a href="#" title="Go to page {{ active+1 }}">
<span class="visually-hidden">Page</span>
{{ active+1 }}
</a>
</li>
{% endif %}
{% if total - active > 2 %}
<li class="spacing">...</li>
{% endif %}
{% if total == active %}
<li class="active">
<span class="visually-hidden">Page</span>
{{ total }}
</li>
{% else %}
<li>
<a href="#" title="Go to page {{ total }}">
<span class="visually-hidden">Page</span>
{{ total }}
</a>
</li>
{% endif %}
{% if total != active %}
<li class="next">
<a href="#">
Next
<span class="visually-hidden">page</span>
</a>
</li>
{% endif %}
</ul>
{% endspaceless %}
</nav>
<nav class="pager" aria-labelledby="pagination_1-55555555">
<h2 id="pagination_1-55555555" class="visually-hidden">Pagination</h2>
<ul class="pager__items">
<li class="previous"><a href="#" class="previous">
Previous
<span class="visually-hidden">page</span></a></li>
<li><a href="#" title="Go to page 1"><span class="visually-hidden">Page</span>
1
</a></li>
<li class="spacing">...</li>
<li class="prev--number"><a href="#" title="Go to page 5554"><span class="visually-hidden">Page</span>
5554
</a></li>
<li class="active"><span class="visually-hidden">Page</span>
5555
</li>
</ul>
</nav>
{
"total": 5555,
"active": 5555
}
.pager {
display: flex;
flex-wrap: wrap;
justify-content: center;
@include tablet {
justify-content: flex-end;
}
ul {
display: flex;
flex: 1;
flex-basis: 100%;
align-items: center;
justify-content: center;
margin: 0;
list-style: none;
@include tablet {
flex-basis: auto;
justify-content: flex-start;
}
li {
@include theme('color', 'color-primary', 'link-color');
display: flex;
flex: 0 0 auto;
justify-content: center;
min-width: 1.6rem;
text-align: center;
a {
&:hover,
&:focus {
@include theme('color', 'color-tertiary', 'pagination-active-color');
}
}
}
a,
li.active {
@include reset-link-background;
@include bold-text;
padding-right: .4rem;
padding-left: .4rem;
font-size: .8rem;
line-height: 1.2;
@include phablet {
padding-right: 1rem;
padding-left: 1rem;
font-size: 1rem;
}
}
li.spacing {
min-width: 1rem;
padding: .3rem;
}
.active {
@include theme('color', 'color-tertiary', 'pagination-active-color');
position: relative;
padding-top: .3rem;
padding-bottom: .3rem;
&::after {
@include theme('background-color', 'color-primary', 'link-color');
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 1.2rem;
height: 2px;
margin: auto;
content: '';
}
}
.previous,
.next {
display: none;
@include tablet {
display: flex;
}
a {
display: inline-flex;
align-items: center;
margin-left: 0;
padding: 0 1rem;
font-size: .9rem;
text-decoration: none;
&:hover,
&:focus {
@include theme('color', 'color-tertiary', 'pagination-active-color');
background: transparent;
}
}
}
.next {
a {
@extend %a-arrow-animation;
@include icon(arrow-right, after);
padding-right: 0;
&::after {
margin-right: -.2rem;
padding-right: .2rem;
}
}
}
.previous {
a {
@extend %a-arrow-animation--left;
@include icon(arrow-left, after);
flex-direction: row-reverse;
padding-left: 0;
&::after {
margin-left: -.2rem;
padding-right: .2rem;
padding-left: .4rem;
}
}
}
}
.button {
margin: 1rem 0;
}
}