<ul class="flat-list pagination">
<li>
<em>Results per page:</em>
<ul class="flat-list per-page-opts">
<li><strong>50</strong></li>
<li><a href="#">100</a></li>
<li><a href="#">250</a></li>
<li><a href="#">500</a></li>
</ul>
</li>
<li>
<em>Go to page: </em>
<ul class="flat-list">
<li><a href="#">First page</a></li>
<li><span>…</span></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><strong>13</strong></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><span>…</span></li>
<li><a href="#">Last page</a></li>
</ul>
</li>
</ul>
<ul class="flat-list pagination">
<li>
<em>Results per page:</em>
<ul class="flat-list per-page-opts">
<li><strong>50</strong></li>
<li><a href="#">100</a></li>
<li><a href="#">250</a></li>
<li><a href="#">500</a></li>
</ul>
</li>
<li>
<em>Go to page: </em>
<ul class="flat-list">
<li><a href="#">First page</a></li>
<li><span>…</span></li>
{{#each pagination-links}}
{{#if current}}
<li><strong>{{page}}</strong></li>
{{else}}
<li><a href="{{url}}">{{page}}</a></li>
{{/if}}
{{/each}}
<li><span>…</span></li>
<li><a href="#">Last page</a></li>
</ul>
</li>
</ul>
{
"pagination-links": [
{
"page": 11,
"url": "#"
},
{
"page": 12,
"url": "#"
},
{
"page": 13,
"url": "#",
"current": true
},
{
"page": 14,
"url": "#"
},
{
"page": 15,
"url": "#"
}
]
}
/**
* Pagination links
*/
@media screen {
.pagination {
display: flex;
padding: 0 0.25em;
}
.pagination > li:first-child {
margin-right: auto;
}
.pagination > li:last-child {
text-align: right;
}
.pagination ul {
margin-top: 0.25em;
}
.pagination ul li {
padding: 0 0.15em;
}
}
@media only screen and (min-width: 26em) {
.pagination ul {
display: inline-flex;
}
}
To be used wherever there will be several pages split up. Most prevalent cases would be the card view or the any table view that might have very large datasets.