<nav aria-label="Document pages" class="bux-doc-pagination">
<div class="bux-doc-pagination__item bux-doc-pagination__item--prev">
<a href="" class="bux-doc-pagination__link bux-doc-pagination__link--prev" rel="prev">
<div class="bux-doc-pagination__label bux-doc-pagination__label--prev">
Page 3
</div>
</a>
</div>
<div class="bux-doc-pagination__item bux-doc-pagination__item--next">
<a href="" class="bux-doc-pagination__link bux-doc-pagination__link--next" rel="next">
<div class="bux-doc-pagination__label bux-doc-pagination__label--next">
Page 5
</div>
</a>
</div>
</nav>
{#
Doc Pagination
Available variables:
- previous_page: Array containing the details of the previous page.
- previous_page.url: URL for the previous page.
- previous_page.label: Label for the previous page.
- next_page: Array containing the details of the next page.
- next_page.url: URL for the next page.
- next_page.label: Label for the next page.
#}
<nav aria-label="Document pages" class="bux-doc-pagination">
{% if previous_page %}
<div class="bux-doc-pagination__item bux-doc-pagination__item--prev">
<a href="{{ previous_page.url }}" class="bux-doc-pagination__link bux-doc-pagination__link--prev" rel="prev">
<div class="bux-doc-pagination__label bux-doc-pagination__label--prev">
{{ previous_page.label }}
</div>
</a>
</div>
{% endif %}
{% if next_page %}
<div class="bux-doc-pagination__item bux-doc-pagination__item--next">
<a href="{{ next_page.url }}" class="bux-doc-pagination__link bux-doc-pagination__link--next" rel="next">
<div class="bux-doc-pagination__label bux-doc-pagination__label--next">
{{ next_page.label }}
</div>
</a>
</div>
{% endif %}
</nav>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
previous_page:
url: null
label: Page 3
next_page:
url: null
label: Page 5
.bux-doc-pagination {
display: flex;
justify-content: space-between;
}
.bux-doc-pagination__item {
width: 50%;
}
.bux-doc-pagination__item--prev {
padding-right: $sp-8;
text-align: left;
}
.bux-doc-pagination__item--next {
padding-left: $sp-8;
text-align: right;
}
.bux-doc-pagination__link {
display: block;
border: 2px solid $gray-light-90;
padding: $sp-24;
font-weight: 600;
text-decoration: none;
&:hover {
border-color: $gray-dark-60;
background-color: $gray-dark-60;
.bux-doc-pagination__label {
color: $white;
&:before,
&:after {
color: $white;
}
}
}
&:focus {
outline: 2px solid $focus;
outline-offset: 1px;
}
}
.bux-doc-pagination__label {
font-size: $ts-base;
line-height: $sp-24;
color: $scarlet;
&:before,
&:after {
font-family: $icon;
font-size: $ts-20;
color: $scarlet;
vertical-align: rem-calc(-4);
}
}
.bux-doc-pagination__label--prev {
&:before {
content: "\f004";
margin-right: $sp-8;
}
}
.bux-doc-pagination__label--next {
&:after {
content: "\f005";
margin-left: $sp-8;
}
}
.bux-doc-pagination__item--next:first-child {
margin-left: auto;
}
No notes defined.