Developers
Authorization
API Resources
NL Interpreter
Search
Benti
Refinement List
Refinement List
The Refinement List component header, .inbenta-search-filters__header, contains a .inbenta-search-filters__clean element, allowing users all the active filters ().
Every filter group is nested inside a .inbenta-search-filters__group element. It has two elements:
- A group name header in
.inbenta-search-filters__group__header. It has three elements:- The title of the group:
.inbenta-search-filters__group__title. - The button to minimize the filters group:
.group__action--minimize. - The button to maximize the filters group:
.group__action--maximize.
- The title of the group:
- A filter
valuenested inside.inbenta-search-filters__values. It has three elements:- A label:
.value__label. - An input box to select the filter:
.value__checkbox. When a filter is checked, the class.value--activeis added. - A counter:
.value__badge.
- A label:
Component image
HTML structure
<div class="inbenta-search-filters">
<div class="inbenta-search-filters__header">
<div class="header__title">FILTERS</div>
<div class="header__actions">
<i class="header__actions--clean inbenta-search-icon"></i>
<button class="inbenta-search-icon header__actions--maximize"></button>
</div>
</div>
<div class="inbenta-search-filters__group">
<div class="group__header">
<div class="group__title">
Title of group of filters
</div>
<i class="group__action group__action--minimize inbenta-search-icon"></i>
</div>
<div class="inbenta-search-filters__values">
<div class="value">
<label class="value__label">
<input class="inbenta-search-checkbox value__checkbox inbenta-search-icon">
</label>
<div class="value__label">
<label class="value__label">
Filter
<small class="value__badge"> 100 </small>
</label>
</div>
</div>
</div>
</div>
...
<button class="inbenta-search-button--secondary inbenta-search-filters__more-values">Show more</button>
</div>CSS editable properties
| Class | Css |
|---|---|
.inbenta-search-filters |
position, height, padding, background, border, box-shadow |
.inbenta-search-filters__header |
structure, font, line-height, color, letter-spacing |
.inbenta-search-filters__header .header__title |
structure, font, line-height, color, letter-spacing |
.inbenta-search-filters .header__actions |
structure, font, line-height, color, letter-spacing |
.inbenta-search-filters__header .header__actions--clean |
color, pseudo-class(before): font, content |
.header__actions--maximize / header__actions--minimize |
color, pseudo-class(before): font, content |
.inbenta-search-filters__group .group__header |
This element is strictly structural |
.inbenta-search-filters__group .group__title |
font, color, word-break |
.group__action .group__action--minimize, .group__action .group__action--maximize |
padding, color, pseudo-class(before): font, content |
.inbenta-search-filters .value value--active value__check |
background, border, pseudo-class(before): font, content |
.inbenta-search-filters .value__check |
border |
.inbenta-search-filters .values__label |
font, color |
.inbenta-search-filters__more-values |
padding, background, border, text-align, font, color, line-height, pseudo-class(hover): color |