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>
{% apply spaceless %}
<ul class="pager__items">
{% if 1 != active %}
<li class="previous">
<a href="#" class="standalone-link back">
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="#" class="standalone-link">
Next
<span class="visually-hidden">page</span>
</a>
</li>
{% endif %}
</ul>
{% endapply %}
</nav>
<nav class="pager" aria-labelledby="pagination_1-32">
<h2 id="pagination_1-32" class="visually-hidden">Pagination</h2>
<ul class="pager__items">
<li class="previous"><a href="#" class="standalone-link back">
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="active"><span class="visually-hidden">Page</span>
2
</li>
<li><a href="#" title="Go to page 3"><span class="visually-hidden">Page</span>
3
</a></li>
<li class="next"><a href="#" class="standalone-link">
Next
<span class="visually-hidden">page</span></a></li>
</ul>
</nav>
{
"total": 3,
"active": 2
}
.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('border-color', 'color-none');
display: flex;
flex: 0 0 auto;
justify-content: center;
min-width: 32px;
padding-right: 7px;
padding-left: 7px;
border: 2px solid;
font-size: .9rem;
line-height: 32px;
text-align: center;
&.spacing {
padding: 0 10px 10px;
line-height: 1;
}
&.active {
@include theme('border-color', 'color-zero', 'pagination-active-color');
@include semi-bold-text;
padding-right: 10px;
padding-left: 10px;
border-bottom: 2px solid;
}
}
a {
@include theme('color', 'color-zero', 'default-text-color');
@include theme('border-color', 'color-none');
@include semi-bold-text;
display: block;
padding: 2px 10px 0;
border-bottom: 2px solid;
background-image: linear-gradient(to bottom,
color('yellow') 0,
color('yellow') 100%);
font-size: inherit;
line-height: inherit;
text-decoration: none;
&:focus,
&:focus-within,
&:focus-visible,
&:hover {
@include theme('color', 'color-zero', 'default-text-color');
}
&:focus,
&:focus-visible {
height: 36px;
border-bottom: 0;
outline: 0;
box-shadow: inset 0 0 0 2px color('gray');
}
&.standalone-link {
&:focus,
&:focus-within,
&:focus-visible,
&:hover {
@include theme('color', 'color-zero', 'pagination-active-color');
@include theme('border-bottom-color', 'color-zero');
}
}
}
.previous,
.next {
display: none;
@include tablet {
display: flex;
}
a {
padding-right: 0;
&::after {
position: absolute;
top: 0;
bottom: 0;
height: 24px;
margin-top: auto;
margin-bottom: auto;
}
}
}
.previous {
a {
margin-right: 0;
}
}
.next {
margin: 0 0 10px;
a {
margin-left: 0;
&::after {
right: -36px;
}
}
}
}
.button {
margin: 20px 0;
}
}