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",
"mijn_gent_block_items": [
"<a href='javascript:(void);'>Mijn profiel</a>",
"<a href='javascript:(void);'>Nieuwsbrieven</a>",
"<a href='javascript:(void);'>Historiek</a>"
],
"auth": true,
"search": true,
"mijn_gent_block_auth": 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" />
<input type="submit" value="Search" class="" />
</form>
<div class="authentication accordion">
<button aria-expanded="false" aria-controls="default-authentication" class="toggle accordion--button">
<span class="avatar">j</span>
<span>James McGill</span>
</button>
<div id="default-authentication" class="accordion--content" aria-hidden="true" hidden>
<article class="content">
<h2>Mijn bibliotheek</h2>
<section class="profile">
<span class="avatar">j</span>
<div class="profile-info">
<span>James McGill</span>
<a href='#' class="button button-primary button-small">
Show profile </a>
</div>
</section>
<section>
<ul class="links">
<li><a href='javascript:(void);'>Overzicht</a></li>
<li><a href='javascript:(void);'>Leestips</a></li>
</ul>
</section>
<section>
<h2>Mijn gent</h2>
<ul class="links">
<li><a href='javascript:(void);'>Mijn profiel</a></li>
<li><a href='javascript:(void);'>Nieuwsbrieven</a></li>
<li><a href='javascript:(void);'>Historiek</a></li>
</ul>
</section>
<footer>
<a href='javascript:(void);' class="button button-small button-secondary">
Afmelden </a>
</footer>
</article>
</div>
</div>
</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>
<hr />
</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 type="button" class="button close icon-cross modal-close" data-target="filter">
<span>Close</span>
</button>
</div>
<div class="modal-content">
<h2 id="filter-title">Filter the results</h2>
<div class="form-item stacked">
<label for="default-name_id">Name
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-name_id" name="default-name_name" class="text" />
</div>
<div class="form-item-column">
</div>
</div>
</div>
<fieldset class="form-item stacked">
<legend>
Price
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-1" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-1">Less than €100</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-2" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-2">€100 - €249</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-3" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-3">€250 - €499</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-4" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-4">€500 - €1000</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-price-stacked-default-price-5" name="default-price" class="checkbox stacked" />
<label for="input-default-price-stacked-default-price-5">More than €1000</label>
</div>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-item stacked">
<legend>
Category
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-1" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-1">Games</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-2" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-2">Movies</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-3" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-3">Series</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-default-category-stacked-default-checkbox-4" name="default-checkboxgroup" class="checkbox stacked" />
<label for="input-default-category-stacked-default-checkbox-4">Books</label>
</div>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-item stacked checkbox-filter">
<legend>
Activities
<span class="label-optional">(Optional)</span>
</legend>
<div class="form-columns">
<div class="form-item-column">
<div id="modal" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">
<div class="modal-inner">
<div class="modal-header">
<button type="button" class="button close icon-cross modal-close checkbox-filter__close" data-target="modal">
<span>Close</span>
</button>
</div>
<div class="modal-content" tabindex="0">
<h3 id="modal-title">Activities<span class="label-optional">(Optional)</span></h3>
<div class="checkbox-filter__selected"></div>
<div class="form-item">
<label for="checkboxes__filter_id_">Filter the list
below</label>
<div class="form-item checkbox-filter__filter__search-wrapper">
<input type="search" id="checkboxes__filter_id_" class="checkbox-filter__filter">
<p aria-live="polite" aria-atomic="true" class="checkbox-filter__result-wrapper">
<span class="checkbox-filter__result">#</span> filter(s) found
</p>
</div>
</div>
<div class="checkbox-filter__checkboxes">
<h4 class="checkbox-filter__category"></h4>
<div class="checkbox full-width">
<input type="checkbox" id="-" class="checkbox" />
<label for="-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-99-checkboxes-with-filter" name="checkboxgroup[]" value="99" class="checkbox" />
<label for="checkbox-99-checkboxes-with-filter">Checkbox option 99</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-98-checkboxes-with-filter" name="checkboxgroup[]" value="98" class="checkbox" />
<label for="checkbox-98-checkboxes-with-filter">Checkbox option 98</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-97-checkboxes-with-filter" name="checkboxgroup[]" value="97" class="checkbox" />
<label for="checkbox-97-checkboxes-with-filter">Checkbox option 97</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-96-checkboxes-with-filter" name="checkboxgroup[]" value="96" class="checkbox" />
<label for="checkbox-96-checkboxes-with-filter">Checkbox option 96</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-95-checkboxes-with-filter" name="checkboxgroup[]" value="95" class="checkbox" />
<label for="checkbox-95-checkboxes-with-filter">Checkbox option 95</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-94-checkboxes-with-filter" name="checkboxgroup[]" value="94" class="checkbox" />
<label for="checkbox-94-checkboxes-with-filter">Checkbox option 94</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-93-checkboxes-with-filter" name="checkboxgroup[]" value="93" class="checkbox" />
<label for="checkbox-93-checkboxes-with-filter">Checkbox option 93</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-92-checkboxes-with-filter" name="checkboxgroup[]" value="92" class="checkbox" />
<label for="checkbox-92-checkboxes-with-filter">Checkbox option 92</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-91-checkboxes-with-filter" name="checkboxgroup[]" value="91" class="checkbox" />
<label for="checkbox-91-checkboxes-with-filter">Checkbox option 91</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-90-checkboxes-with-filter" name="checkboxgroup[]" value="90" class="checkbox" />
<label for="checkbox-90-checkboxes-with-filter">Checkbox option 90</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-89-checkboxes-with-filter" name="checkboxgroup[]" value="89" class="checkbox" />
<label for="checkbox-89-checkboxes-with-filter">Checkbox option 89</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-88-checkboxes-with-filter" name="checkboxgroup[]" value="88" class="checkbox" />
<label for="checkbox-88-checkboxes-with-filter">Checkbox option 88</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-87-checkboxes-with-filter" name="checkboxgroup[]" value="87" class="checkbox" />
<label for="checkbox-87-checkboxes-with-filter">Checkbox option 87</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-86-checkboxes-with-filter" name="checkboxgroup[]" value="86" class="checkbox" />
<label for="checkbox-86-checkboxes-with-filter">Checkbox option 86</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-85-checkboxes-with-filter" name="checkboxgroup[]" value="85" class="checkbox" />
<label for="checkbox-85-checkboxes-with-filter">Checkbox option 85</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-84-checkboxes-with-filter" name="checkboxgroup[]" value="84" class="checkbox" />
<label for="checkbox-84-checkboxes-with-filter">Checkbox option 84</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-83-checkboxes-with-filter" name="checkboxgroup[]" value="83" class="checkbox" />
<label for="checkbox-83-checkboxes-with-filter">Checkbox option 83</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-82-checkboxes-with-filter" name="checkboxgroup[]" value="82" class="checkbox" />
<label for="checkbox-82-checkboxes-with-filter">Checkbox option 82</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-81-checkboxes-with-filter" name="checkboxgroup[]" value="81" class="checkbox" />
<label for="checkbox-81-checkboxes-with-filter">Checkbox option 81</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-80-checkboxes-with-filter" name="checkboxgroup[]" value="80" class="checkbox" />
<label for="checkbox-80-checkboxes-with-filter">Checkbox option 80</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-79-checkboxes-with-filter" name="checkboxgroup[]" value="79" class="checkbox" />
<label for="checkbox-79-checkboxes-with-filter">Checkbox option 79</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-78-checkboxes-with-filter" name="checkboxgroup[]" value="78" class="checkbox" />
<label for="checkbox-78-checkboxes-with-filter">Checkbox option 78</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-77-checkboxes-with-filter" name="checkboxgroup[]" value="77" class="checkbox" />
<label for="checkbox-77-checkboxes-with-filter">Checkbox option 77</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-76-checkboxes-with-filter" name="checkboxgroup[]" value="76" class="checkbox" />
<label for="checkbox-76-checkboxes-with-filter">Checkbox option 76</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-75-checkboxes-with-filter" name="checkboxgroup[]" value="75" class="checkbox" />
<label for="checkbox-75-checkboxes-with-filter">Checkbox option 75</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-74-checkboxes-with-filter" name="checkboxgroup[]" value="74" class="checkbox" />
<label for="checkbox-74-checkboxes-with-filter">Checkbox option 74</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-73-checkboxes-with-filter" name="checkboxgroup[]" value="73" class="checkbox" />
<label for="checkbox-73-checkboxes-with-filter">Checkbox option 73</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-72-checkboxes-with-filter" name="checkboxgroup[]" value="72" class="checkbox" />
<label for="checkbox-72-checkboxes-with-filter">Checkbox option 72</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-71-checkboxes-with-filter" name="checkboxgroup[]" value="71" class="checkbox" />
<label for="checkbox-71-checkboxes-with-filter">Checkbox option 71</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-70-checkboxes-with-filter" name="checkboxgroup[]" value="70" class="checkbox" />
<label for="checkbox-70-checkboxes-with-filter">Checkbox option 70</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-69-checkboxes-with-filter" name="checkboxgroup[]" value="69" class="checkbox" />
<label for="checkbox-69-checkboxes-with-filter">Checkbox option 69</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-68-checkboxes-with-filter" name="checkboxgroup[]" value="68" class="checkbox" />
<label for="checkbox-68-checkboxes-with-filter">Checkbox option 68</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-67-checkboxes-with-filter" name="checkboxgroup[]" value="67" class="checkbox" />
<label for="checkbox-67-checkboxes-with-filter">Checkbox option 67</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-66-checkboxes-with-filter" name="checkboxgroup[]" value="66" class="checkbox" />
<label for="checkbox-66-checkboxes-with-filter">Checkbox option 66</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-65-checkboxes-with-filter" name="checkboxgroup[]" value="65" class="checkbox" />
<label for="checkbox-65-checkboxes-with-filter">Checkbox option 65</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-64-checkboxes-with-filter" name="checkboxgroup[]" value="64" class="checkbox" />
<label for="checkbox-64-checkboxes-with-filter">Checkbox option 64</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-63-checkboxes-with-filter" name="checkboxgroup[]" value="63" class="checkbox" />
<label for="checkbox-63-checkboxes-with-filter">Checkbox option 63</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-62-checkboxes-with-filter" name="checkboxgroup[]" value="62" class="checkbox" />
<label for="checkbox-62-checkboxes-with-filter">Checkbox option 62</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-61-checkboxes-with-filter" name="checkboxgroup[]" value="61" class="checkbox" />
<label for="checkbox-61-checkboxes-with-filter">Checkbox option 61</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-60-checkboxes-with-filter" name="checkboxgroup[]" value="60" class="checkbox" />
<label for="checkbox-60-checkboxes-with-filter">Checkbox option 60</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-59-checkboxes-with-filter" name="checkboxgroup[]" value="59" class="checkbox" />
<label for="checkbox-59-checkboxes-with-filter">Checkbox option 59</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-58-checkboxes-with-filter" name="checkboxgroup[]" value="58" class="checkbox" />
<label for="checkbox-58-checkboxes-with-filter">Checkbox option 58</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-57-checkboxes-with-filter" name="checkboxgroup[]" value="57" class="checkbox" />
<label for="checkbox-57-checkboxes-with-filter">Checkbox option 57</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-56-checkboxes-with-filter" name="checkboxgroup[]" value="56" class="checkbox" />
<label for="checkbox-56-checkboxes-with-filter">Checkbox option 56</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-55-checkboxes-with-filter" name="checkboxgroup[]" value="55" class="checkbox" />
<label for="checkbox-55-checkboxes-with-filter">Checkbox option 55</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-54-checkboxes-with-filter" name="checkboxgroup[]" value="54" class="checkbox" />
<label for="checkbox-54-checkboxes-with-filter">Checkbox option 54</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-53-checkboxes-with-filter" name="checkboxgroup[]" value="53" class="checkbox" />
<label for="checkbox-53-checkboxes-with-filter">Checkbox option 53</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-52-checkboxes-with-filter" name="checkboxgroup[]" value="52" class="checkbox" />
<label for="checkbox-52-checkboxes-with-filter">Checkbox option 52</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-51-checkboxes-with-filter" name="checkboxgroup[]" value="51" class="checkbox" />
<label for="checkbox-51-checkboxes-with-filter">Checkbox option 51</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-50-checkboxes-with-filter" name="checkboxgroup[]" value="50" class="checkbox" />
<label for="checkbox-50-checkboxes-with-filter">Checkbox option 50</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-49-checkboxes-with-filter" name="checkboxgroup[]" value="49" class="checkbox" />
<label for="checkbox-49-checkboxes-with-filter">Checkbox option 49</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-48-checkboxes-with-filter" name="checkboxgroup[]" value="48" class="checkbox" />
<label for="checkbox-48-checkboxes-with-filter">Checkbox option 48</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-47-checkboxes-with-filter" name="checkboxgroup[]" value="47" class="checkbox" />
<label for="checkbox-47-checkboxes-with-filter">Checkbox option 47</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-46-checkboxes-with-filter" name="checkboxgroup[]" value="46" class="checkbox" />
<label for="checkbox-46-checkboxes-with-filter">Checkbox option 46</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-45-checkboxes-with-filter" name="checkboxgroup[]" value="45" class="checkbox" />
<label for="checkbox-45-checkboxes-with-filter">Checkbox option 45</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-44-checkboxes-with-filter" name="checkboxgroup[]" value="44" class="checkbox" />
<label for="checkbox-44-checkboxes-with-filter">Checkbox option 44</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-43-checkboxes-with-filter" name="checkboxgroup[]" value="43" class="checkbox" />
<label for="checkbox-43-checkboxes-with-filter">Checkbox option 43</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-42-checkboxes-with-filter" name="checkboxgroup[]" value="42" class="checkbox" />
<label for="checkbox-42-checkboxes-with-filter">Checkbox option 42</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-41-checkboxes-with-filter" name="checkboxgroup[]" value="41" class="checkbox" />
<label for="checkbox-41-checkboxes-with-filter">Checkbox option 41</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-40-checkboxes-with-filter" name="checkboxgroup[]" value="40" class="checkbox" />
<label for="checkbox-40-checkboxes-with-filter">Checkbox option 40</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-39-checkboxes-with-filter" name="checkboxgroup[]" value="39" class="checkbox" />
<label for="checkbox-39-checkboxes-with-filter">Checkbox option 39</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-38-checkboxes-with-filter" name="checkboxgroup[]" value="38" class="checkbox" />
<label for="checkbox-38-checkboxes-with-filter">Checkbox option 38</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-37-checkboxes-with-filter" name="checkboxgroup[]" value="37" class="checkbox" />
<label for="checkbox-37-checkboxes-with-filter">Checkbox option 37</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-36-checkboxes-with-filter" name="checkboxgroup[]" value="36" class="checkbox" />
<label for="checkbox-36-checkboxes-with-filter">Checkbox option 36</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-35-checkboxes-with-filter" name="checkboxgroup[]" value="35" class="checkbox" />
<label for="checkbox-35-checkboxes-with-filter">Checkbox option 35</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-34-checkboxes-with-filter" name="checkboxgroup[]" value="34" class="checkbox" />
<label for="checkbox-34-checkboxes-with-filter">Checkbox option 34</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-33-checkboxes-with-filter" name="checkboxgroup[]" value="33" class="checkbox" />
<label for="checkbox-33-checkboxes-with-filter">Checkbox option 33</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-32-checkboxes-with-filter" name="checkboxgroup[]" value="32" class="checkbox" />
<label for="checkbox-32-checkboxes-with-filter">Checkbox option 32</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-31-checkboxes-with-filter" name="checkboxgroup[]" value="31" class="checkbox" />
<label for="checkbox-31-checkboxes-with-filter">Checkbox option 31</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-30-checkboxes-with-filter" name="checkboxgroup[]" value="30" class="checkbox" />
<label for="checkbox-30-checkboxes-with-filter">Checkbox option 30</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-29-checkboxes-with-filter" name="checkboxgroup[]" value="29" class="checkbox" />
<label for="checkbox-29-checkboxes-with-filter">Checkbox option 29</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-28-checkboxes-with-filter" name="checkboxgroup[]" value="28" class="checkbox" />
<label for="checkbox-28-checkboxes-with-filter">Checkbox option 28</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-27-checkboxes-with-filter" name="checkboxgroup[]" value="27" class="checkbox" />
<label for="checkbox-27-checkboxes-with-filter">Checkbox option 27</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-26-checkboxes-with-filter" name="checkboxgroup[]" value="26" class="checkbox" />
<label for="checkbox-26-checkboxes-with-filter">Checkbox option 26</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-25-checkboxes-with-filter" name="checkboxgroup[]" value="25" class="checkbox" />
<label for="checkbox-25-checkboxes-with-filter">Checkbox option 25</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-24-checkboxes-with-filter" name="checkboxgroup[]" value="24" class="checkbox" />
<label for="checkbox-24-checkboxes-with-filter">Checkbox option 24</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-23-checkboxes-with-filter" name="checkboxgroup[]" value="23" class="checkbox" />
<label for="checkbox-23-checkboxes-with-filter">Checkbox option 23</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-22-checkboxes-with-filter" name="checkboxgroup[]" value="22" class="checkbox" />
<label for="checkbox-22-checkboxes-with-filter">Checkbox option 22</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-21-checkboxes-with-filter" name="checkboxgroup[]" value="21" class="checkbox" />
<label for="checkbox-21-checkboxes-with-filter">Checkbox option 21</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-20-checkboxes-with-filter" name="checkboxgroup[]" value="20" class="checkbox" />
<label for="checkbox-20-checkboxes-with-filter">Checkbox option 20</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-19-checkboxes-with-filter" name="checkboxgroup[]" value="19" class="checkbox" />
<label for="checkbox-19-checkboxes-with-filter">Checkbox option 19</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-18-checkboxes-with-filter" name="checkboxgroup[]" value="18" class="checkbox" />
<label for="checkbox-18-checkboxes-with-filter">Checkbox option 18</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-17-checkboxes-with-filter" name="checkboxgroup[]" value="17" class="checkbox" />
<label for="checkbox-17-checkboxes-with-filter">Checkbox option 17</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-16-checkboxes-with-filter" name="checkboxgroup[]" value="16" class="checkbox" />
<label for="checkbox-16-checkboxes-with-filter">Checkbox option 16</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-15-checkboxes-with-filter" name="checkboxgroup[]" value="15" class="checkbox" />
<label for="checkbox-15-checkboxes-with-filter">Checkbox option 15</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-14-checkboxes-with-filter" name="checkboxgroup[]" value="14" class="checkbox" />
<label for="checkbox-14-checkboxes-with-filter">Checkbox option 14</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-13-checkboxes-with-filter" name="checkboxgroup[]" value="13" class="checkbox" />
<label for="checkbox-13-checkboxes-with-filter">Checkbox option 13</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-12-checkboxes-with-filter" name="checkboxgroup[]" value="12" class="checkbox" />
<label for="checkbox-12-checkboxes-with-filter">Checkbox option 12</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-11-checkboxes-with-filter" name="checkboxgroup[]" value="11" class="checkbox" />
<label for="checkbox-11-checkboxes-with-filter">Checkbox option 11</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-10-checkboxes-with-filter" name="checkboxgroup[]" value="10" class="checkbox" />
<label for="checkbox-10-checkboxes-with-filter">Checkbox option 10</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-9-checkboxes-with-filter" name="checkboxgroup[]" value="9" class="checkbox" />
<label for="checkbox-9-checkboxes-with-filter">Checkbox option 9</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-8-checkboxes-with-filter" name="checkboxgroup[]" value="8" class="checkbox" />
<label for="checkbox-8-checkboxes-with-filter">Checkbox option 8</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-7-checkboxes-with-filter" name="checkboxgroup[]" value="7" class="checkbox" />
<label for="checkbox-7-checkboxes-with-filter">Checkbox option 7</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-6-checkboxes-with-filter" name="checkboxgroup[]" value="6" class="checkbox" />
<label for="checkbox-6-checkboxes-with-filter">Checkbox option 6</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-5-checkboxes-with-filter" name="checkboxgroup[]" value="5" class="checkbox" />
<label for="checkbox-5-checkboxes-with-filter">Checkbox option 5</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-4-checkboxes-with-filter" name="checkboxgroup[]" value="4" class="checkbox" />
<label for="checkbox-4-checkboxes-with-filter">Checkbox option 4</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-3-checkboxes-with-filter" name="checkboxgroup[]" value="3" class="checkbox" />
<label for="checkbox-3-checkboxes-with-filter">Checkbox option 3</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-2-checkboxes-with-filter" name="checkboxgroup[]" value="2" class="checkbox" />
<label for="checkbox-2-checkboxes-with-filter">Checkbox option 2</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-1-checkboxes-with-filter" name="checkboxgroup[]" value="1" class="checkbox" />
<label for="checkbox-1-checkboxes-with-filter">Checkbox option 1</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-0-checkboxes-with-filter" name="checkboxgroup[]" class="checkbox" />
<label for="checkbox-0-checkboxes-with-filter">Checkbox option 0</label>
</div>
</div>
</div>
<div class="modal-actions">
<button type="button" class="button button-primary checkbox-filter__submit modal-close" data-target="modal">Confirm selection
</button>
</div>
</div>
<div class="modal-overlay modal-close checkbox-filter__close" data-target="modal" tabindex="-1"></div>
</div>
<p class="checkbox-filter__count-wrapper hidden">
<strong><span class="checkbox-filter__count">0</span> activity(ies)
selected</strong>
</p>
<button type="button" class="button button-secondary button-small checkbox-filter__open" aria-controls="modal" aria-expanded="false">
Select ...
</button>
</div>
<div class="form-item-column">
</div>
</div>
</fieldset>
<div class="form-item stacked">
<label for="select">Store
<span class="label-optional">
(Optional)
</span>
</label>
<div class="form-columns">
<div class="form-item-column">
<select name="select" id="select">
<option>Option 1</option>
<option>Option 2</option>
<optgroup label="Option group">
<option>Option 3</option>
<option>Option 4</option>
</optgroup>
</select>
</div>
<div class="form-item-column">
</div>
</div>
</div>
</div>
<div class="modal-actions">
<button type="submit" class="button button-primary filter__submit">Show result</button>
</div>
</form>
<div class="modal-overlay modal-close" data-target="filter" tabindex="-1"></div>
</div>
<section class="content result-section" id="result">
<h1 class="overview-title"><span class="overview-title-colon">Filtercomponent<span class="colon" aria-hidden="true"></span></span></h1>
<button class="readspeaker-button">
<i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
</button>
<div class="selected-filters">
<h2>You have selected:</h2>
<span :key="filter.key" class="tag filter">
Filter one
<button><span class="visually-hidden">Remove this filter</span></button>
</span>
<span :key="filter.key" class="tag filter">
Filter two
<button><span class="visually-hidden">Remove this filter</span></button>
</span>
<a href="#">Remove all filters</a>
</div>
<div class="filter__result-count">
<h2>We have found 666 results</h2>
<button type="button" class="button button-secondary icon-filter result__show-filters modal-trigger" aria-expanded="false" aria-controls="filter">Filters</button>
</div>
<ul class="filter__results">
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
<li class="teaser teaser--wide ">
<article class="teaser-content">
<div class="content__second">
<h3>Search result</h3>
<span class="tag ">
some tag
</span>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about Search result
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
</figure>
<div class="accolade-inverse right-top"></div>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
</li>
</ul>
<nav class="pager" aria-labelledby="pagination_1-2017">
<h2 id="pagination_1-2017" class="visually-hidden">Pagination</h2>
<ul class="pager__items">
<li class="previous"><a href="#" class="previous">
Previous
<span class="visually-hidden">page</span></a></li>
<li><a href="#" title="Go to page 1"><span class="visually-hidden">Page</span>
1
</a></li>
<li class="spacing">...</li>
<li class="prev--number"><a href="#" title="Go to page 16"><span class="visually-hidden">Page</span>
16
</a></li>
<li class="active"><span class="visually-hidden">Page</span>
17
</li>
<li class="next--number"><a href="#" title="Go to page 18"><span class="visually-hidden">Page</span>
18
</a></li>
<li class="spacing">...</li>
<li><a href="#" title="Go to page 20"><span class="visually-hidden">Page</span>
20
</a></li>
<li class="next"><a href="#">
Next
<span class="visually-hidden">page</span></a></li>
</ul>
</nav>
</section>
</div>
</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">
<div class="gentinfo-block-content">
<h2 class="visually-hidden">Gentinfo</h2>
<figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" /></figure>
<p class="">We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.</p>
<ul class="icon-list ">
<li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10" alt="Gentinfo tel link">09 210 10 10</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">gentinfo@stad.gent</a></li>
<li><i class="icon-document" aria-hidden="true"></i><a href="#">Contact form</a></li>
</ul>
</div>
<button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
Chat with Gentinfo
</button>
</div>
</div>
<div class="footer--column">
<div class="dg-block-disclaimer">
<h2>Useful links</h2>
<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>
<li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">Legal information</a></li>
<li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">Privacy</a></li>
</ul>
</div>
</div>
<div class="footer--column">
<div class="dg-block-post-address">
<h2>Postal address</h2>
<address>
City of Ghent<br />
Botermarkt 1<br />
9000 Ghent
</address>
</div>
</div>
</div>
</div>
<div class="footer-bottom content-container">
<div class="footer--column">
<div class="db-block-partnership">
<p class="">In cooperation with Digipolis</p>
<i aria-hidden="true" class="icon-digipolis"></i>
</div>
</div>
<div class="footer--column">
<div class="dg-blocks-social">
<span>Follow the City of Ghent on social media</span>
<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>
</section>
</footer>
{
"teasers": [
{
"teaser_uid": "search_teaser_9",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_8",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_7",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_6",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_5",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_4",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_3",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_2",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_1",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
},
{
"teaser_uid": "search_teaser_0",
"image_ratio": "8:5",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"type": "teaser--wide",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
"title": "Search result",
"link": "#",
"link_text": "Read more",
"tag": "some tag"
}
],
"checkboxes": [
{
"items": [
{
"label_checkbox": "Checkbox option 99",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-99-checkboxes-with-filter",
"checkbox_value": 99
},
{
"label_checkbox": "Checkbox option 98",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-98-checkboxes-with-filter",
"checkbox_value": 98
},
{
"label_checkbox": "Checkbox option 97",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-97-checkboxes-with-filter",
"checkbox_value": 97
},
{
"label_checkbox": "Checkbox option 96",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-96-checkboxes-with-filter",
"checkbox_value": 96
},
{
"label_checkbox": "Checkbox option 95",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-95-checkboxes-with-filter",
"checkbox_value": 95
},
{
"label_checkbox": "Checkbox option 94",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-94-checkboxes-with-filter",
"checkbox_value": 94
},
{
"label_checkbox": "Checkbox option 93",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-93-checkboxes-with-filter",
"checkbox_value": 93
},
{
"label_checkbox": "Checkbox option 92",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-92-checkboxes-with-filter",
"checkbox_value": 92
},
{
"label_checkbox": "Checkbox option 91",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-91-checkboxes-with-filter",
"checkbox_value": 91
},
{
"label_checkbox": "Checkbox option 90",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-90-checkboxes-with-filter",
"checkbox_value": 90
},
{
"label_checkbox": "Checkbox option 89",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-89-checkboxes-with-filter",
"checkbox_value": 89
},
{
"label_checkbox": "Checkbox option 88",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-88-checkboxes-with-filter",
"checkbox_value": 88
},
{
"label_checkbox": "Checkbox option 87",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-87-checkboxes-with-filter",
"checkbox_value": 87
},
{
"label_checkbox": "Checkbox option 86",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-86-checkboxes-with-filter",
"checkbox_value": 86
},
{
"label_checkbox": "Checkbox option 85",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-85-checkboxes-with-filter",
"checkbox_value": 85
},
{
"label_checkbox": "Checkbox option 84",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-84-checkboxes-with-filter",
"checkbox_value": 84
},
{
"label_checkbox": "Checkbox option 83",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-83-checkboxes-with-filter",
"checkbox_value": 83
},
{
"label_checkbox": "Checkbox option 82",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-82-checkboxes-with-filter",
"checkbox_value": 82
},
{
"label_checkbox": "Checkbox option 81",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-81-checkboxes-with-filter",
"checkbox_value": 81
},
{
"label_checkbox": "Checkbox option 80",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-80-checkboxes-with-filter",
"checkbox_value": 80
},
{
"label_checkbox": "Checkbox option 79",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-79-checkboxes-with-filter",
"checkbox_value": 79
},
{
"label_checkbox": "Checkbox option 78",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-78-checkboxes-with-filter",
"checkbox_value": 78
},
{
"label_checkbox": "Checkbox option 77",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-77-checkboxes-with-filter",
"checkbox_value": 77
},
{
"label_checkbox": "Checkbox option 76",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-76-checkboxes-with-filter",
"checkbox_value": 76
},
{
"label_checkbox": "Checkbox option 75",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-75-checkboxes-with-filter",
"checkbox_value": 75
},
{
"label_checkbox": "Checkbox option 74",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-74-checkboxes-with-filter",
"checkbox_value": 74
},
{
"label_checkbox": "Checkbox option 73",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-73-checkboxes-with-filter",
"checkbox_value": 73
},
{
"label_checkbox": "Checkbox option 72",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-72-checkboxes-with-filter",
"checkbox_value": 72
},
{
"label_checkbox": "Checkbox option 71",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-71-checkboxes-with-filter",
"checkbox_value": 71
},
{
"label_checkbox": "Checkbox option 70",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-70-checkboxes-with-filter",
"checkbox_value": 70
},
{
"label_checkbox": "Checkbox option 69",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-69-checkboxes-with-filter",
"checkbox_value": 69
},
{
"label_checkbox": "Checkbox option 68",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-68-checkboxes-with-filter",
"checkbox_value": 68
},
{
"label_checkbox": "Checkbox option 67",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-67-checkboxes-with-filter",
"checkbox_value": 67
},
{
"label_checkbox": "Checkbox option 66",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-66-checkboxes-with-filter",
"checkbox_value": 66
},
{
"label_checkbox": "Checkbox option 65",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-65-checkboxes-with-filter",
"checkbox_value": 65
},
{
"label_checkbox": "Checkbox option 64",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-64-checkboxes-with-filter",
"checkbox_value": 64
},
{
"label_checkbox": "Checkbox option 63",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-63-checkboxes-with-filter",
"checkbox_value": 63
},
{
"label_checkbox": "Checkbox option 62",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-62-checkboxes-with-filter",
"checkbox_value": 62
},
{
"label_checkbox": "Checkbox option 61",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-61-checkboxes-with-filter",
"checkbox_value": 61
},
{
"label_checkbox": "Checkbox option 60",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-60-checkboxes-with-filter",
"checkbox_value": 60
},
{
"label_checkbox": "Checkbox option 59",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-59-checkboxes-with-filter",
"checkbox_value": 59
},
{
"label_checkbox": "Checkbox option 58",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-58-checkboxes-with-filter",
"checkbox_value": 58
},
{
"label_checkbox": "Checkbox option 57",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-57-checkboxes-with-filter",
"checkbox_value": 57
},
{
"label_checkbox": "Checkbox option 56",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-56-checkboxes-with-filter",
"checkbox_value": 56
},
{
"label_checkbox": "Checkbox option 55",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-55-checkboxes-with-filter",
"checkbox_value": 55
},
{
"label_checkbox": "Checkbox option 54",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-54-checkboxes-with-filter",
"checkbox_value": 54
},
{
"label_checkbox": "Checkbox option 53",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-53-checkboxes-with-filter",
"checkbox_value": 53
},
{
"label_checkbox": "Checkbox option 52",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-52-checkboxes-with-filter",
"checkbox_value": 52
},
{
"label_checkbox": "Checkbox option 51",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-51-checkboxes-with-filter",
"checkbox_value": 51
},
{
"label_checkbox": "Checkbox option 50",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-50-checkboxes-with-filter",
"checkbox_value": 50
},
{
"label_checkbox": "Checkbox option 49",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-49-checkboxes-with-filter",
"checkbox_value": 49
},
{
"label_checkbox": "Checkbox option 48",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-48-checkboxes-with-filter",
"checkbox_value": 48
},
{
"label_checkbox": "Checkbox option 47",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-47-checkboxes-with-filter",
"checkbox_value": 47
},
{
"label_checkbox": "Checkbox option 46",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-46-checkboxes-with-filter",
"checkbox_value": 46
},
{
"label_checkbox": "Checkbox option 45",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-45-checkboxes-with-filter",
"checkbox_value": 45
},
{
"label_checkbox": "Checkbox option 44",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-44-checkboxes-with-filter",
"checkbox_value": 44
},
{
"label_checkbox": "Checkbox option 43",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-43-checkboxes-with-filter",
"checkbox_value": 43
},
{
"label_checkbox": "Checkbox option 42",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-42-checkboxes-with-filter",
"checkbox_value": 42
},
{
"label_checkbox": "Checkbox option 41",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-41-checkboxes-with-filter",
"checkbox_value": 41
},
{
"label_checkbox": "Checkbox option 40",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-40-checkboxes-with-filter",
"checkbox_value": 40
},
{
"label_checkbox": "Checkbox option 39",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-39-checkboxes-with-filter",
"checkbox_value": 39
},
{
"label_checkbox": "Checkbox option 38",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-38-checkboxes-with-filter",
"checkbox_value": 38
},
{
"label_checkbox": "Checkbox option 37",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-37-checkboxes-with-filter",
"checkbox_value": 37
},
{
"label_checkbox": "Checkbox option 36",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-36-checkboxes-with-filter",
"checkbox_value": 36
},
{
"label_checkbox": "Checkbox option 35",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-35-checkboxes-with-filter",
"checkbox_value": 35
},
{
"label_checkbox": "Checkbox option 34",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-34-checkboxes-with-filter",
"checkbox_value": 34
},
{
"label_checkbox": "Checkbox option 33",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-33-checkboxes-with-filter",
"checkbox_value": 33
},
{
"label_checkbox": "Checkbox option 32",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-32-checkboxes-with-filter",
"checkbox_value": 32
},
{
"label_checkbox": "Checkbox option 31",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-31-checkboxes-with-filter",
"checkbox_value": 31
},
{
"label_checkbox": "Checkbox option 30",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-30-checkboxes-with-filter",
"checkbox_value": 30
},
{
"label_checkbox": "Checkbox option 29",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-29-checkboxes-with-filter",
"checkbox_value": 29
},
{
"label_checkbox": "Checkbox option 28",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-28-checkboxes-with-filter",
"checkbox_value": 28
},
{
"label_checkbox": "Checkbox option 27",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-27-checkboxes-with-filter",
"checkbox_value": 27
},
{
"label_checkbox": "Checkbox option 26",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-26-checkboxes-with-filter",
"checkbox_value": 26
},
{
"label_checkbox": "Checkbox option 25",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-25-checkboxes-with-filter",
"checkbox_value": 25
},
{
"label_checkbox": "Checkbox option 24",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-24-checkboxes-with-filter",
"checkbox_value": 24
},
{
"label_checkbox": "Checkbox option 23",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-23-checkboxes-with-filter",
"checkbox_value": 23
},
{
"label_checkbox": "Checkbox option 22",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-22-checkboxes-with-filter",
"checkbox_value": 22
},
{
"label_checkbox": "Checkbox option 21",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-21-checkboxes-with-filter",
"checkbox_value": 21
},
{
"label_checkbox": "Checkbox option 20",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-20-checkboxes-with-filter",
"checkbox_value": 20
},
{
"label_checkbox": "Checkbox option 19",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-19-checkboxes-with-filter",
"checkbox_value": 19
},
{
"label_checkbox": "Checkbox option 18",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-18-checkboxes-with-filter",
"checkbox_value": 18
},
{
"label_checkbox": "Checkbox option 17",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-17-checkboxes-with-filter",
"checkbox_value": 17
},
{
"label_checkbox": "Checkbox option 16",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-16-checkboxes-with-filter",
"checkbox_value": 16
},
{
"label_checkbox": "Checkbox option 15",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-15-checkboxes-with-filter",
"checkbox_value": 15
},
{
"label_checkbox": "Checkbox option 14",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-14-checkboxes-with-filter",
"checkbox_value": 14
},
{
"label_checkbox": "Checkbox option 13",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-13-checkboxes-with-filter",
"checkbox_value": 13
},
{
"label_checkbox": "Checkbox option 12",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-12-checkboxes-with-filter",
"checkbox_value": 12
},
{
"label_checkbox": "Checkbox option 11",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-11-checkboxes-with-filter",
"checkbox_value": 11
},
{
"label_checkbox": "Checkbox option 10",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-10-checkboxes-with-filter",
"checkbox_value": 10
},
{
"label_checkbox": "Checkbox option 9",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-9-checkboxes-with-filter",
"checkbox_value": 9
},
{
"label_checkbox": "Checkbox option 8",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-8-checkboxes-with-filter",
"checkbox_value": 8
},
{
"label_checkbox": "Checkbox option 7",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-7-checkboxes-with-filter",
"checkbox_value": 7
},
{
"label_checkbox": "Checkbox option 6",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-6-checkboxes-with-filter",
"checkbox_value": 6
},
{
"label_checkbox": "Checkbox option 5",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-5-checkboxes-with-filter",
"checkbox_value": 5
},
{
"label_checkbox": "Checkbox option 4",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-4-checkboxes-with-filter",
"checkbox_value": 4
},
{
"label_checkbox": "Checkbox option 3",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-3-checkboxes-with-filter",
"checkbox_value": 3
},
{
"label_checkbox": "Checkbox option 2",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-2-checkboxes-with-filter",
"checkbox_value": 2
},
{
"label_checkbox": "Checkbox option 1",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-1-checkboxes-with-filter",
"checkbox_value": 1
},
{
"label_checkbox": "Checkbox option 0",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-0-checkboxes-with-filter",
"checkbox_value": 0
}
]
}
],
"footerConfig": {
"gentinfo": {
"title": "gentinfo",
"description": "We can be reached from Monday to Saturday, from 8.00 am to 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 Gentinfo"
},
"disclaimer": {
"title": "Useful links",
"links": [
"Vacancies",
"City plan",
"City of Ghent newsroom",
"Legal information",
"Privacy"
]
},
"address": {
"title": "Postal address",
"name": "City of Ghent",
"street": "Botermarkt 1",
"city": "9000 Ghent"
},
"bottom": {
"partnership": "In cooperation with Digipolis",
"social": "Follow the City of Ghent on social media"
}
}
}
.sidebar-layout {
@extend %content-container;
display: flex;
flex-wrap: wrap;
margin-bottom: 4rem;
.sidebar {
width: 100%;
@include desktop {
width: span(3 of 12);
padding-right: gutter();
}
&.modal {
max-height: none;
}
}
.content {
width: 100%;
@include desktop {
width: span(9 wide of 12);
}
}
}