Developers
Authorization
API Resources
NL Interpreter
Search
Benti
Pagination
Pagination
The pagination component is nested in a .inbenta-search-pagination container, which contains several .inbenta-search-pagination__item elements.
These items may include the following special elements:
.inbenta-search-pagination__item--next: Will send you to the next page..inbenta-search-pagination__item--previous: Will send you to the previous page..inbenta-search-pagination__item--first: Will send you to the first page.inbenta-search-pagination__item--last: Will send you to the last page.
They also contain the icons, using the global class .inbenta-search-icon:
Component image
HTML structure
<ul class="inbenta-search-pagination">
<li class="inbenta-search-pagination__item inbenta-search-pagination__item--first">
<a class="inbenta-search-icon" href="#"></a>
</li>
<li class="inbenta-search-pagination__item inbenta-search-pagination__item--previous">
<a class="inbenta-search-icon" href="#"></a>
</li>
<li class="inbenta-search-pagination__item">
<a href="#">1</a>
</li>
<li class="inbenta-search-pagination__item">
<a href="#">2</a>
</li>
<li class="inbenta-search-pagination__item">
<a href="#"> 3</a>
</li>
<li class="inbenta-search-pagination__item inbenta-search-pagination__item inbenta-search-pagination__item--active">
<a href="#">4</a>
</li>
<li class="inbenta-search-pagination__item">
<a href="#">5</a>
</li>
<li class="inbenta-search-pagination__item">
<a href="#">6</a>
</li>
<li class="inbenta-search-pagination__item inbenta-search-pagination__item--next">
<a class="inbenta-search-icon"href="#"></a>
</li>
<li class="inbenta-search-pagination__item inbenta-search-pagination__item--last">
<a class="inbenta-search-icon" href="#"></a>
</li>
</ul>CSS editable properties
| Class | Css |
|---|---|
inbenta-search-pagination |
structure, margin, padding,background, text-align |
inbenta-search-pagination__item |
structure, margin, list-style, pseudo-class(hover) a |
inbenta-search-pagination__item--first .inbenta-search-icon, inbenta-search-pagination__item--previous .inbenta-search-icon, inbenta-search-pagination__item--next .inbenta-search-icon, inbenta-search-pagination__item--last .inbenta-search-icon |
pseudo-class(before), content, font, color |
inbenta-search-pagination__item--active a |
background, color |
inbenta-search-pagination__item a |
padding, border, radius, font, color, text-decoration |