<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-dynamic' with {
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-dynamic' with {
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 - €999",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-4"
},
{
"label": "€1000 - €1999",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-5"
},
{
"label": "€2000 - €2999",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-6"
},
{
"label": "€3000 - €3999",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-7"
},
{
"label": "€4000 - €4999",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-8"
},
{
"label": "€5000 or more",
"name": _self.name ~ "-price",
"id": _self.name ~ "-price-9"
}
]
} %}
{% include '@checkboxes-dynamic' with {
label: "Activities",
id: _self.name ~ "-filter",
modifier: 'stacked',
options: checkboxes
} %}
{% 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"
} %}
<div class="bold show-desktop-only mb-20">
{% include '@paragraph' with {
text: 'This is an optional introductory text. If this text is present, it is never shown below desktop width!'
} %}
{% include '@paragraph' with {
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam dignissimos itaque. Ad autem consequuntur deleniti doloremque, impedit maxime praesentium provident quaerat reiciendis repudiandae vero?'
} %}
</div>
<div class="selected-filters">
<h2>You have selected:</h2>
{% include '@tag-list' with {
tags: [
{ text: 'Filter one', type: 'filter-tag' },
{ text: 'Filter two', type: 'filter-tag' },
{ text: 'Filter three', type: 'filter-tag' }
],
link: { text: 'Remove all filters', link: '#' }
} %}
</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,
"tags": result.tags,
"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>
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-dynamic">
<legend>
Price
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="accordion-preview">
<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>
<div class="checkbox-accordion">
<div class="accordion--content" aria-hidden="true" hidden="hidden" id="hidden-options-default-price-stacked">
<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 - €999</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">€1000 - €1999</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-6" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-6">€2000 - €2999</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-7" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-7">€3000 - €3999</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-8" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-8">€4000 - €4999</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-9" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-9">€5000 or more</label>
</div>
</div>
<button type="button" class="accordion--button button button-secondary button-small icon-left" aria-expanded="false" aria-controls="hidden-options-default-price-stacked">
Show more
</button>
</div>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-item stacked checkbox-filter-dynamic">
<legend>
Activities
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="modal-preview">
<div class="checkbox preview">
<input type="checkbox" id="input-default-filter-stacked-checkbox-99-checkboxes-with-filter-preview" data-original="input-default-filter-stacked-checkbox-99-checkboxes-with-filter" value="99" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-99-checkboxes-with-filter-preview">Checkbox option 99</label>
</div>
<div class="checkbox preview">
<input type="checkbox" id="input-default-filter-stacked-checkbox-98-checkboxes-with-filter-preview" data-original="input-default-filter-stacked-checkbox-98-checkboxes-with-filter" value="98" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-98-checkboxes-with-filter-preview">Checkbox option 98</label>
</div>
<div class="checkbox preview">
<input type="checkbox" id="input-default-filter-stacked-checkbox-97-checkboxes-with-filter-preview" data-original="input-default-filter-stacked-checkbox-97-checkboxes-with-filter" value="97" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-97-checkboxes-with-filter-preview">Checkbox option 97</label>
</div>
</div>
<div id="modalstacked" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modalstacked-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="modalstacked">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h2 id="modalstacked-title">Activities</h2>
<div class="form-item checkbox-filter__filter__search-wrapper">
<input type="search" id="checkboxes__filter_id_stacked" class="checkbox-filter__filter" aria-label="Filter the list below">
<div aria-live="polite" aria-atomic="true" class="checkbox-filter__result-wrapper">
<span class="checkbox-filter__result">#</span> filter(s) found
</div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list checkbox-filter__selected">
</ul>
</div>
<fieldset class="form-item stacked">
<legend>
Activities
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-99-checkboxes-with-filter" name="checkboxes-dynamic" value="99" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-99-checkboxes-with-filter">Checkbox option 99</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-98-checkboxes-with-filter" name="checkboxes-dynamic" value="98" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-98-checkboxes-with-filter">Checkbox option 98</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-97-checkboxes-with-filter" name="checkboxes-dynamic" value="97" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-97-checkboxes-with-filter">Checkbox option 97</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-96-checkboxes-with-filter" name="checkboxes-dynamic" value="96" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-96-checkboxes-with-filter">Checkbox option 96</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-95-checkboxes-with-filter" name="checkboxes-dynamic" value="95" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-95-checkboxes-with-filter">Checkbox option 95</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-94-checkboxes-with-filter" name="checkboxes-dynamic" value="94" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-94-checkboxes-with-filter">Checkbox option 94</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-93-checkboxes-with-filter" name="checkboxes-dynamic" value="93" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-93-checkboxes-with-filter">Checkbox option 93</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-92-checkboxes-with-filter" name="checkboxes-dynamic" value="92" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-92-checkboxes-with-filter">Checkbox option 92</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-91-checkboxes-with-filter" name="checkboxes-dynamic" value="91" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-91-checkboxes-with-filter">Checkbox option 91</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-90-checkboxes-with-filter" name="checkboxes-dynamic" value="90" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-90-checkboxes-with-filter">Checkbox option 90</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-89-checkboxes-with-filter" name="checkboxes-dynamic" value="89" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-89-checkboxes-with-filter">Checkbox option 89</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-88-checkboxes-with-filter" name="checkboxes-dynamic" value="88" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-88-checkboxes-with-filter">Checkbox option 88</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-87-checkboxes-with-filter" name="checkboxes-dynamic" value="87" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-87-checkboxes-with-filter">Checkbox option 87</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-86-checkboxes-with-filter" name="checkboxes-dynamic" value="86" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-86-checkboxes-with-filter">Checkbox option 86</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-85-checkboxes-with-filter" name="checkboxes-dynamic" value="85" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-85-checkboxes-with-filter">Checkbox option 85</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-84-checkboxes-with-filter" name="checkboxes-dynamic" value="84" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-84-checkboxes-with-filter">Checkbox option 84</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-83-checkboxes-with-filter" name="checkboxes-dynamic" value="83" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-83-checkboxes-with-filter">Checkbox option 83</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-82-checkboxes-with-filter" name="checkboxes-dynamic" value="82" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-82-checkboxes-with-filter">Checkbox option 82</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-81-checkboxes-with-filter" name="checkboxes-dynamic" value="81" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-81-checkboxes-with-filter">Checkbox option 81</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-80-checkboxes-with-filter" name="checkboxes-dynamic" value="80" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-80-checkboxes-with-filter">Checkbox option 80</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-79-checkboxes-with-filter" name="checkboxes-dynamic" value="79" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-79-checkboxes-with-filter">Checkbox option 79</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-78-checkboxes-with-filter" name="checkboxes-dynamic" value="78" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-78-checkboxes-with-filter">Checkbox option 78</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-77-checkboxes-with-filter" name="checkboxes-dynamic" value="77" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-77-checkboxes-with-filter">Checkbox option 77</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-76-checkboxes-with-filter" name="checkboxes-dynamic" value="76" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-76-checkboxes-with-filter">Checkbox option 76</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-75-checkboxes-with-filter" name="checkboxes-dynamic" value="75" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-75-checkboxes-with-filter">Checkbox option 75</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-74-checkboxes-with-filter" name="checkboxes-dynamic" value="74" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-74-checkboxes-with-filter">Checkbox option 74</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-73-checkboxes-with-filter" name="checkboxes-dynamic" value="73" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-73-checkboxes-with-filter">Checkbox option 73</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-72-checkboxes-with-filter" name="checkboxes-dynamic" value="72" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-72-checkboxes-with-filter">Checkbox option 72</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-71-checkboxes-with-filter" name="checkboxes-dynamic" value="71" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-71-checkboxes-with-filter">Checkbox option 71</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-70-checkboxes-with-filter" name="checkboxes-dynamic" value="70" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-70-checkboxes-with-filter">Checkbox option 70</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-69-checkboxes-with-filter" name="checkboxes-dynamic" value="69" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-69-checkboxes-with-filter">Checkbox option 69</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-68-checkboxes-with-filter" name="checkboxes-dynamic" value="68" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-68-checkboxes-with-filter">Checkbox option 68</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-67-checkboxes-with-filter" name="checkboxes-dynamic" value="67" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-67-checkboxes-with-filter">Checkbox option 67</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-66-checkboxes-with-filter" name="checkboxes-dynamic" value="66" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-66-checkboxes-with-filter">Checkbox option 66</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-65-checkboxes-with-filter" name="checkboxes-dynamic" value="65" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-65-checkboxes-with-filter">Checkbox option 65</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-64-checkboxes-with-filter" name="checkboxes-dynamic" value="64" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-64-checkboxes-with-filter">Checkbox option 64</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-63-checkboxes-with-filter" name="checkboxes-dynamic" value="63" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-63-checkboxes-with-filter">Checkbox option 63</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-62-checkboxes-with-filter" name="checkboxes-dynamic" value="62" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-62-checkboxes-with-filter">Checkbox option 62</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-61-checkboxes-with-filter" name="checkboxes-dynamic" value="61" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-61-checkboxes-with-filter">Checkbox option 61</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-60-checkboxes-with-filter" name="checkboxes-dynamic" value="60" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-60-checkboxes-with-filter">Checkbox option 60</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-59-checkboxes-with-filter" name="checkboxes-dynamic" value="59" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-59-checkboxes-with-filter">Checkbox option 59</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-58-checkboxes-with-filter" name="checkboxes-dynamic" value="58" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-58-checkboxes-with-filter">Checkbox option 58</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-57-checkboxes-with-filter" name="checkboxes-dynamic" value="57" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-57-checkboxes-with-filter">Checkbox option 57</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-56-checkboxes-with-filter" name="checkboxes-dynamic" value="56" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-56-checkboxes-with-filter">Checkbox option 56</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-55-checkboxes-with-filter" name="checkboxes-dynamic" value="55" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-55-checkboxes-with-filter">Checkbox option 55</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-54-checkboxes-with-filter" name="checkboxes-dynamic" value="54" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-54-checkboxes-with-filter">Checkbox option 54</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-53-checkboxes-with-filter" name="checkboxes-dynamic" value="53" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-53-checkboxes-with-filter">Checkbox option 53</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-52-checkboxes-with-filter" name="checkboxes-dynamic" value="52" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-52-checkboxes-with-filter">Checkbox option 52</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-51-checkboxes-with-filter" name="checkboxes-dynamic" value="51" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-51-checkboxes-with-filter">Checkbox option 51</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-50-checkboxes-with-filter" name="checkboxes-dynamic" value="50" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-50-checkboxes-with-filter">Checkbox option 50</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-49-checkboxes-with-filter" name="checkboxes-dynamic" value="49" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-49-checkboxes-with-filter">Checkbox option 49</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-48-checkboxes-with-filter" name="checkboxes-dynamic" value="48" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-48-checkboxes-with-filter">Checkbox option 48</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-47-checkboxes-with-filter" name="checkboxes-dynamic" value="47" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-47-checkboxes-with-filter">Checkbox option 47</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-46-checkboxes-with-filter" name="checkboxes-dynamic" value="46" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-46-checkboxes-with-filter">Checkbox option 46</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-45-checkboxes-with-filter" name="checkboxes-dynamic" value="45" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-45-checkboxes-with-filter">Checkbox option 45</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-44-checkboxes-with-filter" name="checkboxes-dynamic" value="44" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-44-checkboxes-with-filter">Checkbox option 44</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-43-checkboxes-with-filter" name="checkboxes-dynamic" value="43" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-43-checkboxes-with-filter">Checkbox option 43</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-42-checkboxes-with-filter" name="checkboxes-dynamic" value="42" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-42-checkboxes-with-filter">Checkbox option 42</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-41-checkboxes-with-filter" name="checkboxes-dynamic" value="41" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-41-checkboxes-with-filter">Checkbox option 41</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-40-checkboxes-with-filter" name="checkboxes-dynamic" value="40" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-40-checkboxes-with-filter">Checkbox option 40</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-39-checkboxes-with-filter" name="checkboxes-dynamic" value="39" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-39-checkboxes-with-filter">Checkbox option 39</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-38-checkboxes-with-filter" name="checkboxes-dynamic" value="38" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-38-checkboxes-with-filter">Checkbox option 38</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-37-checkboxes-with-filter" name="checkboxes-dynamic" value="37" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-37-checkboxes-with-filter">Checkbox option 37</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-36-checkboxes-with-filter" name="checkboxes-dynamic" value="36" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-36-checkboxes-with-filter">Checkbox option 36</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-35-checkboxes-with-filter" name="checkboxes-dynamic" value="35" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-35-checkboxes-with-filter">Checkbox option 35</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-34-checkboxes-with-filter" name="checkboxes-dynamic" value="34" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-34-checkboxes-with-filter">Checkbox option 34</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-33-checkboxes-with-filter" name="checkboxes-dynamic" value="33" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-33-checkboxes-with-filter">Checkbox option 33</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-32-checkboxes-with-filter" name="checkboxes-dynamic" value="32" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-32-checkboxes-with-filter">Checkbox option 32</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-31-checkboxes-with-filter" name="checkboxes-dynamic" value="31" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-31-checkboxes-with-filter">Checkbox option 31</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-30-checkboxes-with-filter" name="checkboxes-dynamic" value="30" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-30-checkboxes-with-filter">Checkbox option 30</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-29-checkboxes-with-filter" name="checkboxes-dynamic" value="29" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-29-checkboxes-with-filter">Checkbox option 29</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-28-checkboxes-with-filter" name="checkboxes-dynamic" value="28" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-28-checkboxes-with-filter">Checkbox option 28</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-27-checkboxes-with-filter" name="checkboxes-dynamic" value="27" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-27-checkboxes-with-filter">Checkbox option 27</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-26-checkboxes-with-filter" name="checkboxes-dynamic" value="26" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-26-checkboxes-with-filter">Checkbox option 26</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-25-checkboxes-with-filter" name="checkboxes-dynamic" value="25" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-25-checkboxes-with-filter">Checkbox option 25</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-24-checkboxes-with-filter" name="checkboxes-dynamic" value="24" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-24-checkboxes-with-filter">Checkbox option 24</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-23-checkboxes-with-filter" name="checkboxes-dynamic" value="23" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-23-checkboxes-with-filter">Checkbox option 23</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-22-checkboxes-with-filter" name="checkboxes-dynamic" value="22" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-22-checkboxes-with-filter">Checkbox option 22</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-21-checkboxes-with-filter" name="checkboxes-dynamic" value="21" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-21-checkboxes-with-filter">Checkbox option 21</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-20-checkboxes-with-filter" name="checkboxes-dynamic" value="20" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-20-checkboxes-with-filter">Checkbox option 20</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-19-checkboxes-with-filter" name="checkboxes-dynamic" value="19" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-19-checkboxes-with-filter">Checkbox option 19</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-18-checkboxes-with-filter" name="checkboxes-dynamic" value="18" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-18-checkboxes-with-filter">Checkbox option 18</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-17-checkboxes-with-filter" name="checkboxes-dynamic" value="17" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-17-checkboxes-with-filter">Checkbox option 17</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-16-checkboxes-with-filter" name="checkboxes-dynamic" value="16" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-16-checkboxes-with-filter">Checkbox option 16</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-15-checkboxes-with-filter" name="checkboxes-dynamic" value="15" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-15-checkboxes-with-filter">Checkbox option 15</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-14-checkboxes-with-filter" name="checkboxes-dynamic" value="14" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-14-checkboxes-with-filter">Checkbox option 14</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-13-checkboxes-with-filter" name="checkboxes-dynamic" value="13" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-13-checkboxes-with-filter">Checkbox option 13</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-12-checkboxes-with-filter" name="checkboxes-dynamic" value="12" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-12-checkboxes-with-filter">Checkbox option 12</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-11-checkboxes-with-filter" name="checkboxes-dynamic" value="11" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-11-checkboxes-with-filter">Checkbox option 11</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-10-checkboxes-with-filter" name="checkboxes-dynamic" value="10" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-10-checkboxes-with-filter">Checkbox option 10</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-9-checkboxes-with-filter" name="checkboxes-dynamic" value="9" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-9-checkboxes-with-filter">Checkbox option 9</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-8-checkboxes-with-filter" name="checkboxes-dynamic" value="8" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-8-checkboxes-with-filter">Checkbox option 8</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-7-checkboxes-with-filter" name="checkboxes-dynamic" value="7" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-7-checkboxes-with-filter">Checkbox option 7</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-6-checkboxes-with-filter" name="checkboxes-dynamic" value="6" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-6-checkboxes-with-filter">Checkbox option 6</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-5-checkboxes-with-filter" name="checkboxes-dynamic" value="5" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-5-checkboxes-with-filter">Checkbox option 5</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-4-checkboxes-with-filter" name="checkboxes-dynamic" value="4" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-4-checkboxes-with-filter">Checkbox option 4</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-3-checkboxes-with-filter" name="checkboxes-dynamic" value="3" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-3-checkboxes-with-filter">Checkbox option 3</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-2-checkboxes-with-filter" name="checkboxes-dynamic" value="2" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-2-checkboxes-with-filter">Checkbox option 2</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-1-checkboxes-with-filter" name="checkboxes-dynamic" value="1" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-1-checkboxes-with-filter">Checkbox option 1</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-filter-stacked-checkbox-0-checkboxes-with-filter" name="checkboxes-dynamic" class="checkbox stacked" />
<label for="input-default-filter-stacked-checkbox-0-checkboxes-with-filter">Checkbox option 0</label>
</div>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</fieldset>
</div>
<div class="modal-actions">
<button type="button" class="button button-primary checkbox-filter__submit modal-close" data-target="modalstacked">Confirm selection
</button>
</div>
</div>
<div class="modal-overlay modal-close checkbox-filter__close" data-target="modalstacked" tabindex="-1"></div>
</div>
<button type="button" class="button button-secondary button-small icon-left icon-search checkbox-filter__open" aria-controls="modalstacked" aria-expanded="false">
Show more
</button>
</div>
<div class="form-item-column">
</div>
</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>
<div class="bold show-desktop-only mb-20">
<p class="">This is an optional introductory text. If this text is present, it is never shown below desktop width!</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam dignissimos itaque. Ad autem consequuntur deleniti doloremque, impedit maxime praesentium provident quaerat reiciendis repudiandae vero?</p>
</div>
<div class="selected-filters">
<h2>You have selected:</h2>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag filter ">
Filter one
<button><span class="visually-hidden">Remove Filter one</span></button>
</span>
</li>
<li>
<span class="tag filter ">
Filter two
<button><span class="visually-hidden">Remove Filter two</span></button>
</span>
</li>
<li>
<span class="tag filter ">
Filter three
<button><span class="visually-hidden">Remove Filter three</span></button>
</span>
</li>
<li>
<a href='#'>
Remove all filters </a>
</li>
</ul>
</div>
</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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<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": [
{
"label": "Checkbox option 99",
"id": "checkbox-99-checkboxes-with-filter",
"value": 99,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 98",
"id": "checkbox-98-checkboxes-with-filter",
"value": 98,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 97",
"id": "checkbox-97-checkboxes-with-filter",
"value": 97,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 96",
"id": "checkbox-96-checkboxes-with-filter",
"value": 96,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 95",
"id": "checkbox-95-checkboxes-with-filter",
"value": 95,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 94",
"id": "checkbox-94-checkboxes-with-filter",
"value": 94,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 93",
"id": "checkbox-93-checkboxes-with-filter",
"value": 93,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 92",
"id": "checkbox-92-checkboxes-with-filter",
"value": 92,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 91",
"id": "checkbox-91-checkboxes-with-filter",
"value": 91,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 90",
"id": "checkbox-90-checkboxes-with-filter",
"value": 90,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 89",
"id": "checkbox-89-checkboxes-with-filter",
"value": 89,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 88",
"id": "checkbox-88-checkboxes-with-filter",
"value": 88,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 87",
"id": "checkbox-87-checkboxes-with-filter",
"value": 87,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 86",
"id": "checkbox-86-checkboxes-with-filter",
"value": 86,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 85",
"id": "checkbox-85-checkboxes-with-filter",
"value": 85,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 84",
"id": "checkbox-84-checkboxes-with-filter",
"value": 84,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 83",
"id": "checkbox-83-checkboxes-with-filter",
"value": 83,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 82",
"id": "checkbox-82-checkboxes-with-filter",
"value": 82,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 81",
"id": "checkbox-81-checkboxes-with-filter",
"value": 81,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 80",
"id": "checkbox-80-checkboxes-with-filter",
"value": 80,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 79",
"id": "checkbox-79-checkboxes-with-filter",
"value": 79,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 78",
"id": "checkbox-78-checkboxes-with-filter",
"value": 78,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 77",
"id": "checkbox-77-checkboxes-with-filter",
"value": 77,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 76",
"id": "checkbox-76-checkboxes-with-filter",
"value": 76,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 75",
"id": "checkbox-75-checkboxes-with-filter",
"value": 75,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 74",
"id": "checkbox-74-checkboxes-with-filter",
"value": 74,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 73",
"id": "checkbox-73-checkboxes-with-filter",
"value": 73,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 72",
"id": "checkbox-72-checkboxes-with-filter",
"value": 72,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 71",
"id": "checkbox-71-checkboxes-with-filter",
"value": 71,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 70",
"id": "checkbox-70-checkboxes-with-filter",
"value": 70,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 69",
"id": "checkbox-69-checkboxes-with-filter",
"value": 69,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 68",
"id": "checkbox-68-checkboxes-with-filter",
"value": 68,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 67",
"id": "checkbox-67-checkboxes-with-filter",
"value": 67,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 66",
"id": "checkbox-66-checkboxes-with-filter",
"value": 66,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 65",
"id": "checkbox-65-checkboxes-with-filter",
"value": 65,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 64",
"id": "checkbox-64-checkboxes-with-filter",
"value": 64,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 63",
"id": "checkbox-63-checkboxes-with-filter",
"value": 63,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 62",
"id": "checkbox-62-checkboxes-with-filter",
"value": 62,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 61",
"id": "checkbox-61-checkboxes-with-filter",
"value": 61,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 60",
"id": "checkbox-60-checkboxes-with-filter",
"value": 60,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 59",
"id": "checkbox-59-checkboxes-with-filter",
"value": 59,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 58",
"id": "checkbox-58-checkboxes-with-filter",
"value": 58,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 57",
"id": "checkbox-57-checkboxes-with-filter",
"value": 57,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 56",
"id": "checkbox-56-checkboxes-with-filter",
"value": 56,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 55",
"id": "checkbox-55-checkboxes-with-filter",
"value": 55,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 54",
"id": "checkbox-54-checkboxes-with-filter",
"value": 54,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 53",
"id": "checkbox-53-checkboxes-with-filter",
"value": 53,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 52",
"id": "checkbox-52-checkboxes-with-filter",
"value": 52,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 51",
"id": "checkbox-51-checkboxes-with-filter",
"value": 51,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 50",
"id": "checkbox-50-checkboxes-with-filter",
"value": 50,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 49",
"id": "checkbox-49-checkboxes-with-filter",
"value": 49,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 48",
"id": "checkbox-48-checkboxes-with-filter",
"value": 48,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 47",
"id": "checkbox-47-checkboxes-with-filter",
"value": 47,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 46",
"id": "checkbox-46-checkboxes-with-filter",
"value": 46,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 45",
"id": "checkbox-45-checkboxes-with-filter",
"value": 45,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 44",
"id": "checkbox-44-checkboxes-with-filter",
"value": 44,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 43",
"id": "checkbox-43-checkboxes-with-filter",
"value": 43,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 42",
"id": "checkbox-42-checkboxes-with-filter",
"value": 42,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 41",
"id": "checkbox-41-checkboxes-with-filter",
"value": 41,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 40",
"id": "checkbox-40-checkboxes-with-filter",
"value": 40,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 39",
"id": "checkbox-39-checkboxes-with-filter",
"value": 39,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 38",
"id": "checkbox-38-checkboxes-with-filter",
"value": 38,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 37",
"id": "checkbox-37-checkboxes-with-filter",
"value": 37,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 36",
"id": "checkbox-36-checkboxes-with-filter",
"value": 36,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 35",
"id": "checkbox-35-checkboxes-with-filter",
"value": 35,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 34",
"id": "checkbox-34-checkboxes-with-filter",
"value": 34,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 33",
"id": "checkbox-33-checkboxes-with-filter",
"value": 33,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 32",
"id": "checkbox-32-checkboxes-with-filter",
"value": 32,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 31",
"id": "checkbox-31-checkboxes-with-filter",
"value": 31,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 30",
"id": "checkbox-30-checkboxes-with-filter",
"value": 30,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 29",
"id": "checkbox-29-checkboxes-with-filter",
"value": 29,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 28",
"id": "checkbox-28-checkboxes-with-filter",
"value": 28,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 27",
"id": "checkbox-27-checkboxes-with-filter",
"value": 27,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 26",
"id": "checkbox-26-checkboxes-with-filter",
"value": 26,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 25",
"id": "checkbox-25-checkboxes-with-filter",
"value": 25,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 24",
"id": "checkbox-24-checkboxes-with-filter",
"value": 24,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 23",
"id": "checkbox-23-checkboxes-with-filter",
"value": 23,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 22",
"id": "checkbox-22-checkboxes-with-filter",
"value": 22,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 21",
"id": "checkbox-21-checkboxes-with-filter",
"value": 21,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 20",
"id": "checkbox-20-checkboxes-with-filter",
"value": 20,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 19",
"id": "checkbox-19-checkboxes-with-filter",
"value": 19,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 18",
"id": "checkbox-18-checkboxes-with-filter",
"value": 18,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 17",
"id": "checkbox-17-checkboxes-with-filter",
"value": 17,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 16",
"id": "checkbox-16-checkboxes-with-filter",
"value": 16,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 15",
"id": "checkbox-15-checkboxes-with-filter",
"value": 15,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 14",
"id": "checkbox-14-checkboxes-with-filter",
"value": 14,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 13",
"id": "checkbox-13-checkboxes-with-filter",
"value": 13,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 12",
"id": "checkbox-12-checkboxes-with-filter",
"value": 12,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 11",
"id": "checkbox-11-checkboxes-with-filter",
"value": 11,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 10",
"id": "checkbox-10-checkboxes-with-filter",
"value": 10,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 9",
"id": "checkbox-9-checkboxes-with-filter",
"value": 9,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 8",
"id": "checkbox-8-checkboxes-with-filter",
"value": 8,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 7",
"id": "checkbox-7-checkboxes-with-filter",
"value": 7,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 6",
"id": "checkbox-6-checkboxes-with-filter",
"value": 6,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 5",
"id": "checkbox-5-checkboxes-with-filter",
"value": 5,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 4",
"id": "checkbox-4-checkboxes-with-filter",
"value": 4,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 3",
"id": "checkbox-3-checkboxes-with-filter",
"value": 3,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 2",
"id": "checkbox-2-checkboxes-with-filter",
"value": 2,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 1",
"id": "checkbox-1-checkboxes-with-filter",
"value": 1,
"name": "checkboxes-dynamic"
},
{
"label": "Checkbox option 0",
"id": "checkbox-0-checkboxes-with-filter",
"value": 0,
"name": "checkboxes-dynamic"
}
],
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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",
"tags": [
"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;
}
.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;
> legend {
padding: 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');
}
}
});
})();