Provides styles for pagination.
Overview
Pagination is used for pages that contain contents (i.e. reviews,
article summaries, etc) that exceeds the length of a single view page.
The pagination is styled using the .pagination class at the root element.
It is highly recommended to use an <ul> element as the root element.
The pagination requires some extra markup to support both mobile and desktop
version without requiring any Javascript intervention.
<ul class="pagination">
<li class="pagination__item large-hidden">
<a href="" class="pagination__previous"></a>
</li>
<li class="pagination__item">
<span class="pagination__link active">1</span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">2</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">3</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">4</a>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">5</a>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__link">5</span>
</li>
<li class="pagination__item hidden large-hidden">
<a href="" class="pagination__next"></a>
</li>
</ul>
First page
When on first page, the previous arrow should not be visible.
The previous and next arrows are styled using the .pagination__previous
and .pagination__next respectively and should always be present to
properly work for mobile size. Then in this example the previous arrow markup
is present but it is hidden using the class .large-hidden.
<ul class="pagination">
<li class="pagination__item large-hidden">
<a href="" class="pagination__previous"></a>
</li>
<li class="pagination__item">
<span class="pagination__link active">1</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">2</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">3</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">4</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">5</a>
</li>
<li class="pagination__item">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">10</a>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__link">10</span>
</li>
<li class="pagination__item">
<a href="" class="pagination__next"></a>
</li>
</ul>
Below page 5
The pagination page items are styled using the pagination__link class.
As well as all other items, page items must be wrapped in an element with
.pagination__item class. It is higly recommended to use an <li> element.
The pagination link items are hidden on mobile using the .mobile-hidden
class. An ellipsis element with pagination__ellipsis class must always
be included before the last page. It will be always visible for mobile but
visible for desktop only when there are more than 4 pages to final page.
<ul class="pagination">
<li class="pagination__item">
<a href="" class="pagination__previous"></a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">1</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">2</a>
</li>
<li class="pagination__item">
<span class="pagination__link active">3</span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">4</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">5</a>
</li>
<li class="pagination__item">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">10</a>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__link">10</span>
</li>
<li class="pagination__item">
<a href="" class="pagination__next"></a>
</li>
</ul>
Above page 5
After reach the fifth page, another ellipsis element must be included after
the first page item. It will be hidden for mobile using the .mobile-hidden
class. Another required element is a duplicated last page item without using
an <a> element but an <span> instead. It will be hidden for desktop
using the .large-hidden class. This way, we make possible that the last
page item will not be click-able on mobile.
<ul class="pagination">
<li class="pagination__item">
<a href="" class="pagination__previous"></a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">1</a>
</li>
<li class="pagination__item small-hidden">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">4</a>
</li>
<li class="pagination__item">
<span class="pagination__link active">5</span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">6</a>
</li>
<li class="pagination__item">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">10</a>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__link">10</span>
</li>
<li class="pagination__item">
<a href="" class="pagination__next"></a>
</li>
</ul>
Last pages
When there are less than four pages to reach the final page, the trailing
ellipsis element (the one before the last page) must be hidden for desktop
using the .large-hidden class. It will still be shown for mobile.
<ul class="pagination">
<li class="pagination__item">
<a href="" class="pagination__previous"></a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">1</a>
</li>
<li class="pagination__item small-hidden">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">6</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">7</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">8</a>
</li>
<li class="pagination__item">
<span class="pagination__link active">9</span>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">10</a>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__link">10</span>
</li>
<li class="pagination__item">
<a href="" class="pagination__next"></a>
</li>
</ul>
Last page
When on last page, the next arrow should not be visible for desktop using the
.large-hidden class. It will still be shown for mobile. Another requirement
is that the trailing ellipsis element must be placed in between both last
page items (the one visible on desktop and the one visible on mobile, placed
in that order) in order to properly work for mobile.
<ul class="pagination">
<li class="pagination__item">
<a href="" class="pagination__previous"></a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">1</a>
</li>
<li class="pagination__item small-hidden">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">6</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">7</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">8</a>
</li>
<li class="pagination__item small-hidden">
<a href="" class="pagination__link">9</a>
</li>
<li class="pagination__item">
<span class="pagination__link active">10</span>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__ellipsis"></span>
</li>
<li class="pagination__item large-hidden">
<span class="pagination__link">10</span>
</li>
<li class="pagination__item large-hidden">
<a href="" class="pagination__next"></a>
</li>
</ul>
Download
Get a bundle with all pagination styles.
Download
<p>Get a bundle with all pagination styles.</p>
<a href="/styles/molecules/pagination.css" download="cs-pagination.css" target="_blank" class="btn btn--primary">Download</a>