Pagination
<nav class="pagination">
<ul class="pagination-list">
<li class="pagination-item">
<a href="" class="pagination-link">
<i class="iconoir-fast-arrow-left"></i>
</a>
</li>
<li class="pagination-item">
<a href="" class="pagination-link">
<i class="iconoir-nav-arrow-left"></i>
</a>
</li>
<li class="pagination-item is-number">
<a href="" class="pagination-link">1</a>
</li>
<li class="pagination-item is-number pagination-item-active">
<a href="" class="pagination-link">2</a>
</li>
<li class="pagination-item is-number">
<a href="" class="pagination-link">3</a>
</li>
<li class="pagination-item is-number">....</li>
<li class="pagination-item is-number">
<a href="" class="pagination-link">98</a>
</li>
<li class="pagination-item is-number">
<a href="" class="pagination-link">99</a>
</li>
<li class="pagination-item is-number">
<a href="" class="pagination-link">100</a>
</li>
<li class="pagination-item">
<a href="" class="pagination-link">
<i class="iconoir-nav-arrow-right"></i>
</a>
</li>
<li class="pagination-item is-disabled">
<a href="" class="pagination-link">
<i class="iconoir-fast-arrow-right"></i>
</a>
</li>
</ul>
<div class="pagination-meta">
<div class="pagination-meta-label">
Total row(s) 1000. Showing page
<strong>1</strong>
out of
<strong>100</strong>
</div>
<div class="pagination-meta-selection">
<div class="form-field">
<label for="per-page" class="form-label">Per page</label>
<select name="" id="per-page" class="form-select">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
</div>
</div>
</nav>
SASS reference
$pagination-item-font-size: rem(14) !default;
--r-pagination-item-active-background-color: var(--r-color-primary);
--r-pagination-item-color: var(--r-global-font-color);
--r-pagination-item-hover-color: var(--r-global-font-color);
--r-pagination-item-background: transparent;
--r-pagination-item-hover-background: var(--r-color-light);
--r-pagination-item-border-radius: var(--r-global-border-radius);
--r-pagination-item-border-color: var(--r-color-light-darken-15);
--r-pagination-item-font-size: #{$pagination-item-font-size};