BUX Component Development Platform

Pagination 

<nav aria-label="Document pages" class="bux-doc-pagination">
    <div class="bux-doc-pagination__item bux-doc-pagination__item--prev">

        <a class="bux-doc-pagination__link bux-doc-pagination__link--prev" href="#" rel="prev noopener">
            <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 class="bux-doc-pagination__link bux-doc-pagination__link--next" href="#" rel="next noopener">
            <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">
            {% embed '@link' with {
                base_class: "bux-doc-pagination__link bux-doc-pagination__link--prev",
                link_url: previous_page.url,
                attributes: {
                    rel: 'prev'
                }
            } %}
                {% block content %}
                    <div class="bux-doc-pagination__label bux-doc-pagination__label--prev">
                        {{ previous_page.label }}
                    </div>
                {% endblock %}
            {% endembed %}
		</div>
	{% endif %}
	{% if next_page %}
		<div class="bux-doc-pagination__item bux-doc-pagination__item--next">
            {% embed '@link' with {
                base_class: "bux-doc-pagination__link bux-doc-pagination__link--next",
                link_url: next_page.url,
                attributes: {
                    rel: 'next'
                }
            } %}
                {% block content %}
                    <div class="bux-doc-pagination__label bux-doc-pagination__label--next">
                        {{ next_page.label }}
                    </div>
                {% endblock %}
            {% endembed %}
		</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: '#'
  label: Page 3
next_page:
  url: '#'
  label: Page 5
  • Content: 
    .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-light-90;
		background-color: $gray-light-90;
}

	&: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;
}
  • URL: /components/raw/doc-pagination/_doc-pagination.scss
  • Filesystem Path: src/components/doc-pagination/_doc-pagination.scss
  • Size: 1 KB

No notes defined.