<div class="sidebar-layout filter">
{% set modalContent %}
{% include '@form-item' with {
label: "Name",
id: _self.name ~ "-name_id",
input_component: "input",
type: "text",
name: _self.name ~ "-name_name",
field_description: null,
stacked: true
} %}
{% include '@checkboxes' with {
input_component: "input",
type: "checkbox",
label: "Price",
id: _self.name ~ "-price",
modifier: 'stacked',
options: [
{
"label": "Less than €100",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-1"
},
{
"label": "€100 - €249",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-2"
},
{
"label": "€250 - €499",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-3"
},
{
"label": "€500 - €1000",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-4"
},
{
"label": "More than €1000",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-5"
}
]
} %}
{% include '@checkboxes' with {
input_component: "input",
type: "checkbox",
label: "Category",
id: _self.name ~ "-category",
modifier: 'stacked',
options: [
{
"label": "Games",
"name": _self.name ~ "-checkboxgroup",
"id": _self.name ~ "-checkbox-1"
},
{
"label": "Movies",
"name": _self.name ~ "-checkboxgroup",
"id": _self.name ~ "-checkbox-2"
},
{
"label": "Series",
"name": _self.name ~ "-checkboxgroup",
"id": _self.name ~ "-checkbox-3"
},
{
"label": "Books",
"name": _self.name ~ "-checkboxgroup",
"id": _self.name ~ "-checkbox-4"
}
]
} %}
{% include '@checkboxes-with-filter' with {
label: "Activities",
label_optional: "Optional",
label_count: "activity(ies)",
options: checkboxes,
field_description: null,
stacked: true
} %}
{% include '@select' with {
id: 'select',
label: 'Store',
field_description: null,
stacked: true,
input_component: 'input-select',
options: [
{
label: 'Option 1'
},
{
label: 'Option 2'
},
{
optgroup: true,
label: 'Option group',
optgroupoptions: [
{
label: 'Option 3'
},
{
label: 'Option 4'
}
]
}
]
} %}
{% endset %}
{% include "@modal" with {
id: 'filter',
title: 'Filter the results',
title_heading_level: 'h2',
classes: 'sidebar filter-section has-custom-binding modal--fixed-height',
content: modalContent,
actions: '<button type="submit" class="button button-primary filter__submit">Show result</button>',
modal_inner_tag: 'form',
modal_inner_action: '#result'
} %}
<section class="content result-section" id="result">
{% include '@heading' with {
"type": "overview-title",
"heading_text": "Filtercomponent"
} %}
{% include '@text-to-speech-button' %}
<div class="selected-filters">
<h2>You have selected:</h2>
<span :key="filter.key" class="tag filter">
Filter one
<button><span class="visually-hidden">Remove this filter</span></button>
</span>
<span :key="filter.key" class="tag filter">
Filter two
<button><span class="visually-hidden">Remove this filter</span></button>
</span>
<a href="#">Remove all filters</a>
</div>
<div class="filter__result-count">
<h2>We have found 666 results</h2>
<button type="button"
class="button button-secondary icon-filter result__show-filters modal-trigger"
aria-expanded="false"
aria-controls="filter">Filters</button>
</div>
<ul class="filter__results">
{% for key, result in results %}
{% include '@teaser--teaser--wide' with {
"image_ratio": result.image_ratio,
"image_src": result.image_src,
"image_alt_text": result.image_alt_text,
"type": result.type,
"teaser_uid": result.teaser_uid,
"paragraph_text": result.paragraph_text,
"title": result.title,
"link_text": result.link_text,
"link": result.link,
"tag": result.tag,
"tag2": null,
"address_location": null,
"address": null,
"list": null
} %}
{% endfor %}
</ul>
{% include '@pagination' with {
total: 20,
active: 17
}%}
</section>
</div>
<div class="sidebar-layout filter">
<div id="filter" class="modal sidebar filter-section has-custom-binding modal--fixed-height" role="dialog" aria-modal="true" aria-labelledby="filter-title" tabindex="-1">
<form class="modal-inner" action="#result">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close" data-target="filter">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h2 id="filter-title">Filter the results</h2>
<div class="form-item stacked">
<label for="default-name_id">Name
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-name_id" name="default-name_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
<fieldset class="form-item stacked">
<legend>
Price
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-1" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-1">Less than €100</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-2" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-2">€100 - €249</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-3" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-3">€250 - €499</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-4" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-4">€500 - €1000</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-5" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-5">More than €1000</label>
</div>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-item stacked">
<legend>
Category
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-1" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-1">Games</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-2" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-2">Movies</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-3" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-3">Series</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-4" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-4">Books</label>
</div>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-item stacked checkbox-filter">
<legend>
Activities
<span class="label-optional">(Optional)</span>
</legend>
<div class="form-columns">
<div class="form-item-column">
<div id="modal" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close checkbox-filter__close" data-target="modal">
<span>Close</span>
</button>
</div>
<div class="modal-content" tabindex="0">
<h3 id="modal-title">Activities<span class="label-optional">(Optional)</span></h3>
<div class="checkbox-filter__selected"></div>
<div class="form-item">
<label for="checkboxes__filter_id_">Filter the list
below</label>
<div class="form-item checkbox-filter__filter__search-wrapper">
<input type="search" id="checkboxes__filter_id_" class="checkbox-filter__filter">
<p aria-live="polite" aria-atomic="true" class="checkbox-filter__result-wrapper">
<span class="checkbox-filter__result">#</span> filter(s) found
</p>
</div>
</div>
<div class="checkbox-filter__checkboxes">
<h4 class="checkbox-filter__category">Category 9</h4>
<div class="checkbox full-width">
<input type="checkbox" id="category_ 9-" value="category_ 9" class="checkbox" />
<label for="category_ 9-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-199-checkboxes-with-filter" name="checkboxgroup[]" value="199" class="checkbox" />
<label for="checkbox-199-checkboxes-with-filter">Checkbox option 199</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-198-checkboxes-with-filter" name="checkboxgroup[]" value="198" class="checkbox" />
<label for="checkbox-198-checkboxes-with-filter">Checkbox option 198</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-197-checkboxes-with-filter" name="checkboxgroup[]" value="197" class="checkbox" />
<label for="checkbox-197-checkboxes-with-filter">Checkbox option 197</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-196-checkboxes-with-filter" name="checkboxgroup[]" value="196" class="checkbox" />
<label for="checkbox-196-checkboxes-with-filter">Checkbox option 196</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-195-checkboxes-with-filter" name="checkboxgroup[]" value="195" class="checkbox" />
<label for="checkbox-195-checkboxes-with-filter">Checkbox option 195</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-194-checkboxes-with-filter" name="checkboxgroup[]" value="194" class="checkbox" />
<label for="checkbox-194-checkboxes-with-filter">Checkbox option 194</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-193-checkboxes-with-filter" name="checkboxgroup[]" value="193" class="checkbox" />
<label for="checkbox-193-checkboxes-with-filter">Checkbox option 193</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-192-checkboxes-with-filter" name="checkboxgroup[]" value="192" class="checkbox" />
<label for="checkbox-192-checkboxes-with-filter">Checkbox option 192</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-191-checkboxes-with-filter" name="checkboxgroup[]" value="191" class="checkbox" />
<label for="checkbox-191-checkboxes-with-filter">Checkbox option 191</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-190-checkboxes-with-filter" name="checkboxgroup[]" value="190" class="checkbox" />
<label for="checkbox-190-checkboxes-with-filter">Checkbox option 190</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-189-checkboxes-with-filter" name="checkboxgroup[]" value="189" class="checkbox" />
<label for="checkbox-189-checkboxes-with-filter">Checkbox option 189</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-188-checkboxes-with-filter" name="checkboxgroup[]" value="188" class="checkbox" />
<label for="checkbox-188-checkboxes-with-filter">Checkbox option 188</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-187-checkboxes-with-filter" name="checkboxgroup[]" value="187" class="checkbox" />
<label for="checkbox-187-checkboxes-with-filter">Checkbox option 187</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-186-checkboxes-with-filter" name="checkboxgroup[]" value="186" class="checkbox" />
<label for="checkbox-186-checkboxes-with-filter">Checkbox option 186</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-185-checkboxes-with-filter" name="checkboxgroup[]" value="185" class="checkbox" />
<label for="checkbox-185-checkboxes-with-filter">Checkbox option 185</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-184-checkboxes-with-filter" name="checkboxgroup[]" value="184" class="checkbox" />
<label for="checkbox-184-checkboxes-with-filter">Checkbox option 184</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-183-checkboxes-with-filter" name="checkboxgroup[]" value="183" class="checkbox" />
<label for="checkbox-183-checkboxes-with-filter">Checkbox option 183</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-182-checkboxes-with-filter" name="checkboxgroup[]" value="182" class="checkbox" />
<label for="checkbox-182-checkboxes-with-filter">Checkbox option 182</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-181-checkboxes-with-filter" name="checkboxgroup[]" value="181" class="checkbox" />
<label for="checkbox-181-checkboxes-with-filter">Checkbox option 181</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-180-checkboxes-with-filter" name="checkboxgroup[]" value="180" class="checkbox" />
<label for="checkbox-180-checkboxes-with-filter">Checkbox option 180</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-179-checkboxes-with-filter" name="checkboxgroup[]" value="179" class="checkbox" />
<label for="checkbox-179-checkboxes-with-filter">Checkbox option 179</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-178-checkboxes-with-filter" name="checkboxgroup[]" value="178" class="checkbox" />
<label for="checkbox-178-checkboxes-with-filter">Checkbox option 178</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-177-checkboxes-with-filter" name="checkboxgroup[]" value="177" class="checkbox" />
<label for="checkbox-177-checkboxes-with-filter">Checkbox option 177</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-176-checkboxes-with-filter" name="checkboxgroup[]" value="176" class="checkbox" />
<label for="checkbox-176-checkboxes-with-filter">Checkbox option 176</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-175-checkboxes-with-filter" name="checkboxgroup[]" value="175" class="checkbox" />
<label for="checkbox-175-checkboxes-with-filter">Checkbox option 175</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-174-checkboxes-with-filter" name="checkboxgroup[]" value="174" class="checkbox" />
<label for="checkbox-174-checkboxes-with-filter">Checkbox option 174</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-173-checkboxes-with-filter" name="checkboxgroup[]" value="173" class="checkbox" />
<label for="checkbox-173-checkboxes-with-filter">Checkbox option 173</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-172-checkboxes-with-filter" name="checkboxgroup[]" value="172" class="checkbox" />
<label for="checkbox-172-checkboxes-with-filter">Checkbox option 172</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-171-checkboxes-with-filter" name="checkboxgroup[]" value="171" class="checkbox" />
<label for="checkbox-171-checkboxes-with-filter">Checkbox option 171</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-170-checkboxes-with-filter" name="checkboxgroup[]" value="170" class="checkbox" />
<label for="checkbox-170-checkboxes-with-filter">Checkbox option 170</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-169-checkboxes-with-filter" name="checkboxgroup[]" value="169" class="checkbox" />
<label for="checkbox-169-checkboxes-with-filter">Checkbox option 169</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-168-checkboxes-with-filter" name="checkboxgroup[]" value="168" class="checkbox" />
<label for="checkbox-168-checkboxes-with-filter">Checkbox option 168</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-167-checkboxes-with-filter" name="checkboxgroup[]" value="167" class="checkbox" />
<label for="checkbox-167-checkboxes-with-filter">Checkbox option 167</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-166-checkboxes-with-filter" name="checkboxgroup[]" value="166" class="checkbox" />
<label for="checkbox-166-checkboxes-with-filter">Checkbox option 166</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-165-checkboxes-with-filter" name="checkboxgroup[]" value="165" class="checkbox" />
<label for="checkbox-165-checkboxes-with-filter">Checkbox option 165</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-164-checkboxes-with-filter" name="checkboxgroup[]" value="164" class="checkbox" />
<label for="checkbox-164-checkboxes-with-filter">Checkbox option 164</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-163-checkboxes-with-filter" name="checkboxgroup[]" value="163" class="checkbox" />
<label for="checkbox-163-checkboxes-with-filter">Checkbox option 163</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-162-checkboxes-with-filter" name="checkboxgroup[]" value="162" class="checkbox" />
<label for="checkbox-162-checkboxes-with-filter">Checkbox option 162</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-161-checkboxes-with-filter" name="checkboxgroup[]" value="161" class="checkbox" />
<label for="checkbox-161-checkboxes-with-filter">Checkbox option 161</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-160-checkboxes-with-filter" name="checkboxgroup[]" value="160" class="checkbox" />
<label for="checkbox-160-checkboxes-with-filter">Checkbox option 160</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-159-checkboxes-with-filter" name="checkboxgroup[]" value="159" class="checkbox" />
<label for="checkbox-159-checkboxes-with-filter">Checkbox option 159</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-158-checkboxes-with-filter" name="checkboxgroup[]" value="158" class="checkbox" />
<label for="checkbox-158-checkboxes-with-filter">Checkbox option 158</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-157-checkboxes-with-filter" name="checkboxgroup[]" value="157" class="checkbox" />
<label for="checkbox-157-checkboxes-with-filter">Checkbox option 157</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-156-checkboxes-with-filter" name="checkboxgroup[]" value="156" class="checkbox" />
<label for="checkbox-156-checkboxes-with-filter">Checkbox option 156</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-155-checkboxes-with-filter" name="checkboxgroup[]" value="155" class="checkbox" />
<label for="checkbox-155-checkboxes-with-filter">Checkbox option 155</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-154-checkboxes-with-filter" name="checkboxgroup[]" value="154" class="checkbox" />
<label for="checkbox-154-checkboxes-with-filter">Checkbox option 154</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-153-checkboxes-with-filter" name="checkboxgroup[]" value="153" class="checkbox" />
<label for="checkbox-153-checkboxes-with-filter">Checkbox option 153</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-152-checkboxes-with-filter" name="checkboxgroup[]" value="152" class="checkbox" />
<label for="checkbox-152-checkboxes-with-filter">Checkbox option 152</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-151-checkboxes-with-filter" name="checkboxgroup[]" value="151" class="checkbox" />
<label for="checkbox-151-checkboxes-with-filter">Checkbox option 151</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-150-checkboxes-with-filter" name="checkboxgroup[]" value="150" class="checkbox" />
<label for="checkbox-150-checkboxes-with-filter">Checkbox option 150</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-149-checkboxes-with-filter" name="checkboxgroup[]" value="149" class="checkbox" />
<label for="checkbox-149-checkboxes-with-filter">Checkbox option 149</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-148-checkboxes-with-filter" name="checkboxgroup[]" value="148" class="checkbox" />
<label for="checkbox-148-checkboxes-with-filter">Checkbox option 148</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-147-checkboxes-with-filter" name="checkboxgroup[]" value="147" class="checkbox" />
<label for="checkbox-147-checkboxes-with-filter">Checkbox option 147</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-146-checkboxes-with-filter" name="checkboxgroup[]" value="146" class="checkbox" />
<label for="checkbox-146-checkboxes-with-filter">Checkbox option 146</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-145-checkboxes-with-filter" name="checkboxgroup[]" value="145" class="checkbox" />
<label for="checkbox-145-checkboxes-with-filter">Checkbox option 145</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-144-checkboxes-with-filter" name="checkboxgroup[]" value="144" class="checkbox" />
<label for="checkbox-144-checkboxes-with-filter">Checkbox option 144</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-143-checkboxes-with-filter" name="checkboxgroup[]" value="143" class="checkbox" />
<label for="checkbox-143-checkboxes-with-filter">Checkbox option 143</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-142-checkboxes-with-filter" name="checkboxgroup[]" value="142" class="checkbox" />
<label for="checkbox-142-checkboxes-with-filter">Checkbox option 142</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-141-checkboxes-with-filter" name="checkboxgroup[]" value="141" class="checkbox" />
<label for="checkbox-141-checkboxes-with-filter">Checkbox option 141</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-140-checkboxes-with-filter" name="checkboxgroup[]" value="140" class="checkbox" />
<label for="checkbox-140-checkboxes-with-filter">Checkbox option 140</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-139-checkboxes-with-filter" name="checkboxgroup[]" value="139" class="checkbox" />
<label for="checkbox-139-checkboxes-with-filter">Checkbox option 139</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-138-checkboxes-with-filter" name="checkboxgroup[]" value="138" class="checkbox" />
<label for="checkbox-138-checkboxes-with-filter">Checkbox option 138</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-137-checkboxes-with-filter" name="checkboxgroup[]" value="137" class="checkbox" />
<label for="checkbox-137-checkboxes-with-filter">Checkbox option 137</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-136-checkboxes-with-filter" name="checkboxgroup[]" value="136" class="checkbox" />
<label for="checkbox-136-checkboxes-with-filter">Checkbox option 136</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-135-checkboxes-with-filter" name="checkboxgroup[]" value="135" class="checkbox" />
<label for="checkbox-135-checkboxes-with-filter">Checkbox option 135</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-134-checkboxes-with-filter" name="checkboxgroup[]" value="134" class="checkbox" />
<label for="checkbox-134-checkboxes-with-filter">Checkbox option 134</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-133-checkboxes-with-filter" name="checkboxgroup[]" value="133" class="checkbox" />
<label for="checkbox-133-checkboxes-with-filter">Checkbox option 133</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-132-checkboxes-with-filter" name="checkboxgroup[]" value="132" class="checkbox" />
<label for="checkbox-132-checkboxes-with-filter">Checkbox option 132</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-131-checkboxes-with-filter" name="checkboxgroup[]" value="131" class="checkbox" />
<label for="checkbox-131-checkboxes-with-filter">Checkbox option 131</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-130-checkboxes-with-filter" name="checkboxgroup[]" value="130" class="checkbox" />
<label for="checkbox-130-checkboxes-with-filter">Checkbox option 130</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-129-checkboxes-with-filter" name="checkboxgroup[]" value="129" class="checkbox" />
<label for="checkbox-129-checkboxes-with-filter">Checkbox option 129</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-128-checkboxes-with-filter" name="checkboxgroup[]" value="128" class="checkbox" />
<label for="checkbox-128-checkboxes-with-filter">Checkbox option 128</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-127-checkboxes-with-filter" name="checkboxgroup[]" value="127" class="checkbox" />
<label for="checkbox-127-checkboxes-with-filter">Checkbox option 127</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-126-checkboxes-with-filter" name="checkboxgroup[]" value="126" class="checkbox" />
<label for="checkbox-126-checkboxes-with-filter">Checkbox option 126</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-125-checkboxes-with-filter" name="checkboxgroup[]" value="125" class="checkbox" />
<label for="checkbox-125-checkboxes-with-filter">Checkbox option 125</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-124-checkboxes-with-filter" name="checkboxgroup[]" value="124" class="checkbox" />
<label for="checkbox-124-checkboxes-with-filter">Checkbox option 124</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-123-checkboxes-with-filter" name="checkboxgroup[]" value="123" class="checkbox" />
<label for="checkbox-123-checkboxes-with-filter">Checkbox option 123</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-122-checkboxes-with-filter" name="checkboxgroup[]" value="122" class="checkbox" />
<label for="checkbox-122-checkboxes-with-filter">Checkbox option 122</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-121-checkboxes-with-filter" name="checkboxgroup[]" value="121" class="checkbox" />
<label for="checkbox-121-checkboxes-with-filter">Checkbox option 121</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-120-checkboxes-with-filter" name="checkboxgroup[]" value="120" class="checkbox" />
<label for="checkbox-120-checkboxes-with-filter">Checkbox option 120</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-119-checkboxes-with-filter" name="checkboxgroup[]" value="119" class="checkbox" />
<label for="checkbox-119-checkboxes-with-filter">Checkbox option 119</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-118-checkboxes-with-filter" name="checkboxgroup[]" value="118" class="checkbox" />
<label for="checkbox-118-checkboxes-with-filter">Checkbox option 118</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-117-checkboxes-with-filter" name="checkboxgroup[]" value="117" class="checkbox" />
<label for="checkbox-117-checkboxes-with-filter">Checkbox option 117</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-116-checkboxes-with-filter" name="checkboxgroup[]" value="116" class="checkbox" />
<label for="checkbox-116-checkboxes-with-filter">Checkbox option 116</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-115-checkboxes-with-filter" name="checkboxgroup[]" value="115" class="checkbox" />
<label for="checkbox-115-checkboxes-with-filter">Checkbox option 115</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-114-checkboxes-with-filter" name="checkboxgroup[]" value="114" class="checkbox" />
<label for="checkbox-114-checkboxes-with-filter">Checkbox option 114</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-113-checkboxes-with-filter" name="checkboxgroup[]" value="113" class="checkbox" />
<label for="checkbox-113-checkboxes-with-filter">Checkbox option 113</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-112-checkboxes-with-filter" name="checkboxgroup[]" value="112" class="checkbox" />
<label for="checkbox-112-checkboxes-with-filter">Checkbox option 112</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-111-checkboxes-with-filter" name="checkboxgroup[]" value="111" class="checkbox" />
<label for="checkbox-111-checkboxes-with-filter">Checkbox option 111</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-110-checkboxes-with-filter" name="checkboxgroup[]" value="110" class="checkbox" />
<label for="checkbox-110-checkboxes-with-filter">Checkbox option 110</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-19-checkboxes-with-filter" name="checkboxgroup[]" value="19" class="checkbox" />
<label for="checkbox-19-checkboxes-with-filter">Checkbox option 19</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-18-checkboxes-with-filter" name="checkboxgroup[]" value="18" class="checkbox" />
<label for="checkbox-18-checkboxes-with-filter">Checkbox option 18</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-17-checkboxes-with-filter" name="checkboxgroup[]" value="17" class="checkbox" />
<label for="checkbox-17-checkboxes-with-filter">Checkbox option 17</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-16-checkboxes-with-filter" name="checkboxgroup[]" value="16" class="checkbox" />
<label for="checkbox-16-checkboxes-with-filter">Checkbox option 16</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-15-checkboxes-with-filter" name="checkboxgroup[]" value="15" class="checkbox" />
<label for="checkbox-15-checkboxes-with-filter">Checkbox option 15</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-14-checkboxes-with-filter" name="checkboxgroup[]" value="14" class="checkbox" />
<label for="checkbox-14-checkboxes-with-filter">Checkbox option 14</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-13-checkboxes-with-filter" name="checkboxgroup[]" value="13" class="checkbox" />
<label for="checkbox-13-checkboxes-with-filter">Checkbox option 13</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-12-checkboxes-with-filter" name="checkboxgroup[]" value="12" class="checkbox" />
<label for="checkbox-12-checkboxes-with-filter">Checkbox option 12</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-11-checkboxes-with-filter" name="checkboxgroup[]" value="11" class="checkbox" />
<label for="checkbox-11-checkboxes-with-filter">Checkbox option 11</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-10-checkboxes-with-filter" name="checkboxgroup[]" value="10" class="checkbox" />
<label for="checkbox-10-checkboxes-with-filter">Checkbox option 10</label>
</div>
</div>
<div class="checkbox-filter__checkboxes">
<h4 class="checkbox-filter__category">Category 10</h4>
<div class="checkbox full-width">
<input type="checkbox" id="category_ 10-" value="category_ 10" class="checkbox" />
<label for="category_ 10-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-099-checkboxes-with-filter" name="checkboxgroup[]" value="099" class="checkbox" />
<label for="checkbox-099-checkboxes-with-filter">Checkbox option 099</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-098-checkboxes-with-filter" name="checkboxgroup[]" value="098" class="checkbox" />
<label for="checkbox-098-checkboxes-with-filter">Checkbox option 098</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-097-checkboxes-with-filter" name="checkboxgroup[]" value="097" class="checkbox" />
<label for="checkbox-097-checkboxes-with-filter">Checkbox option 097</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-096-checkboxes-with-filter" name="checkboxgroup[]" value="096" class="checkbox" />
<label for="checkbox-096-checkboxes-with-filter">Checkbox option 096</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-095-checkboxes-with-filter" name="checkboxgroup[]" value="095" class="checkbox" />
<label for="checkbox-095-checkboxes-with-filter">Checkbox option 095</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-094-checkboxes-with-filter" name="checkboxgroup[]" value="094" class="checkbox" />
<label for="checkbox-094-checkboxes-with-filter">Checkbox option 094</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-093-checkboxes-with-filter" name="checkboxgroup[]" value="093" class="checkbox" />
<label for="checkbox-093-checkboxes-with-filter">Checkbox option 093</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-092-checkboxes-with-filter" name="checkboxgroup[]" value="092" class="checkbox" />
<label for="checkbox-092-checkboxes-with-filter">Checkbox option 092</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-091-checkboxes-with-filter" name="checkboxgroup[]" value="091" class="checkbox" />
<label for="checkbox-091-checkboxes-with-filter">Checkbox option 091</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-090-checkboxes-with-filter" name="checkboxgroup[]" value="090" class="checkbox" />
<label for="checkbox-090-checkboxes-with-filter">Checkbox option 090</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-089-checkboxes-with-filter" name="checkboxgroup[]" value="089" class="checkbox" />
<label for="checkbox-089-checkboxes-with-filter">Checkbox option 089</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-088-checkboxes-with-filter" name="checkboxgroup[]" value="088" class="checkbox" />
<label for="checkbox-088-checkboxes-with-filter">Checkbox option 088</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-087-checkboxes-with-filter" name="checkboxgroup[]" value="087" class="checkbox" />
<label for="checkbox-087-checkboxes-with-filter">Checkbox option 087</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-086-checkboxes-with-filter" name="checkboxgroup[]" value="086" class="checkbox" />
<label for="checkbox-086-checkboxes-with-filter">Checkbox option 086</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-085-checkboxes-with-filter" name="checkboxgroup[]" value="085" class="checkbox" />
<label for="checkbox-085-checkboxes-with-filter">Checkbox option 085</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-084-checkboxes-with-filter" name="checkboxgroup[]" value="084" class="checkbox" />
<label for="checkbox-084-checkboxes-with-filter">Checkbox option 084</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-083-checkboxes-with-filter" name="checkboxgroup[]" value="083" class="checkbox" />
<label for="checkbox-083-checkboxes-with-filter">Checkbox option 083</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-082-checkboxes-with-filter" name="checkboxgroup[]" value="082" class="checkbox" />
<label for="checkbox-082-checkboxes-with-filter">Checkbox option 082</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-081-checkboxes-with-filter" name="checkboxgroup[]" value="081" class="checkbox" />
<label for="checkbox-081-checkboxes-with-filter">Checkbox option 081</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-080-checkboxes-with-filter" name="checkboxgroup[]" value="080" class="checkbox" />
<label for="checkbox-080-checkboxes-with-filter">Checkbox option 080</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-079-checkboxes-with-filter" name="checkboxgroup[]" value="079" class="checkbox" />
<label for="checkbox-079-checkboxes-with-filter">Checkbox option 079</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-078-checkboxes-with-filter" name="checkboxgroup[]" value="078" class="checkbox" />
<label for="checkbox-078-checkboxes-with-filter">Checkbox option 078</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-077-checkboxes-with-filter" name="checkboxgroup[]" value="077" class="checkbox" />
<label for="checkbox-077-checkboxes-with-filter">Checkbox option 077</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-076-checkboxes-with-filter" name="checkboxgroup[]" value="076" class="checkbox" />
<label for="checkbox-076-checkboxes-with-filter">Checkbox option 076</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-075-checkboxes-with-filter" name="checkboxgroup[]" value="075" class="checkbox" />
<label for="checkbox-075-checkboxes-with-filter">Checkbox option 075</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-074-checkboxes-with-filter" name="checkboxgroup[]" value="074" class="checkbox" />
<label for="checkbox-074-checkboxes-with-filter">Checkbox option 074</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-073-checkboxes-with-filter" name="checkboxgroup[]" value="073" class="checkbox" />
<label for="checkbox-073-checkboxes-with-filter">Checkbox option 073</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-072-checkboxes-with-filter" name="checkboxgroup[]" value="072" class="checkbox" />
<label for="checkbox-072-checkboxes-with-filter">Checkbox option 072</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-071-checkboxes-with-filter" name="checkboxgroup[]" value="071" class="checkbox" />
<label for="checkbox-071-checkboxes-with-filter">Checkbox option 071</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-070-checkboxes-with-filter" name="checkboxgroup[]" value="070" class="checkbox" />
<label for="checkbox-070-checkboxes-with-filter">Checkbox option 070</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-069-checkboxes-with-filter" name="checkboxgroup[]" value="069" class="checkbox" />
<label for="checkbox-069-checkboxes-with-filter">Checkbox option 069</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-068-checkboxes-with-filter" name="checkboxgroup[]" value="068" class="checkbox" />
<label for="checkbox-068-checkboxes-with-filter">Checkbox option 068</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-067-checkboxes-with-filter" name="checkboxgroup[]" value="067" class="checkbox" />
<label for="checkbox-067-checkboxes-with-filter">Checkbox option 067</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-066-checkboxes-with-filter" name="checkboxgroup[]" value="066" class="checkbox" />
<label for="checkbox-066-checkboxes-with-filter">Checkbox option 066</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-065-checkboxes-with-filter" name="checkboxgroup[]" value="065" class="checkbox" />
<label for="checkbox-065-checkboxes-with-filter">Checkbox option 065</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-064-checkboxes-with-filter" name="checkboxgroup[]" value="064" class="checkbox" />
<label for="checkbox-064-checkboxes-with-filter">Checkbox option 064</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-063-checkboxes-with-filter" name="checkboxgroup[]" value="063" class="checkbox" />
<label for="checkbox-063-checkboxes-with-filter">Checkbox option 063</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-062-checkboxes-with-filter" name="checkboxgroup[]" value="062" class="checkbox" />
<label for="checkbox-062-checkboxes-with-filter">Checkbox option 062</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-061-checkboxes-with-filter" name="checkboxgroup[]" value="061" class="checkbox" />
<label for="checkbox-061-checkboxes-with-filter">Checkbox option 061</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-060-checkboxes-with-filter" name="checkboxgroup[]" value="060" class="checkbox" />
<label for="checkbox-060-checkboxes-with-filter">Checkbox option 060</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-059-checkboxes-with-filter" name="checkboxgroup[]" value="059" class="checkbox" />
<label for="checkbox-059-checkboxes-with-filter">Checkbox option 059</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-058-checkboxes-with-filter" name="checkboxgroup[]" value="058" class="checkbox" />
<label for="checkbox-058-checkboxes-with-filter">Checkbox option 058</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-057-checkboxes-with-filter" name="checkboxgroup[]" value="057" class="checkbox" />
<label for="checkbox-057-checkboxes-with-filter">Checkbox option 057</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-056-checkboxes-with-filter" name="checkboxgroup[]" value="056" class="checkbox" />
<label for="checkbox-056-checkboxes-with-filter">Checkbox option 056</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-055-checkboxes-with-filter" name="checkboxgroup[]" value="055" class="checkbox" />
<label for="checkbox-055-checkboxes-with-filter">Checkbox option 055</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-054-checkboxes-with-filter" name="checkboxgroup[]" value="054" class="checkbox" />
<label for="checkbox-054-checkboxes-with-filter">Checkbox option 054</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-053-checkboxes-with-filter" name="checkboxgroup[]" value="053" class="checkbox" />
<label for="checkbox-053-checkboxes-with-filter">Checkbox option 053</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-052-checkboxes-with-filter" name="checkboxgroup[]" value="052" class="checkbox" />
<label for="checkbox-052-checkboxes-with-filter">Checkbox option 052</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-051-checkboxes-with-filter" name="checkboxgroup[]" value="051" class="checkbox" />
<label for="checkbox-051-checkboxes-with-filter">Checkbox option 051</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-050-checkboxes-with-filter" name="checkboxgroup[]" value="050" class="checkbox" />
<label for="checkbox-050-checkboxes-with-filter">Checkbox option 050</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-049-checkboxes-with-filter" name="checkboxgroup[]" value="049" class="checkbox" />
<label for="checkbox-049-checkboxes-with-filter">Checkbox option 049</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-048-checkboxes-with-filter" name="checkboxgroup[]" value="048" class="checkbox" />
<label for="checkbox-048-checkboxes-with-filter">Checkbox option 048</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-047-checkboxes-with-filter" name="checkboxgroup[]" value="047" class="checkbox" />
<label for="checkbox-047-checkboxes-with-filter">Checkbox option 047</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-046-checkboxes-with-filter" name="checkboxgroup[]" value="046" class="checkbox" />
<label for="checkbox-046-checkboxes-with-filter">Checkbox option 046</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-045-checkboxes-with-filter" name="checkboxgroup[]" value="045" class="checkbox" />
<label for="checkbox-045-checkboxes-with-filter">Checkbox option 045</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-044-checkboxes-with-filter" name="checkboxgroup[]" value="044" class="checkbox" />
<label for="checkbox-044-checkboxes-with-filter">Checkbox option 044</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-043-checkboxes-with-filter" name="checkboxgroup[]" value="043" class="checkbox" />
<label for="checkbox-043-checkboxes-with-filter">Checkbox option 043</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-042-checkboxes-with-filter" name="checkboxgroup[]" value="042" class="checkbox" />
<label for="checkbox-042-checkboxes-with-filter">Checkbox option 042</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-041-checkboxes-with-filter" name="checkboxgroup[]" value="041" class="checkbox" />
<label for="checkbox-041-checkboxes-with-filter">Checkbox option 041</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-040-checkboxes-with-filter" name="checkboxgroup[]" value="040" class="checkbox" />
<label for="checkbox-040-checkboxes-with-filter">Checkbox option 040</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-039-checkboxes-with-filter" name="checkboxgroup[]" value="039" class="checkbox" />
<label for="checkbox-039-checkboxes-with-filter">Checkbox option 039</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-038-checkboxes-with-filter" name="checkboxgroup[]" value="038" class="checkbox" />
<label for="checkbox-038-checkboxes-with-filter">Checkbox option 038</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-037-checkboxes-with-filter" name="checkboxgroup[]" value="037" class="checkbox" />
<label for="checkbox-037-checkboxes-with-filter">Checkbox option 037</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-036-checkboxes-with-filter" name="checkboxgroup[]" value="036" class="checkbox" />
<label for="checkbox-036-checkboxes-with-filter">Checkbox option 036</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-035-checkboxes-with-filter" name="checkboxgroup[]" value="035" class="checkbox" />
<label for="checkbox-035-checkboxes-with-filter">Checkbox option 035</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-034-checkboxes-with-filter" name="checkboxgroup[]" value="034" class="checkbox" />
<label for="checkbox-034-checkboxes-with-filter">Checkbox option 034</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-033-checkboxes-with-filter" name="checkboxgroup[]" value="033" class="checkbox" />
<label for="checkbox-033-checkboxes-with-filter">Checkbox option 033</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-032-checkboxes-with-filter" name="checkboxgroup[]" value="032" class="checkbox" />
<label for="checkbox-032-checkboxes-with-filter">Checkbox option 032</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-031-checkboxes-with-filter" name="checkboxgroup[]" value="031" class="checkbox" />
<label for="checkbox-031-checkboxes-with-filter">Checkbox option 031</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-030-checkboxes-with-filter" name="checkboxgroup[]" value="030" class="checkbox" />
<label for="checkbox-030-checkboxes-with-filter">Checkbox option 030</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-029-checkboxes-with-filter" name="checkboxgroup[]" value="029" class="checkbox" />
<label for="checkbox-029-checkboxes-with-filter">Checkbox option 029</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-028-checkboxes-with-filter" name="checkboxgroup[]" value="028" class="checkbox" />
<label for="checkbox-028-checkboxes-with-filter">Checkbox option 028</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-027-checkboxes-with-filter" name="checkboxgroup[]" value="027" class="checkbox" />
<label for="checkbox-027-checkboxes-with-filter">Checkbox option 027</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-026-checkboxes-with-filter" name="checkboxgroup[]" value="026" class="checkbox" />
<label for="checkbox-026-checkboxes-with-filter">Checkbox option 026</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-025-checkboxes-with-filter" name="checkboxgroup[]" value="025" class="checkbox" />
<label for="checkbox-025-checkboxes-with-filter">Checkbox option 025</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-024-checkboxes-with-filter" name="checkboxgroup[]" value="024" class="checkbox" />
<label for="checkbox-024-checkboxes-with-filter">Checkbox option 024</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-023-checkboxes-with-filter" name="checkboxgroup[]" value="023" class="checkbox" />
<label for="checkbox-023-checkboxes-with-filter">Checkbox option 023</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-022-checkboxes-with-filter" name="checkboxgroup[]" value="022" class="checkbox" />
<label for="checkbox-022-checkboxes-with-filter">Checkbox option 022</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-021-checkboxes-with-filter" name="checkboxgroup[]" value="021" class="checkbox" />
<label for="checkbox-021-checkboxes-with-filter">Checkbox option 021</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-020-checkboxes-with-filter" name="checkboxgroup[]" value="020" class="checkbox" />
<label for="checkbox-020-checkboxes-with-filter">Checkbox option 020</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-019-checkboxes-with-filter" name="checkboxgroup[]" value="019" class="checkbox" />
<label for="checkbox-019-checkboxes-with-filter">Checkbox option 019</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-018-checkboxes-with-filter" name="checkboxgroup[]" value="018" class="checkbox" />
<label for="checkbox-018-checkboxes-with-filter">Checkbox option 018</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-017-checkboxes-with-filter" name="checkboxgroup[]" value="017" class="checkbox" />
<label for="checkbox-017-checkboxes-with-filter">Checkbox option 017</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-016-checkboxes-with-filter" name="checkboxgroup[]" value="016" class="checkbox" />
<label for="checkbox-016-checkboxes-with-filter">Checkbox option 016</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-015-checkboxes-with-filter" name="checkboxgroup[]" value="015" class="checkbox" />
<label for="checkbox-015-checkboxes-with-filter">Checkbox option 015</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-014-checkboxes-with-filter" name="checkboxgroup[]" value="014" class="checkbox" />
<label for="checkbox-014-checkboxes-with-filter">Checkbox option 014</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-013-checkboxes-with-filter" name="checkboxgroup[]" value="013" class="checkbox" />
<label for="checkbox-013-checkboxes-with-filter">Checkbox option 013</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-012-checkboxes-with-filter" name="checkboxgroup[]" value="012" class="checkbox" />
<label for="checkbox-012-checkboxes-with-filter">Checkbox option 012</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-011-checkboxes-with-filter" name="checkboxgroup[]" value="011" class="checkbox" />
<label for="checkbox-011-checkboxes-with-filter">Checkbox option 011</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-010-checkboxes-with-filter" name="checkboxgroup[]" value="010" class="checkbox" />
<label for="checkbox-010-checkboxes-with-filter">Checkbox option 010</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-09-checkboxes-with-filter" name="checkboxgroup[]" value="09" class="checkbox" />
<label for="checkbox-09-checkboxes-with-filter">Checkbox option 09</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-08-checkboxes-with-filter" name="checkboxgroup[]" value="08" class="checkbox" />
<label for="checkbox-08-checkboxes-with-filter">Checkbox option 08</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-07-checkboxes-with-filter" name="checkboxgroup[]" value="07" class="checkbox" />
<label for="checkbox-07-checkboxes-with-filter">Checkbox option 07</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-06-checkboxes-with-filter" name="checkboxgroup[]" value="06" class="checkbox" />
<label for="checkbox-06-checkboxes-with-filter">Checkbox option 06</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-05-checkboxes-with-filter" name="checkboxgroup[]" value="05" class="checkbox" />
<label for="checkbox-05-checkboxes-with-filter">Checkbox option 05</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-04-checkboxes-with-filter" name="checkboxgroup[]" value="04" class="checkbox" />
<label for="checkbox-04-checkboxes-with-filter">Checkbox option 04</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-03-checkboxes-with-filter" name="checkboxgroup[]" value="03" class="checkbox" />
<label for="checkbox-03-checkboxes-with-filter">Checkbox option 03</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-02-checkboxes-with-filter" name="checkboxgroup[]" value="02" class="checkbox" />
<label for="checkbox-02-checkboxes-with-filter">Checkbox option 02</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-01-checkboxes-with-filter" name="checkboxgroup[]" value="01" class="checkbox" />
<label for="checkbox-01-checkboxes-with-filter">Checkbox option 01</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-00-checkboxes-with-filter" name="checkboxgroup[]" value="00" class="checkbox" />
<label for="checkbox-00-checkboxes-with-filter">Checkbox option 00</label>
</div>
</div>
</div>
<div class="modal-actions">
<button type="button" class="button button-primary checkbox-filter__submit modal-close" data-target="modal">Confirm selection
</button>
</div>
</div>
<div class="modal-overlay modal-close checkbox-filter__close" data-target="modal" tabindex="-1"></div>
</div>
<p class="checkbox-filter__count-wrapper hidden">
<strong><span class="checkbox-filter__count">0</span> activity(ies)
selected</strong>
</p>
<button type="button" class="button button-secondary button-small checkbox-filter__open" aria-controls="modal" aria-expanded="false">
Select ...
</button>
</div>
<div class="form-item-column">
</div>
</div>
</fieldset>
<div class="form-item stacked">
<label for="select">Store
<span class="label-optional">
(Optional)
</span>
</label>
<div class="form-columns">
<div class="form-item-column">
<select name="select" id="select">
<option>Option 1</option>
<option>Option 2</option>
<optgroup label="Option group">
<option>Option 3</option>
<option>Option 4</option>
</optgroup>
</select>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</div>
<div class="modal-actions">
<button type="submit" class="button button-primary filter__submit">Show result</button>
</div>
</form>
<div class="modal-overlay modal-close" data-target="filter" tabindex="-1"></div>
</div>
<section class="content result-section" id="result">
<h1 class="overview-title"><span class="overview-title-colon">Filtercomponent<span class="colon" aria-hidden="true"></span></span></h1>
<button class="readspeaker-button">
<i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
</button>
<div class="selected-filters">
<h2>You have selected:</h2>
<span :key="filter.key" class="tag filter">
Filter one
<button><span class="visually-hidden">Remove this filter</span></button>
</span>
<span :key="filter.key" class="tag filter">
Filter two
<button><span class="visually-hidden">Remove this filter</span></button>
</span>
<a href="#">Remove all filters</a>
</div>
<div class="filter__result-count">
<h2>We have found 666 results</h2>
<button type="button" class="button button-secondary icon-filter result__show-filters modal-trigger" aria-expanded="false" aria-controls="filter">Filters</button>
</div>
<ul class="filter__results">
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
</ul>
<nav class="pager" aria-labelledby="pagination_1-2017">
<h2 id="pagination_1-2017" class="visually-hidden">Pagination</h2>
<ul class="pager__items">
<li class="previous"><a href="#" class="previous">
Previous
<span class="visually-hidden">page</span></a></li>
<li><a href="#" title="Go to page 1"><span class="visually-hidden">Page</span>
1
</a></li>
<li class="spacing">...</li>
<li class="prev--number"><a href="#" title="Go to page 16"><span class="visually-hidden">Page</span>
16
</a></li>
<li class="active"><span class="visually-hidden">Page</span>
17
</li>
<li class="next--number"><a href="#" title="Go to page 18"><span class="visually-hidden">Page</span>
18
</a></li>
<li class="spacing">...</li>
<li><a href="#" title="Go to page 20"><span class="visually-hidden">Page</span>
20
</a></li>
<li class="next"><a href="#">
Next
<span class="visually-hidden">page</span></a></li>
</ul>
</nav>
</section>
</div>
{
"checkboxes": [
{
"title": "Category 9",
"value": "category_ 9",
"items": [
{
"label_checkbox": "Checkbox option 199",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-199-checkboxes-with-filter",
"checkbox_value": "199"
},
{
"label_checkbox": "Checkbox option 198",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-198-checkboxes-with-filter",
"checkbox_value": "198"
},
{
"label_checkbox": "Checkbox option 197",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-197-checkboxes-with-filter",
"checkbox_value": "197"
},
{
"label_checkbox": "Checkbox option 196",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-196-checkboxes-with-filter",
"checkbox_value": "196"
},
{
"label_checkbox": "Checkbox option 195",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-195-checkboxes-with-filter",
"checkbox_value": "195"
},
{
"label_checkbox": "Checkbox option 194",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-194-checkboxes-with-filter",
"checkbox_value": "194"
},
{
"label_checkbox": "Checkbox option 193",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-193-checkboxes-with-filter",
"checkbox_value": "193"
},
{
"label_checkbox": "Checkbox option 192",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-192-checkboxes-with-filter",
"checkbox_value": "192"
},
{
"label_checkbox": "Checkbox option 191",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-191-checkboxes-with-filter",
"checkbox_value": "191"
},
{
"label_checkbox": "Checkbox option 190",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-190-checkboxes-with-filter",
"checkbox_value": "190"
},
{
"label_checkbox": "Checkbox option 189",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-189-checkboxes-with-filter",
"checkbox_value": "189"
},
{
"label_checkbox": "Checkbox option 188",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-188-checkboxes-with-filter",
"checkbox_value": "188"
},
{
"label_checkbox": "Checkbox option 187",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-187-checkboxes-with-filter",
"checkbox_value": "187"
},
{
"label_checkbox": "Checkbox option 186",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-186-checkboxes-with-filter",
"checkbox_value": "186"
},
{
"label_checkbox": "Checkbox option 185",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-185-checkboxes-with-filter",
"checkbox_value": "185"
},
{
"label_checkbox": "Checkbox option 184",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-184-checkboxes-with-filter",
"checkbox_value": "184"
},
{
"label_checkbox": "Checkbox option 183",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-183-checkboxes-with-filter",
"checkbox_value": "183"
},
{
"label_checkbox": "Checkbox option 182",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-182-checkboxes-with-filter",
"checkbox_value": "182"
},
{
"label_checkbox": "Checkbox option 181",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-181-checkboxes-with-filter",
"checkbox_value": "181"
},
{
"label_checkbox": "Checkbox option 180",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-180-checkboxes-with-filter",
"checkbox_value": "180"
},
{
"label_checkbox": "Checkbox option 179",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-179-checkboxes-with-filter",
"checkbox_value": "179"
},
{
"label_checkbox": "Checkbox option 178",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-178-checkboxes-with-filter",
"checkbox_value": "178"
},
{
"label_checkbox": "Checkbox option 177",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-177-checkboxes-with-filter",
"checkbox_value": "177"
},
{
"label_checkbox": "Checkbox option 176",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-176-checkboxes-with-filter",
"checkbox_value": "176"
},
{
"label_checkbox": "Checkbox option 175",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-175-checkboxes-with-filter",
"checkbox_value": "175"
},
{
"label_checkbox": "Checkbox option 174",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-174-checkboxes-with-filter",
"checkbox_value": "174"
},
{
"label_checkbox": "Checkbox option 173",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-173-checkboxes-with-filter",
"checkbox_value": "173"
},
{
"label_checkbox": "Checkbox option 172",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-172-checkboxes-with-filter",
"checkbox_value": "172"
},
{
"label_checkbox": "Checkbox option 171",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-171-checkboxes-with-filter",
"checkbox_value": "171"
},
{
"label_checkbox": "Checkbox option 170",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-170-checkboxes-with-filter",
"checkbox_value": "170"
},
{
"label_checkbox": "Checkbox option 169",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-169-checkboxes-with-filter",
"checkbox_value": "169"
},
{
"label_checkbox": "Checkbox option 168",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-168-checkboxes-with-filter",
"checkbox_value": "168"
},
{
"label_checkbox": "Checkbox option 167",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-167-checkboxes-with-filter",
"checkbox_value": "167"
},
{
"label_checkbox": "Checkbox option 166",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-166-checkboxes-with-filter",
"checkbox_value": "166"
},
{
"label_checkbox": "Checkbox option 165",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-165-checkboxes-with-filter",
"checkbox_value": "165"
},
{
"label_checkbox": "Checkbox option 164",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-164-checkboxes-with-filter",
"checkbox_value": "164"
},
{
"label_checkbox": "Checkbox option 163",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-163-checkboxes-with-filter",
"checkbox_value": "163"
},
{
"label_checkbox": "Checkbox option 162",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-162-checkboxes-with-filter",
"checkbox_value": "162"
},
{
"label_checkbox": "Checkbox option 161",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-161-checkboxes-with-filter",
"checkbox_value": "161"
},
{
"label_checkbox": "Checkbox option 160",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-160-checkboxes-with-filter",
"checkbox_value": "160"
},
{
"label_checkbox": "Checkbox option 159",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-159-checkboxes-with-filter",
"checkbox_value": "159"
},
{
"label_checkbox": "Checkbox option 158",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-158-checkboxes-with-filter",
"checkbox_value": "158"
},
{
"label_checkbox": "Checkbox option 157",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-157-checkboxes-with-filter",
"checkbox_value": "157"
},
{
"label_checkbox": "Checkbox option 156",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-156-checkboxes-with-filter",
"checkbox_value": "156"
},
{
"label_checkbox": "Checkbox option 155",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-155-checkboxes-with-filter",
"checkbox_value": "155"
},
{
"label_checkbox": "Checkbox option 154",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-154-checkboxes-with-filter",
"checkbox_value": "154"
},
{
"label_checkbox": "Checkbox option 153",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-153-checkboxes-with-filter",
"checkbox_value": "153"
},
{
"label_checkbox": "Checkbox option 152",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-152-checkboxes-with-filter",
"checkbox_value": "152"
},
{
"label_checkbox": "Checkbox option 151",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-151-checkboxes-with-filter",
"checkbox_value": "151"
},
{
"label_checkbox": "Checkbox option 150",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-150-checkboxes-with-filter",
"checkbox_value": "150"
},
{
"label_checkbox": "Checkbox option 149",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-149-checkboxes-with-filter",
"checkbox_value": "149"
},
{
"label_checkbox": "Checkbox option 148",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-148-checkboxes-with-filter",
"checkbox_value": "148"
},
{
"label_checkbox": "Checkbox option 147",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-147-checkboxes-with-filter",
"checkbox_value": "147"
},
{
"label_checkbox": "Checkbox option 146",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-146-checkboxes-with-filter",
"checkbox_value": "146"
},
{
"label_checkbox": "Checkbox option 145",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-145-checkboxes-with-filter",
"checkbox_value": "145"
},
{
"label_checkbox": "Checkbox option 144",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-144-checkboxes-with-filter",
"checkbox_value": "144"
},
{
"label_checkbox": "Checkbox option 143",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-143-checkboxes-with-filter",
"checkbox_value": "143"
},
{
"label_checkbox": "Checkbox option 142",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-142-checkboxes-with-filter",
"checkbox_value": "142"
},
{
"label_checkbox": "Checkbox option 141",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-141-checkboxes-with-filter",
"checkbox_value": "141"
},
{
"label_checkbox": "Checkbox option 140",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-140-checkboxes-with-filter",
"checkbox_value": "140"
},
{
"label_checkbox": "Checkbox option 139",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-139-checkboxes-with-filter",
"checkbox_value": "139"
},
{
"label_checkbox": "Checkbox option 138",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-138-checkboxes-with-filter",
"checkbox_value": "138"
},
{
"label_checkbox": "Checkbox option 137",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-137-checkboxes-with-filter",
"checkbox_value": "137"
},
{
"label_checkbox": "Checkbox option 136",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-136-checkboxes-with-filter",
"checkbox_value": "136"
},
{
"label_checkbox": "Checkbox option 135",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-135-checkboxes-with-filter",
"checkbox_value": "135"
},
{
"label_checkbox": "Checkbox option 134",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-134-checkboxes-with-filter",
"checkbox_value": "134"
},
{
"label_checkbox": "Checkbox option 133",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-133-checkboxes-with-filter",
"checkbox_value": "133"
},
{
"label_checkbox": "Checkbox option 132",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-132-checkboxes-with-filter",
"checkbox_value": "132"
},
{
"label_checkbox": "Checkbox option 131",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-131-checkboxes-with-filter",
"checkbox_value": "131"
},
{
"label_checkbox": "Checkbox option 130",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-130-checkboxes-with-filter",
"checkbox_value": "130"
},
{
"label_checkbox": "Checkbox option 129",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-129-checkboxes-with-filter",
"checkbox_value": "129"
},
{
"label_checkbox": "Checkbox option 128",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-128-checkboxes-with-filter",
"checkbox_value": "128"
},
{
"label_checkbox": "Checkbox option 127",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-127-checkboxes-with-filter",
"checkbox_value": "127"
},
{
"label_checkbox": "Checkbox option 126",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-126-checkboxes-with-filter",
"checkbox_value": "126"
},
{
"label_checkbox": "Checkbox option 125",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-125-checkboxes-with-filter",
"checkbox_value": "125"
},
{
"label_checkbox": "Checkbox option 124",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-124-checkboxes-with-filter",
"checkbox_value": "124"
},
{
"label_checkbox": "Checkbox option 123",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-123-checkboxes-with-filter",
"checkbox_value": "123"
},
{
"label_checkbox": "Checkbox option 122",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-122-checkboxes-with-filter",
"checkbox_value": "122"
},
{
"label_checkbox": "Checkbox option 121",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-121-checkboxes-with-filter",
"checkbox_value": "121"
},
{
"label_checkbox": "Checkbox option 120",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-120-checkboxes-with-filter",
"checkbox_value": "120"
},
{
"label_checkbox": "Checkbox option 119",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-119-checkboxes-with-filter",
"checkbox_value": "119"
},
{
"label_checkbox": "Checkbox option 118",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-118-checkboxes-with-filter",
"checkbox_value": "118"
},
{
"label_checkbox": "Checkbox option 117",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-117-checkboxes-with-filter",
"checkbox_value": "117"
},
{
"label_checkbox": "Checkbox option 116",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-116-checkboxes-with-filter",
"checkbox_value": "116"
},
{
"label_checkbox": "Checkbox option 115",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-115-checkboxes-with-filter",
"checkbox_value": "115"
},
{
"label_checkbox": "Checkbox option 114",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-114-checkboxes-with-filter",
"checkbox_value": "114"
},
{
"label_checkbox": "Checkbox option 113",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-113-checkboxes-with-filter",
"checkbox_value": "113"
},
{
"label_checkbox": "Checkbox option 112",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-112-checkboxes-with-filter",
"checkbox_value": "112"
},
{
"label_checkbox": "Checkbox option 111",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-111-checkboxes-with-filter",
"checkbox_value": "111"
},
{
"label_checkbox": "Checkbox option 110",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-110-checkboxes-with-filter",
"checkbox_value": "110"
},
{
"label_checkbox": "Checkbox option 19",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-19-checkboxes-with-filter",
"checkbox_value": "19"
},
{
"label_checkbox": "Checkbox option 18",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-18-checkboxes-with-filter",
"checkbox_value": "18"
},
{
"label_checkbox": "Checkbox option 17",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-17-checkboxes-with-filter",
"checkbox_value": "17"
},
{
"label_checkbox": "Checkbox option 16",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-16-checkboxes-with-filter",
"checkbox_value": "16"
},
{
"label_checkbox": "Checkbox option 15",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-15-checkboxes-with-filter",
"checkbox_value": "15"
},
{
"label_checkbox": "Checkbox option 14",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-14-checkboxes-with-filter",
"checkbox_value": "14"
},
{
"label_checkbox": "Checkbox option 13",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-13-checkboxes-with-filter",
"checkbox_value": "13"
},
{
"label_checkbox": "Checkbox option 12",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-12-checkboxes-with-filter",
"checkbox_value": "12"
},
{
"label_checkbox": "Checkbox option 11",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-11-checkboxes-with-filter",
"checkbox_value": "11"
},
{
"label_checkbox": "Checkbox option 10",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-10-checkboxes-with-filter",
"checkbox_value": "10"
}
]
},
{
"title": "Category 10",
"value": "category_ 10",
"items": [
{
"label_checkbox": "Checkbox option 099",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-099-checkboxes-with-filter",
"checkbox_value": "099"
},
{
"label_checkbox": "Checkbox option 098",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-098-checkboxes-with-filter",
"checkbox_value": "098"
},
{
"label_checkbox": "Checkbox option 097",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-097-checkboxes-with-filter",
"checkbox_value": "097"
},
{
"label_checkbox": "Checkbox option 096",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-096-checkboxes-with-filter",
"checkbox_value": "096"
},
{
"label_checkbox": "Checkbox option 095",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-095-checkboxes-with-filter",
"checkbox_value": "095"
},
{
"label_checkbox": "Checkbox option 094",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-094-checkboxes-with-filter",
"checkbox_value": "094"
},
{
"label_checkbox": "Checkbox option 093",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-093-checkboxes-with-filter",
"checkbox_value": "093"
},
{
"label_checkbox": "Checkbox option 092",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-092-checkboxes-with-filter",
"checkbox_value": "092"
},
{
"label_checkbox": "Checkbox option 091",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-091-checkboxes-with-filter",
"checkbox_value": "091"
},
{
"label_checkbox": "Checkbox option 090",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-090-checkboxes-with-filter",
"checkbox_value": "090"
},
{
"label_checkbox": "Checkbox option 089",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-089-checkboxes-with-filter",
"checkbox_value": "089"
},
{
"label_checkbox": "Checkbox option 088",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-088-checkboxes-with-filter",
"checkbox_value": "088"
},
{
"label_checkbox": "Checkbox option 087",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-087-checkboxes-with-filter",
"checkbox_value": "087"
},
{
"label_checkbox": "Checkbox option 086",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-086-checkboxes-with-filter",
"checkbox_value": "086"
},
{
"label_checkbox": "Checkbox option 085",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-085-checkboxes-with-filter",
"checkbox_value": "085"
},
{
"label_checkbox": "Checkbox option 084",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-084-checkboxes-with-filter",
"checkbox_value": "084"
},
{
"label_checkbox": "Checkbox option 083",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-083-checkboxes-with-filter",
"checkbox_value": "083"
},
{
"label_checkbox": "Checkbox option 082",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-082-checkboxes-with-filter",
"checkbox_value": "082"
},
{
"label_checkbox": "Checkbox option 081",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-081-checkboxes-with-filter",
"checkbox_value": "081"
},
{
"label_checkbox": "Checkbox option 080",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-080-checkboxes-with-filter",
"checkbox_value": "080"
},
{
"label_checkbox": "Checkbox option 079",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-079-checkboxes-with-filter",
"checkbox_value": "079"
},
{
"label_checkbox": "Checkbox option 078",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-078-checkboxes-with-filter",
"checkbox_value": "078"
},
{
"label_checkbox": "Checkbox option 077",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-077-checkboxes-with-filter",
"checkbox_value": "077"
},
{
"label_checkbox": "Checkbox option 076",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-076-checkboxes-with-filter",
"checkbox_value": "076"
},
{
"label_checkbox": "Checkbox option 075",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-075-checkboxes-with-filter",
"checkbox_value": "075"
},
{
"label_checkbox": "Checkbox option 074",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-074-checkboxes-with-filter",
"checkbox_value": "074"
},
{
"label_checkbox": "Checkbox option 073",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-073-checkboxes-with-filter",
"checkbox_value": "073"
},
{
"label_checkbox": "Checkbox option 072",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-072-checkboxes-with-filter",
"checkbox_value": "072"
},
{
"label_checkbox": "Checkbox option 071",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-071-checkboxes-with-filter",
"checkbox_value": "071"
},
{
"label_checkbox": "Checkbox option 070",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-070-checkboxes-with-filter",
"checkbox_value": "070"
},
{
"label_checkbox": "Checkbox option 069",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-069-checkboxes-with-filter",
"checkbox_value": "069"
},
{
"label_checkbox": "Checkbox option 068",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-068-checkboxes-with-filter",
"checkbox_value": "068"
},
{
"label_checkbox": "Checkbox option 067",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-067-checkboxes-with-filter",
"checkbox_value": "067"
},
{
"label_checkbox": "Checkbox option 066",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-066-checkboxes-with-filter",
"checkbox_value": "066"
},
{
"label_checkbox": "Checkbox option 065",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-065-checkboxes-with-filter",
"checkbox_value": "065"
},
{
"label_checkbox": "Checkbox option 064",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-064-checkboxes-with-filter",
"checkbox_value": "064"
},
{
"label_checkbox": "Checkbox option 063",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-063-checkboxes-with-filter",
"checkbox_value": "063"
},
{
"label_checkbox": "Checkbox option 062",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-062-checkboxes-with-filter",
"checkbox_value": "062"
},
{
"label_checkbox": "Checkbox option 061",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-061-checkboxes-with-filter",
"checkbox_value": "061"
},
{
"label_checkbox": "Checkbox option 060",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-060-checkboxes-with-filter",
"checkbox_value": "060"
},
{
"label_checkbox": "Checkbox option 059",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-059-checkboxes-with-filter",
"checkbox_value": "059"
},
{
"label_checkbox": "Checkbox option 058",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-058-checkboxes-with-filter",
"checkbox_value": "058"
},
{
"label_checkbox": "Checkbox option 057",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-057-checkboxes-with-filter",
"checkbox_value": "057"
},
{
"label_checkbox": "Checkbox option 056",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-056-checkboxes-with-filter",
"checkbox_value": "056"
},
{
"label_checkbox": "Checkbox option 055",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-055-checkboxes-with-filter",
"checkbox_value": "055"
},
{
"label_checkbox": "Checkbox option 054",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-054-checkboxes-with-filter",
"checkbox_value": "054"
},
{
"label_checkbox": "Checkbox option 053",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-053-checkboxes-with-filter",
"checkbox_value": "053"
},
{
"label_checkbox": "Checkbox option 052",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-052-checkboxes-with-filter",
"checkbox_value": "052"
},
{
"label_checkbox": "Checkbox option 051",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-051-checkboxes-with-filter",
"checkbox_value": "051"
},
{
"label_checkbox": "Checkbox option 050",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-050-checkboxes-with-filter",
"checkbox_value": "050"
},
{
"label_checkbox": "Checkbox option 049",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-049-checkboxes-with-filter",
"checkbox_value": "049"
},
{
"label_checkbox": "Checkbox option 048",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-048-checkboxes-with-filter",
"checkbox_value": "048"
},
{
"label_checkbox": "Checkbox option 047",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-047-checkboxes-with-filter",
"checkbox_value": "047"
},
{
"label_checkbox": "Checkbox option 046",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-046-checkboxes-with-filter",
"checkbox_value": "046"
},
{
"label_checkbox": "Checkbox option 045",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-045-checkboxes-with-filter",
"checkbox_value": "045"
},
{
"label_checkbox": "Checkbox option 044",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-044-checkboxes-with-filter",
"checkbox_value": "044"
},
{
"label_checkbox": "Checkbox option 043",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-043-checkboxes-with-filter",
"checkbox_value": "043"
},
{
"label_checkbox": "Checkbox option 042",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-042-checkboxes-with-filter",
"checkbox_value": "042"
},
{
"label_checkbox": "Checkbox option 041",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-041-checkboxes-with-filter",
"checkbox_value": "041"
},
{
"label_checkbox": "Checkbox option 040",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-040-checkboxes-with-filter",
"checkbox_value": "040"
},
{
"label_checkbox": "Checkbox option 039",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-039-checkboxes-with-filter",
"checkbox_value": "039"
},
{
"label_checkbox": "Checkbox option 038",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-038-checkboxes-with-filter",
"checkbox_value": "038"
},
{
"label_checkbox": "Checkbox option 037",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-037-checkboxes-with-filter",
"checkbox_value": "037"
},
{
"label_checkbox": "Checkbox option 036",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-036-checkboxes-with-filter",
"checkbox_value": "036"
},
{
"label_checkbox": "Checkbox option 035",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-035-checkboxes-with-filter",
"checkbox_value": "035"
},
{
"label_checkbox": "Checkbox option 034",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-034-checkboxes-with-filter",
"checkbox_value": "034"
},
{
"label_checkbox": "Checkbox option 033",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-033-checkboxes-with-filter",
"checkbox_value": "033"
},
{
"label_checkbox": "Checkbox option 032",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-032-checkboxes-with-filter",
"checkbox_value": "032"
},
{
"label_checkbox": "Checkbox option 031",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-031-checkboxes-with-filter",
"checkbox_value": "031"
},
{
"label_checkbox": "Checkbox option 030",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-030-checkboxes-with-filter",
"checkbox_value": "030"
},
{
"label_checkbox": "Checkbox option 029",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-029-checkboxes-with-filter",
"checkbox_value": "029"
},
{
"label_checkbox": "Checkbox option 028",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-028-checkboxes-with-filter",
"checkbox_value": "028"
},
{
"label_checkbox": "Checkbox option 027",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-027-checkboxes-with-filter",
"checkbox_value": "027"
},
{
"label_checkbox": "Checkbox option 026",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-026-checkboxes-with-filter",
"checkbox_value": "026"
},
{
"label_checkbox": "Checkbox option 025",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-025-checkboxes-with-filter",
"checkbox_value": "025"
},
{
"label_checkbox": "Checkbox option 024",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-024-checkboxes-with-filter",
"checkbox_value": "024"
},
{
"label_checkbox": "Checkbox option 023",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-023-checkboxes-with-filter",
"checkbox_value": "023"
},
{
"label_checkbox": "Checkbox option 022",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-022-checkboxes-with-filter",
"checkbox_value": "022"
},
{
"label_checkbox": "Checkbox option 021",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-021-checkboxes-with-filter",
"checkbox_value": "021"
},
{
"label_checkbox": "Checkbox option 020",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-020-checkboxes-with-filter",
"checkbox_value": "020"
},
{
"label_checkbox": "Checkbox option 019",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-019-checkboxes-with-filter",
"checkbox_value": "019"
},
{
"label_checkbox": "Checkbox option 018",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-018-checkboxes-with-filter",
"checkbox_value": "018"
},
{
"label_checkbox": "Checkbox option 017",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-017-checkboxes-with-filter",
"checkbox_value": "017"
},
{
"label_checkbox": "Checkbox option 016",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-016-checkboxes-with-filter",
"checkbox_value": "016"
},
{
"label_checkbox": "Checkbox option 015",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-015-checkboxes-with-filter",
"checkbox_value": "015"
},
{
"label_checkbox": "Checkbox option 014",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-014-checkboxes-with-filter",
"checkbox_value": "014"
},
{
"label_checkbox": "Checkbox option 013",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-013-checkboxes-with-filter",
"checkbox_value": "013"
},
{
"label_checkbox": "Checkbox option 012",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-012-checkboxes-with-filter",
"checkbox_value": "012"
},
{
"label_checkbox": "Checkbox option 011",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-011-checkboxes-with-filter",
"checkbox_value": "011"
},
{
"label_checkbox": "Checkbox option 010",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-010-checkboxes-with-filter",
"checkbox_value": "010"
},
{
"label_checkbox": "Checkbox option 09",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-09-checkboxes-with-filter",
"checkbox_value": "09"
},
{
"label_checkbox": "Checkbox option 08",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-08-checkboxes-with-filter",
"checkbox_value": "08"
},
{
"label_checkbox": "Checkbox option 07",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-07-checkboxes-with-filter",
"checkbox_value": "07"
},
{
"label_checkbox": "Checkbox option 06",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-06-checkboxes-with-filter",
"checkbox_value": "06"
},
{
"label_checkbox": "Checkbox option 05",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-05-checkboxes-with-filter",
"checkbox_value": "05"
},
{
"label_checkbox": "Checkbox option 04",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-04-checkboxes-with-filter",
"checkbox_value": "04"
},
{
"label_checkbox": "Checkbox option 03",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-03-checkboxes-with-filter",
"checkbox_value": "03"
},
{
"label_checkbox": "Checkbox option 02",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-02-checkboxes-with-filter",
"checkbox_value": "02"
},
{
"label_checkbox": "Checkbox option 01",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-01-checkboxes-with-filter",
"checkbox_value": "01"
},
{
"label_checkbox": "Checkbox option 00",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-00-checkboxes-with-filter",
"checkbox_value": "00"
}
]
}
],
"results": [
{
"teaser_uid": "search_teaser_9",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_8",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_7",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_6",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_5",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_4",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_3",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_2",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_1",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_0",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
}
]
}
.filter {
.result-section {
.selected-filters,
.filter__result-count {
h2 {
font-size: .8rem;
}
}
.result__show-filters {
@include desktop {
display: none;
}
}
.selected-filters {
margin-bottom: 1rem;
.tag {
margin: 0 .5rem .5rem 0;
}
a {
white-space: nowrap;
}
}
.filter__result-count {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.2rem;
> * {
margin: 0;
}
> * + * {
margin-left: gutter() / 2;
}
}
ul.filter__results {
@extend %list-no-style;
}
.pager {
@include tablet {
li.previous,
li.next {
display: none;
}
}
@include desktop {
li.previous,
li.next {
display: block;
}
}
}
}
}
// On mobile the filter-section is moved to the body root because it is converted to a modal.
// This means it's no longer a child of .filter.
.sidebar.filter-section {
padding-top: .7rem;
visibility: hidden;
@include desktop {
position: static;
height: auto;
box-shadow: none;
overflow: visible;
visibility: visible;
z-index: auto;
}
&.visible {
@include breakpoint(max-width $bp-desktop) {
padding: 0;
visibility: visible;
> .modal-inner > .modal-header {
display: block;
}
}
}
> .modal-inner {
width: 100%;
max-width: initial;
min-height: 100%;
margin: 0;
padding: 0;
@include desktop {
position: relative;
top: 0;
left: 0;
transform: none;
z-index: auto;
filter: none;
}
> .modal-header {
display: none;
}
> .modal-content {
@include desktop {
padding: 0;
overflow: visible;
}
}
> .modal-actions {
@include desktop {
padding-right: 0;
padding-left: 0;
border: 0;
}
}
}
> .modal-overlay {
display: none;
}
form,
form .modal-content {
// style first level labels as headings
> .form-item > label,
> fieldset.form-item > legend {
@extend %h3;
}
> fieldset {
padding: 0;
border: 0;
}
}
.label-optional {
display: none;
}
.filter__submit {
margin-top: .8rem;
margin-bottom: .8rem;
}
}
'use strict';
(function () {
if (!Modal) { // eslint-disable-line no-undef
return;
}
const filter = document.querySelector('#filter');
// eslint-disable-next-line no-undef
new Modal(filter, {
// The modal is always visible from tablet and up,
// this is atypical.
resizeEvent: (open, close) => {
if (window.innerWidth > 960) {
close();
filter.setAttribute('aria-hidden', 'false');
}
else if (!filter.classList.contains('visible')) {
filter.setAttribute('aria-hidden', 'true');
}
}
});
})();