Filter Checkbox List @filter-checkbox-list
A optional headline, a list of @filter-checkbox with optional descriptions. Used in @teaser-filter-list.
<form class="filter-checkbox-list js-filter-checkbox-list">
<div class="filter-checkbox-list__inner">
<h3 class="headline headline--3 filter-checkbox-list__headline">H3 Headline Optional</h3>
<div class="filter-checkbox-list__sections">
<div class="filter-checkbox-list__section-description">Filterrubrik 1</div><button class="filter-checkbox-list__dropdown-button filter-checkbox__checkbox" type="button" aria-expanded="false" aria-controls="filter-checkbox-list__dropdown">Filtern</button>
<ul class="filter-checkbox-list__section filter-checkbox-list__section-1">
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox filter-checkbox--all"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-68f9" id="filter-checkbox-a2d8" name="filter-checkbox-a2d8" /><span class="filter-checkbox__checkbox-label">Alle</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-ba3a" checked="checked" id="filter-checkbox-1924" name="filter-checkbox-1924" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-aa8f" id="filter-checkbox-2638" name="filter-checkbox-2638" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-3e3d" id="filter-checkbox-2cf3" name="filter-checkbox-2cf3" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-ff1d" id="filter-checkbox-3845" name="filter-checkbox-3845" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-e4b3" id="filter-checkbox-dafd" name="filter-checkbox-dafd" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-ea07" id="filter-checkbox-a336" name="filter-checkbox-a336" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-86a7" id="filter-checkbox-7b67" name="filter-checkbox-7b67" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-025d" id="filter-checkbox-6a29" name="filter-checkbox-6a29" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-54f4" id="filter-checkbox-5a7c" name="filter-checkbox-5a7c" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
<li class="filter-checkbox-list__section-item">
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-a24b" id="filter-checkbox-a69a" name="filter-checkbox-a69a" /><span class="filter-checkbox__checkbox-label">Filter tag</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>
</li>
</ul>
</div>
<div class="filter-checkbox-list__reset-wrapper"><button class="button button--primary filter__reset-button" type="reset" data-sector="All"><span class="button__text">Zurücksetzen</span></button></div>
</div>
</form>{
"headline": {
"size": 3,
"level": 3,
"text": "H3 Headline Optional\n"
},
"filterReset": {
"text": "Zurücksetzen",
"link": null,
"attr": {
"class": "filter__reset-button",
"data-sector": "All",
"type": "reset"
}
},
"mobileDropdown": "Filtern",
"filterSections": [
{
"description": "Filterrubrik 1",
"items": [
{
"text": "Alle",
"icon": "plus",
"iconSide": "right",
"attr": {
"class": "filter-checkbox--all"
}
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right",
"checked": true
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
},
{
"text": "Filter tag",
"icon": "plus",
"iconSide": "right"
}
]
}
]
}