The filter layout is a two-column layout version of the overview layout with a left-side column to show filters.
Use the filter layout for overview pages where it should be possible to filter the overview of content.
Examples of overview pages of content with filters:
Do not use the filter layout to present an overview of content where it should not be possible to filter the overview of content. In this case, use the default overview layout instead.
Do not use the filter layout for other uses than to show an overview of content.
Do not use the filter layout when the left-side column will be used for other uses than showing filters.
A filter layout conists of the following parts:
On desktop resolutions and tablets in landscape mode, this two-column layout is used.
On tablets in portrait mode and mobile resolutions, the two-column layout is transformed to a one-column layout. This is done by putting the left-side column with filters into a modal that is opened by clicking a button “Filters” to toggle the modal and show the filters.
See the example for the responsive behavior of the filter layout on various screen resolutions.
The filters are represented in a filter form using the form component.
Each filter in the filter form is created and presented as a fieldset.
Inside each the filter fieldset, one of the following form elements can be used:
The filter form has one form action and this is the submit button of the form.
The submit button submits the values entered or updated by the user and reloads the page shows the new set of results based on the current active/selected filters.
Important: The page and the set of results are never reloaded automatically. After a user enters or updates one or more values of one or more filters, the page is not reloaded. It is only after the user clicks the submit button that the values are submitted, the page reloads and the new set of results is shown. Doing otherwise is an accessibility violation (WCAG 3.2.5).
Good to know: After the page is reloaded showing the new set of results, make sure the page automatically scrolls to the selected filters with label “You have selected:”. This way, the user sees the new set of results faster (less scrolling is required).
{% include '@header' with {
"site_name": "Stad Gent",
"search": true,
"header_search_id": "header-search",
"header_search_label": "Search",
"header_search_placeholder": "Search",
"header_search_text": "Search",
"breadcrumbs_items": [
"<a href='#'>Home</a>",
"<a href='#'>Overview</a>",
"<a href='#'>Theme</a>",
"<a href='#'>Subpage</a>",
"<span>Page title</span>"
]
} %}
<main class="filter-page">
{% include '@filter' with {
'checkboxes': checkboxes,
'results': teasers
}%}
</main>
<footer>
{% include '@footer' with footerConfig %}
</footer>
<header class="header">
<div class="content-container">
<a href="#" title="Home" class="site-logo " rel="home">
Stad Gent
</a>
<a href='#' class="search--link" title="search">
search </a>
<form class="form search">
<label for="default-header-search">Search
</label>
<input type="search" id="default-header-search" name="default-header-search" class="search" placeholder="Search" required="true" />
<button type="submit" class="button button- ">
Search
</button>
</form>
</div>
<nav class="breadcrumb section--default" aria-labelledby="default-header-crumbs">
<div class="content-container">
<h2 id="default-header-crumbs" class="visually-hidden">Breadcrumb</h2>
<ol class="no-style">
<li><a href='#'>Home</a></li>
<li><a href='#'>Overview</a></li>
<li><a href='#'>Theme</a></li>
<li><a href='#'>Subpage</a></li>
<li><span>Page title</span></li>
</ol>
</div>
</nav>
</header>
<main class="filter-page">
<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 class="button button-secondary close icon-cross modal-close" data-target="filter">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h3 id="filter-title">Filter the results</h3>
<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>
<span class="legend-title">Category</span>
</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>
<span class="legend-title">Price</span>
</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>
<span class="legend-title">Activities</span>
</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 class="button button-secondary 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>
<span class="legend-title">Activities</span>
</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">Filtercomponent</h1>
<div class="show-desktop-only">
<p>This is an optional introductory text. If this text is present, it is never shown below desktop fold!</p>
<p>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">
<div class="filter-page-label">You have selected:</div>
<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">
<div class="filter-page-label">We have found 673 results</div>
<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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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 class="h4">Search result</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
some tag
</span>
</li>
</ul>
</div>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=8:5+(570x570)" alt="" /></div>
</figure>
</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="standalone-link back">
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="#" class="standalone-link">
Next
<span class="visually-hidden">page</span></a></li>
</ul>
</nav>
</section>
</div>
</main>
<footer>
<section class="footer">
<h2 class="visually-hidden">Footer</h2>
<div class="footer-top">
<div class="content-container">
<div class="footer--column">
<div class="gentinfo-block dark-background">
<div class="gentinfo-block-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
<p>Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!</p>
<p><i class="icon-clock" aria-hidden="true"></i>Monday to Saturday from 8.00 am until 7.00 pm.</p>
<ul class="icon-list inline">
<li><i class="icon-phone" aria-hidden="true"></i><a class="no-icon" href="tel:+32 9 210 10 10">09 210 10 10</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
<li><i class="icon-subscribe" aria-hidden="true"></i><a class="no-icon" href="https://stad.gent/contact">Contact form</a></li>
</ul>
</div>
<button type="button" class="button button-secondary gentinfo-chat-button icon-chat-round icon-left ">
Chat with us
</button>
</div>
</div>
<div class="footer--column">
<h4>Useful links</h4>
<ul class="">
<li><a href="https://jobs.gent.be/">Vacancies</a></li>
<li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">City plan</a></li>
<li><a href="https://persruimte.stad.gent/nl">City of Ghent newsroom</a></li>
</ul>
</div>
<div class="footer--column">
<h4>Follow the city of Ghent</h4>
<div class="social-list">
<ul class="">
<li><a href="https://www.facebook.com/stadsbestuurgent"><i aria-hidden="true" class="icon-facebook"></i><span class="visually-hidden">Facebook</span></a></li>
<li><a href="https://www.twitter.com/stadgent"><i aria-hidden="true" class="icon-twitter"></i><span class="visually-hidden">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/company/stad-gent"><i aria-hidden="true" class="icon-linkedin"></i><span class="visually-hidden">LinkedIn</span></a></li>
<li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw"><i aria-hidden="true" class="icon-youtube"></i><span class="visually-hidden">Youtube</span></a></li>
<li><a href="https://www.instagram.com/stadgent/"><i aria-hidden="true" class="icon-instagram"></i><span class="visually-hidden">Instagram</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bottom content-container">
<div class="footer--column">
<ul class="">
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/gebruiksvoorwaarden-website-stad-gent">Terms of use</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/met-respect-voor-uw-privacy">Privacy</a></li>
<li><a href="https://stad.gent/nl/responsible-disclosure">Responsible disclosure</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/toegankelijkheidsverklaring-stad-gent">Accessibility statement</a></li>
<li><a href="#">Cookie settings</a></li>
</ul>
</div>
<div class="footer--column partnership">
<span>In cooperation with District09</span><i aria-hidden="true" class="icon-district09"></i>
</div>
</div>
</section>
</footer>
{
"teasers": [
{
"teaser_uid": "search_teaser_9",
"image_ratio": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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": "1:1",
"image_src": "https://via.placeholder.com/570x570&text=8:5+(570x570)",
"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"
]
}
],
"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"
}
],
"footerConfig": {
"gentinfo": {
"title": "gentinfo",
"description": "Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!",
"open": "Monday to Saturday from 8.00 am until 7.00 pm.",
"phone": {
"label": "09 210 10 10",
"machine": "+32 9 210 10 10"
},
"email": "gentinfo@stad.gent",
"form": "Contact form",
"chat": "Chat with us"
},
"disclaimer": {
"title": "Useful links",
"links": [
"Vacancies",
"City plan",
"City of Ghent newsroom"
]
},
"social": {
"title": "Follow the city of Ghent"
},
"bottom": {
"partnership": "In cooperation with District09",
"links": [
"Terms of use",
"Privacy",
"Responsible disclosure",
"Accessibility statement",
"Cookie settings"
]
}
}
}
$grid-gutter-width: 65px;
.sidebar-layout {
@extend %content-container;
display: flex;
flex-wrap: wrap;
margin: 70px auto 80px;
gap: $grid-gutter-width;
.sidebar {
@include desktop {
@include col(4);
}
&.modal {
max-height: none;
}
}
.content {
@include desktop {
@include col(8);
}
}
}