<footer>
<nav class="c-pagination">
<ul class="c-pagination__list">
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">1</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">2</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="is-current c-pagination__link">3</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">4</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">5</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">6</a>
</li>
</ul>
</nav>
</footer>
<footer>
<nav class="c-pagination">
<ul class="c-pagination__list">
{{#each pages }}
<li class="c-pagination__item">
<a href="#0" class="{{#if current}}is-current {{/if}}c-pagination__link">{{page.number}}</a>
</li>
{{/each}}
</ul>
</nav>
</footer>
{
"pages": [
{
"page": {
"number": 1
}
},
{
"page": {
"number": 2
}
},
{
"page": {
"number": 3
},
"current": "yes"
},
{
"page": {
"number": 4
}
},
{
"page": {
"number": 5
}
},
{
"page": {
"number": 6
}
}
]
}
.c-pagination__list {
display: flex;
}
.c-pagination__item {
margin: 0 $space-xs;
list-style: none;
&:first-child {
margin-left: 0;
}
}
.c-pagination__link {
padding: $space-xs;
border-radius: $global-radius;
@include hocus() {
background-color: $color-grey-100;
text-decoration: none;
}
&.is-current {
color: $color-white;
font-weight: 600;
background-color: $color-link;
@include hocus() {
cursor: default;
}
}
}
There are no notes for this item.