<div class="pagination" data-gridspan="12">
    <div class="grid__row">
        <div class="grid__column" data-gridspan="12 M2">
            <span class="pagination__pages-total">Page 1 of 43</span>
        </div>
        <div class="grid__column" data-gridspan="12 M6">
            <ol class="pagination__list">
                <li class="pagination__item">
                    <a class="pagination__link pagination__link--previous" href="#"><img class="menu-icon" src="/assets/icons/arrow-left-grey.svg" onerror="this.src='/assets/icons/arrow-left-grey.png';this.onerror=null;"></a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link" href="#">1</a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link pagination__link--active" href="#">2</a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link" href="#">3</a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link" href="#">4</a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link" href="#">5</a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link" href="#">6</a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link" href="#">7</a>
                </li>
                <li class="pagination__item">
                    <a class="pagination__link pagination__link--next" href="#"><img class="menu-icon" src="/assets/icons/arrow-right-grey.svg" onerror="this.src='/assets/icons/arrow-right-grey.png';this.onerror=null;"></a>
                </li>
            </ol>
        </div>
        <div class="grid__column" data-gridspan="12 M4">
            <ol class="pagination__data">
                <li class="pagination__results-total pagination__item">100 Results</li>
                <li class="pagination__item pagination__results-filter"><a href="#">20</a></li>
                <li class="pagination__item pagination__results-filter"><a href="#">50</a></li>
                <li class="pagination__item pagination__results-filter"><a href="#">100</a></li>
            </ol>
        </div>
    </div>
</div>
<div class="pagination" data-gridspan="12">
	<div class="grid__row">
		<div class="grid__column" data-gridspan="12 M2">
			<span class="pagination__pages-total">Page 1 of 43</span>
		</div>
		<div class="grid__column" data-gridspan="12 M6">
			<ol class="pagination__list">
				<li class="pagination__item">
				<a class="pagination__link pagination__link--previous" href="#"><img class="menu-icon" src="/assets/icons/arrow-left-grey.svg" onerror="this.src='/assets/icons/arrow-left-grey.png';this.onerror=null;"></a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link" href="#">1</a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link pagination__link--active" href="#">2</a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link" href="#">3</a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link" href="#">4</a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link" href="#">5</a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link" href="#">6</a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link" href="#">7</a>
				</li>
				<li class="pagination__item">
				<a class="pagination__link pagination__link--next" href="#"><img class="menu-icon" src="/assets/icons/arrow-right-grey.svg" onerror="this.src='/assets/icons/arrow-right-grey.png';this.onerror=null;"></a>
				</li>
			</ol>
		</div>
		<div class="grid__column" data-gridspan="12 M4">
			<ol class="pagination__data">
				<li class="pagination__results-total pagination__item">100 Results</li>
				<li class="pagination__item pagination__results-filter"><a href="#">20</a></li>
				<li class="pagination__item pagination__results-filter"><a href="#">50</a></li>
				<li class="pagination__item pagination__results-filter"><a href="#">100</a></li>
			</ol>
		</div>
	</div>
</div>
/* No context defined for this component. */
.pagination {
    display: block;
    padding: 1em;
    margin-bottom: 1em;
    background-color: $white;
}
.pagination__list {
    display: inline-block;
    vertical-align: bottom;
     @include mq($from: small) {
        text-align: center;
    }
}
.pagination__item {
	display: inline-block;
    vertical-align: bottom;
}

.pagination__link {
    display: inline-block;
    text-decoration: none;
    color: $grey--superdark;
    padding: 0 0.25em ;
    @include rem2px(font-size, 1.4);
}
.pagination__link--previous,
.pagination__link--next {
    img {
        width: 16px;
        height: 14px; 
        display: block;
        margin-bottom: -2px;
    }
    
}
.pagination__link--previous {
    padding-left: 0;
}
.pagination__link--active {
    color: $grey--dark;
}
.pagination__data {
    display: inline-block;
    vertical-align: bottom;
    font-weight: bold;
    @include mq($until: small) {
        margin-top: 1em;
    }
    @include mq($from: small) {
        text-align: right;
    }
    
}
.pagination__pages-total {
    color: $grey--superdark;
    display: inline-block;
    vertical-align: bottom;
    font-weight: bold;
     @include mq($until: small) {
        margin-bottom: 1em;
     }
}
.pagination__results-filter {
    a {
        padding: 0 0.25em;
        color: $grey--superdark;
    }
    &:before {
        content: '';
        height: 10px;
        width: 1px;
        border-left: 1px solid $grey--dark;
        display: inline-block;
    }
}

There are no notes for this item.