<nav class="pager">
<ul class="pager__items">
<li class="pager__item pager__item--first">
<a href="#" title="Go to the first page" rel="first">« first</a>
</li>
<li class="pager__item pager__item--prev">
<a href="#" title="Go to the previous page">‹ previous</a>
</li>
<li class="pager__item pager__item--ellipsis" role="presentation">
…
</li>
<li class="pager__item">
<a href="#" title="Current page">5</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 6">6</a>
</li>
<li class="pager__item is-active">
<a href="#" title="Go to page 7">7</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 8">8</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 9">9</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 10">10</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 11">11</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 12">12</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 13">13</a>
</li>
<li class="pager__item pager__item--ellipsis" role="presentation">
…
</li>
<li class="pager__item pager__item--next">
<a href="#" title="Go to the next page" rel="next">next ›</a>
</li>
<li class="pager__item pager__item--last">
<a href="#" title="Go to the last page" rel="last">last »</a>
</li>
</ul>
</nav>
<nav class="pager">
<ul class="pager__items">
<li class="pager__item pager__item--first">
<a href="#" title="Go to the first page" rel="first">« first</a>
</li>
<li class="pager__item pager__item--prev">
<a href="#" title="Go to the previous page">‹ previous</a>
</li>
<li class="pager__item pager__item--ellipsis" role="presentation">
…
</li>
<li class="pager__item">
<a href="#" title="Current page">5</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 6">6</a>
</li>
<li class="pager__item is-active">
<a href="#" title="Go to page 7">7</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 8">8</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 9">9</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 10">10</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 11">11</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 12">12</a>
</li>
<li class="pager__item">
<a href="#" title="Go to page 13">13</a>
</li>
<li class="pager__item pager__item--ellipsis" role="presentation">
…
</li>
<li class="pager__item pager__item--next">
<a href="#" title="Go to the next page" rel="next">next ›</a>
</li>
<li class="pager__item pager__item--last">
<a href="#" title="Go to the last page" rel="last">last »</a>
</li>
</ul>
</nav>
/* No context defined for this component. */
//
// Pagination
//
.pager {
ul {
@extend %list-no-style;
font-size: .8rem;
font-weight: bold;
li {
display: inline;
margin-left: .25rem;
a,
span {
display: inline-block;
padding: .4rem .5rem;
border-radius: $radius-1;
text-decoration: none;
&:hover,
&:focus,
&:active {
background-color: $color-lightest-blue;
}
}
&.is-active {
span,
a {
background-color: $color-orange;
color: $color-white;
}
}
&.pager-ellipsis {
&:hover,
&:focus,
&:active {
background-color: transparent;
}
}
&:first-child {
margin-left: 0;
}
}
}
}
Pagination has a few required elements:
The examples here should give you enough context to implement a pagination in your own website or application.