Filter layout

The filter layout is a two-column layout version of the overview layout with a left-side bar to show filters.

When to use this layout

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:

  • A page with an overview of locations with filters for specific characteristics.
  • A search results page with filters to further refine the search results.

When not to use this layout

Do not use the filter layout to present an overview of content where it should not be possible to filter the overview of content.

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 bar will be used for other uses than showing filters.

How it works

A filter layout conists of the following parts:

  • Header (required)
  • Left-side bar with filters (required)
  • Page title (heading h1, with City of Ghent colon icon, required)
  • Filter page content before the collection of teasers (exceptional, for instance a search form)
  • Current active/selected filters with option to clear all (required, only visible when there is at least one current actice/selected filter)
  • Number of results (required)
  • Collection of teasers (required)
  • Pagination of teasers (optional)
  • Filter page content after the collection of teasers (optional)
  • Footer (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>"
  ],
  "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="header-search">Search
            </label>

            <input type="search" id="header-search" name="header-search" class="search" placeholder="Search" required="true" />
            <input type="submit" value="Search" class="" />
        </form>

        <div class="mijn-gent-block accordion">

            <button aria-expanded="false" aria-controls="default-mijn-gent" class="toggle accordion--button">
                <span class="avatar">j</span>
                <span>James M.</span>
            </button>

            <div id="default-mijn-gent" 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>John Doe</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="system-breadcrumb">
        <div class="content-container">
            <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
            <ol class="breadcrumb 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" role="dialog" aria-modal="true" aria-labelledby="filter-title" tabindex="-1">

            <div class="modal-inner">
                <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>

                    <form action="#result">
                        <div class="form-item">
                            <label for="id_name">Name
                                <span class="label-optional">
                                    (Optional)
                                </span>
                            </label>

                            <input type="text" id="id_name" name="name" class="text" />
                        </div>
                        <div class="form-item">
                            <label for="id_category">Category
                                <span class="label-optional">
                                    (Optional)
                                </span>
                            </label>

                            <input type="text" id="id_category" name="category" class="text" />
                        </div>

                        <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">
                                                <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-checkbox-with-filter" name="checkboxgroup[]" value="99" class="checkbox" />
                                                        <label for="checkbox-99-checkbox-with-filter">Checkbox option 99</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-98-checkbox-with-filter" name="checkboxgroup[]" value="98" class="checkbox" />
                                                        <label for="checkbox-98-checkbox-with-filter">Checkbox option 98</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-97-checkbox-with-filter" name="checkboxgroup[]" value="97" class="checkbox" />
                                                        <label for="checkbox-97-checkbox-with-filter">Checkbox option 97</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-96-checkbox-with-filter" name="checkboxgroup[]" value="96" class="checkbox" />
                                                        <label for="checkbox-96-checkbox-with-filter">Checkbox option 96</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-95-checkbox-with-filter" name="checkboxgroup[]" value="95" class="checkbox" />
                                                        <label for="checkbox-95-checkbox-with-filter">Checkbox option 95</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-94-checkbox-with-filter" name="checkboxgroup[]" value="94" class="checkbox" />
                                                        <label for="checkbox-94-checkbox-with-filter">Checkbox option 94</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-93-checkbox-with-filter" name="checkboxgroup[]" value="93" class="checkbox" />
                                                        <label for="checkbox-93-checkbox-with-filter">Checkbox option 93</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-92-checkbox-with-filter" name="checkboxgroup[]" value="92" class="checkbox" />
                                                        <label for="checkbox-92-checkbox-with-filter">Checkbox option 92</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-91-checkbox-with-filter" name="checkboxgroup[]" value="91" class="checkbox" />
                                                        <label for="checkbox-91-checkbox-with-filter">Checkbox option 91</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-90-checkbox-with-filter" name="checkboxgroup[]" value="90" class="checkbox" />
                                                        <label for="checkbox-90-checkbox-with-filter">Checkbox option 90</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-89-checkbox-with-filter" name="checkboxgroup[]" value="89" class="checkbox" />
                                                        <label for="checkbox-89-checkbox-with-filter">Checkbox option 89</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-88-checkbox-with-filter" name="checkboxgroup[]" value="88" class="checkbox" />
                                                        <label for="checkbox-88-checkbox-with-filter">Checkbox option 88</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-87-checkbox-with-filter" name="checkboxgroup[]" value="87" class="checkbox" />
                                                        <label for="checkbox-87-checkbox-with-filter">Checkbox option 87</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-86-checkbox-with-filter" name="checkboxgroup[]" value="86" class="checkbox" />
                                                        <label for="checkbox-86-checkbox-with-filter">Checkbox option 86</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-85-checkbox-with-filter" name="checkboxgroup[]" value="85" class="checkbox" />
                                                        <label for="checkbox-85-checkbox-with-filter">Checkbox option 85</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-84-checkbox-with-filter" name="checkboxgroup[]" value="84" class="checkbox" />
                                                        <label for="checkbox-84-checkbox-with-filter">Checkbox option 84</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-83-checkbox-with-filter" name="checkboxgroup[]" value="83" class="checkbox" />
                                                        <label for="checkbox-83-checkbox-with-filter">Checkbox option 83</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-82-checkbox-with-filter" name="checkboxgroup[]" value="82" class="checkbox" />
                                                        <label for="checkbox-82-checkbox-with-filter">Checkbox option 82</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-81-checkbox-with-filter" name="checkboxgroup[]" value="81" class="checkbox" />
                                                        <label for="checkbox-81-checkbox-with-filter">Checkbox option 81</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-80-checkbox-with-filter" name="checkboxgroup[]" value="80" class="checkbox" />
                                                        <label for="checkbox-80-checkbox-with-filter">Checkbox option 80</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-79-checkbox-with-filter" name="checkboxgroup[]" value="79" class="checkbox" />
                                                        <label for="checkbox-79-checkbox-with-filter">Checkbox option 79</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-78-checkbox-with-filter" name="checkboxgroup[]" value="78" class="checkbox" />
                                                        <label for="checkbox-78-checkbox-with-filter">Checkbox option 78</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-77-checkbox-with-filter" name="checkboxgroup[]" value="77" class="checkbox" />
                                                        <label for="checkbox-77-checkbox-with-filter">Checkbox option 77</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-76-checkbox-with-filter" name="checkboxgroup[]" value="76" class="checkbox" />
                                                        <label for="checkbox-76-checkbox-with-filter">Checkbox option 76</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-75-checkbox-with-filter" name="checkboxgroup[]" value="75" class="checkbox" />
                                                        <label for="checkbox-75-checkbox-with-filter">Checkbox option 75</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-74-checkbox-with-filter" name="checkboxgroup[]" value="74" class="checkbox" />
                                                        <label for="checkbox-74-checkbox-with-filter">Checkbox option 74</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-73-checkbox-with-filter" name="checkboxgroup[]" value="73" class="checkbox" />
                                                        <label for="checkbox-73-checkbox-with-filter">Checkbox option 73</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-72-checkbox-with-filter" name="checkboxgroup[]" value="72" class="checkbox" />
                                                        <label for="checkbox-72-checkbox-with-filter">Checkbox option 72</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-71-checkbox-with-filter" name="checkboxgroup[]" value="71" class="checkbox" />
                                                        <label for="checkbox-71-checkbox-with-filter">Checkbox option 71</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-70-checkbox-with-filter" name="checkboxgroup[]" value="70" class="checkbox" />
                                                        <label for="checkbox-70-checkbox-with-filter">Checkbox option 70</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-69-checkbox-with-filter" name="checkboxgroup[]" value="69" class="checkbox" />
                                                        <label for="checkbox-69-checkbox-with-filter">Checkbox option 69</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-68-checkbox-with-filter" name="checkboxgroup[]" value="68" class="checkbox" />
                                                        <label for="checkbox-68-checkbox-with-filter">Checkbox option 68</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-67-checkbox-with-filter" name="checkboxgroup[]" value="67" class="checkbox" />
                                                        <label for="checkbox-67-checkbox-with-filter">Checkbox option 67</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-66-checkbox-with-filter" name="checkboxgroup[]" value="66" class="checkbox" />
                                                        <label for="checkbox-66-checkbox-with-filter">Checkbox option 66</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-65-checkbox-with-filter" name="checkboxgroup[]" value="65" class="checkbox" />
                                                        <label for="checkbox-65-checkbox-with-filter">Checkbox option 65</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-64-checkbox-with-filter" name="checkboxgroup[]" value="64" class="checkbox" />
                                                        <label for="checkbox-64-checkbox-with-filter">Checkbox option 64</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-63-checkbox-with-filter" name="checkboxgroup[]" value="63" class="checkbox" />
                                                        <label for="checkbox-63-checkbox-with-filter">Checkbox option 63</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-62-checkbox-with-filter" name="checkboxgroup[]" value="62" class="checkbox" />
                                                        <label for="checkbox-62-checkbox-with-filter">Checkbox option 62</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-61-checkbox-with-filter" name="checkboxgroup[]" value="61" class="checkbox" />
                                                        <label for="checkbox-61-checkbox-with-filter">Checkbox option 61</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-60-checkbox-with-filter" name="checkboxgroup[]" value="60" class="checkbox" />
                                                        <label for="checkbox-60-checkbox-with-filter">Checkbox option 60</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-59-checkbox-with-filter" name="checkboxgroup[]" value="59" class="checkbox" />
                                                        <label for="checkbox-59-checkbox-with-filter">Checkbox option 59</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-58-checkbox-with-filter" name="checkboxgroup[]" value="58" class="checkbox" />
                                                        <label for="checkbox-58-checkbox-with-filter">Checkbox option 58</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-57-checkbox-with-filter" name="checkboxgroup[]" value="57" class="checkbox" />
                                                        <label for="checkbox-57-checkbox-with-filter">Checkbox option 57</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-56-checkbox-with-filter" name="checkboxgroup[]" value="56" class="checkbox" />
                                                        <label for="checkbox-56-checkbox-with-filter">Checkbox option 56</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-55-checkbox-with-filter" name="checkboxgroup[]" value="55" class="checkbox" />
                                                        <label for="checkbox-55-checkbox-with-filter">Checkbox option 55</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-54-checkbox-with-filter" name="checkboxgroup[]" value="54" class="checkbox" />
                                                        <label for="checkbox-54-checkbox-with-filter">Checkbox option 54</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-53-checkbox-with-filter" name="checkboxgroup[]" value="53" class="checkbox" />
                                                        <label for="checkbox-53-checkbox-with-filter">Checkbox option 53</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-52-checkbox-with-filter" name="checkboxgroup[]" value="52" class="checkbox" />
                                                        <label for="checkbox-52-checkbox-with-filter">Checkbox option 52</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-51-checkbox-with-filter" name="checkboxgroup[]" value="51" class="checkbox" />
                                                        <label for="checkbox-51-checkbox-with-filter">Checkbox option 51</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-50-checkbox-with-filter" name="checkboxgroup[]" value="50" class="checkbox" />
                                                        <label for="checkbox-50-checkbox-with-filter">Checkbox option 50</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-49-checkbox-with-filter" name="checkboxgroup[]" value="49" class="checkbox" />
                                                        <label for="checkbox-49-checkbox-with-filter">Checkbox option 49</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-48-checkbox-with-filter" name="checkboxgroup[]" value="48" class="checkbox" />
                                                        <label for="checkbox-48-checkbox-with-filter">Checkbox option 48</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-47-checkbox-with-filter" name="checkboxgroup[]" value="47" class="checkbox" />
                                                        <label for="checkbox-47-checkbox-with-filter">Checkbox option 47</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-46-checkbox-with-filter" name="checkboxgroup[]" value="46" class="checkbox" />
                                                        <label for="checkbox-46-checkbox-with-filter">Checkbox option 46</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-45-checkbox-with-filter" name="checkboxgroup[]" value="45" class="checkbox" />
                                                        <label for="checkbox-45-checkbox-with-filter">Checkbox option 45</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-44-checkbox-with-filter" name="checkboxgroup[]" value="44" class="checkbox" />
                                                        <label for="checkbox-44-checkbox-with-filter">Checkbox option 44</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-43-checkbox-with-filter" name="checkboxgroup[]" value="43" class="checkbox" />
                                                        <label for="checkbox-43-checkbox-with-filter">Checkbox option 43</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-42-checkbox-with-filter" name="checkboxgroup[]" value="42" class="checkbox" />
                                                        <label for="checkbox-42-checkbox-with-filter">Checkbox option 42</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-41-checkbox-with-filter" name="checkboxgroup[]" value="41" class="checkbox" />
                                                        <label for="checkbox-41-checkbox-with-filter">Checkbox option 41</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-40-checkbox-with-filter" name="checkboxgroup[]" value="40" class="checkbox" />
                                                        <label for="checkbox-40-checkbox-with-filter">Checkbox option 40</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-39-checkbox-with-filter" name="checkboxgroup[]" value="39" class="checkbox" />
                                                        <label for="checkbox-39-checkbox-with-filter">Checkbox option 39</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-38-checkbox-with-filter" name="checkboxgroup[]" value="38" class="checkbox" />
                                                        <label for="checkbox-38-checkbox-with-filter">Checkbox option 38</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-37-checkbox-with-filter" name="checkboxgroup[]" value="37" class="checkbox" />
                                                        <label for="checkbox-37-checkbox-with-filter">Checkbox option 37</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-36-checkbox-with-filter" name="checkboxgroup[]" value="36" class="checkbox" />
                                                        <label for="checkbox-36-checkbox-with-filter">Checkbox option 36</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-35-checkbox-with-filter" name="checkboxgroup[]" value="35" class="checkbox" />
                                                        <label for="checkbox-35-checkbox-with-filter">Checkbox option 35</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-34-checkbox-with-filter" name="checkboxgroup[]" value="34" class="checkbox" />
                                                        <label for="checkbox-34-checkbox-with-filter">Checkbox option 34</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-33-checkbox-with-filter" name="checkboxgroup[]" value="33" class="checkbox" />
                                                        <label for="checkbox-33-checkbox-with-filter">Checkbox option 33</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-32-checkbox-with-filter" name="checkboxgroup[]" value="32" class="checkbox" />
                                                        <label for="checkbox-32-checkbox-with-filter">Checkbox option 32</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-31-checkbox-with-filter" name="checkboxgroup[]" value="31" class="checkbox" />
                                                        <label for="checkbox-31-checkbox-with-filter">Checkbox option 31</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-30-checkbox-with-filter" name="checkboxgroup[]" value="30" class="checkbox" />
                                                        <label for="checkbox-30-checkbox-with-filter">Checkbox option 30</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-29-checkbox-with-filter" name="checkboxgroup[]" value="29" class="checkbox" />
                                                        <label for="checkbox-29-checkbox-with-filter">Checkbox option 29</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-28-checkbox-with-filter" name="checkboxgroup[]" value="28" class="checkbox" />
                                                        <label for="checkbox-28-checkbox-with-filter">Checkbox option 28</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-27-checkbox-with-filter" name="checkboxgroup[]" value="27" class="checkbox" />
                                                        <label for="checkbox-27-checkbox-with-filter">Checkbox option 27</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-26-checkbox-with-filter" name="checkboxgroup[]" value="26" class="checkbox" />
                                                        <label for="checkbox-26-checkbox-with-filter">Checkbox option 26</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-25-checkbox-with-filter" name="checkboxgroup[]" value="25" class="checkbox" />
                                                        <label for="checkbox-25-checkbox-with-filter">Checkbox option 25</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-24-checkbox-with-filter" name="checkboxgroup[]" value="24" class="checkbox" />
                                                        <label for="checkbox-24-checkbox-with-filter">Checkbox option 24</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-23-checkbox-with-filter" name="checkboxgroup[]" value="23" class="checkbox" />
                                                        <label for="checkbox-23-checkbox-with-filter">Checkbox option 23</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-22-checkbox-with-filter" name="checkboxgroup[]" value="22" class="checkbox" />
                                                        <label for="checkbox-22-checkbox-with-filter">Checkbox option 22</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-21-checkbox-with-filter" name="checkboxgroup[]" value="21" class="checkbox" />
                                                        <label for="checkbox-21-checkbox-with-filter">Checkbox option 21</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-20-checkbox-with-filter" name="checkboxgroup[]" value="20" class="checkbox" />
                                                        <label for="checkbox-20-checkbox-with-filter">Checkbox option 20</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-19-checkbox-with-filter" name="checkboxgroup[]" value="19" class="checkbox" />
                                                        <label for="checkbox-19-checkbox-with-filter">Checkbox option 19</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-18-checkbox-with-filter" name="checkboxgroup[]" value="18" class="checkbox" />
                                                        <label for="checkbox-18-checkbox-with-filter">Checkbox option 18</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-17-checkbox-with-filter" name="checkboxgroup[]" value="17" class="checkbox" />
                                                        <label for="checkbox-17-checkbox-with-filter">Checkbox option 17</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-16-checkbox-with-filter" name="checkboxgroup[]" value="16" class="checkbox" />
                                                        <label for="checkbox-16-checkbox-with-filter">Checkbox option 16</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-15-checkbox-with-filter" name="checkboxgroup[]" value="15" class="checkbox" />
                                                        <label for="checkbox-15-checkbox-with-filter">Checkbox option 15</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-14-checkbox-with-filter" name="checkboxgroup[]" value="14" class="checkbox" />
                                                        <label for="checkbox-14-checkbox-with-filter">Checkbox option 14</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-13-checkbox-with-filter" name="checkboxgroup[]" value="13" class="checkbox" />
                                                        <label for="checkbox-13-checkbox-with-filter">Checkbox option 13</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-12-checkbox-with-filter" name="checkboxgroup[]" value="12" class="checkbox" />
                                                        <label for="checkbox-12-checkbox-with-filter">Checkbox option 12</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-11-checkbox-with-filter" name="checkboxgroup[]" value="11" class="checkbox" />
                                                        <label for="checkbox-11-checkbox-with-filter">Checkbox option 11</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-10-checkbox-with-filter" name="checkboxgroup[]" value="10" class="checkbox" />
                                                        <label for="checkbox-10-checkbox-with-filter">Checkbox option 10</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-9-checkbox-with-filter" name="checkboxgroup[]" value="9" class="checkbox" />
                                                        <label for="checkbox-9-checkbox-with-filter">Checkbox option 9</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-8-checkbox-with-filter" name="checkboxgroup[]" value="8" class="checkbox" />
                                                        <label for="checkbox-8-checkbox-with-filter">Checkbox option 8</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-7-checkbox-with-filter" name="checkboxgroup[]" value="7" class="checkbox" />
                                                        <label for="checkbox-7-checkbox-with-filter">Checkbox option 7</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-6-checkbox-with-filter" name="checkboxgroup[]" value="6" class="checkbox" />
                                                        <label for="checkbox-6-checkbox-with-filter">Checkbox option 6</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-5-checkbox-with-filter" name="checkboxgroup[]" value="5" class="checkbox" />
                                                        <label for="checkbox-5-checkbox-with-filter">Checkbox option 5</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-4-checkbox-with-filter" name="checkboxgroup[]" value="4" class="checkbox" />
                                                        <label for="checkbox-4-checkbox-with-filter">Checkbox option 4</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-3-checkbox-with-filter" name="checkboxgroup[]" value="3" class="checkbox" />
                                                        <label for="checkbox-3-checkbox-with-filter">Checkbox option 3</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-2-checkbox-with-filter" name="checkboxgroup[]" value="2" class="checkbox" />
                                                        <label for="checkbox-2-checkbox-with-filter">Checkbox option 2</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-1-checkbox-with-filter" name="checkboxgroup[]" value="1" class="checkbox" />
                                                        <label for="checkbox-1-checkbox-with-filter">Checkbox option 1</label>
                                                    </div>
                                                    <div class="checkbox">

                                                        <input type="checkbox" id="checkbox-0-checkbox-with-filter" name="checkboxgroup[]" class="checkbox" />
                                                        <label for="checkbox-0-checkbox-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">
                            <label for="id_type">Type
                                <span class="label-optional">
                                    (Optional)
                                </span>
                            </label>

                            <input type="text" id="id_type" name="type" class="text" />
                        </div>
                        <div class="form-item">
                            <label for="id_extra">Extra
                                <span class="label-optional">
                                    (Optional)
                                </span>
                            </label>

                            <input type="text" id="id_extra" name="type" class="text" />
                        </div>
                        <div class="form-item">
                            <label for="id_extra1">Extra bis
                                <span class="label-optional">
                                    (Optional)
                                </span>
                            </label>

                            <input type="text" id="id_extra1" name="type" class="text" />
                        </div>
                        <div class="form-item">
                            <label for="id_extra2">Extra tris
                                <span class="label-optional">
                                    (Optional)
                                </span>
                            </label>

                            <input type="text" id="id_extra2" name="type" class="text" />
                        </div>
                        <button type="submit" class="button button-primary filter__submit">Show result</button>

                    </form>

                </div>
            </div>

            <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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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">
                                <span class="visually-hidden">
                                    Search result
                                </span>
                                read more</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>
                            <img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" />

                            <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 map</a></li>
                            <li><a href="https://persruimte.stad.gent/nl">Newsroom City of Ghent</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-checkbox-with-filter",
          "checkbox_value": 99
        },
        {
          "label_checkbox": "Checkbox option 98",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-98-checkbox-with-filter",
          "checkbox_value": 98
        },
        {
          "label_checkbox": "Checkbox option 97",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-97-checkbox-with-filter",
          "checkbox_value": 97
        },
        {
          "label_checkbox": "Checkbox option 96",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-96-checkbox-with-filter",
          "checkbox_value": 96
        },
        {
          "label_checkbox": "Checkbox option 95",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-95-checkbox-with-filter",
          "checkbox_value": 95
        },
        {
          "label_checkbox": "Checkbox option 94",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-94-checkbox-with-filter",
          "checkbox_value": 94
        },
        {
          "label_checkbox": "Checkbox option 93",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-93-checkbox-with-filter",
          "checkbox_value": 93
        },
        {
          "label_checkbox": "Checkbox option 92",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-92-checkbox-with-filter",
          "checkbox_value": 92
        },
        {
          "label_checkbox": "Checkbox option 91",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-91-checkbox-with-filter",
          "checkbox_value": 91
        },
        {
          "label_checkbox": "Checkbox option 90",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-90-checkbox-with-filter",
          "checkbox_value": 90
        },
        {
          "label_checkbox": "Checkbox option 89",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-89-checkbox-with-filter",
          "checkbox_value": 89
        },
        {
          "label_checkbox": "Checkbox option 88",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-88-checkbox-with-filter",
          "checkbox_value": 88
        },
        {
          "label_checkbox": "Checkbox option 87",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-87-checkbox-with-filter",
          "checkbox_value": 87
        },
        {
          "label_checkbox": "Checkbox option 86",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-86-checkbox-with-filter",
          "checkbox_value": 86
        },
        {
          "label_checkbox": "Checkbox option 85",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-85-checkbox-with-filter",
          "checkbox_value": 85
        },
        {
          "label_checkbox": "Checkbox option 84",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-84-checkbox-with-filter",
          "checkbox_value": 84
        },
        {
          "label_checkbox": "Checkbox option 83",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-83-checkbox-with-filter",
          "checkbox_value": 83
        },
        {
          "label_checkbox": "Checkbox option 82",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-82-checkbox-with-filter",
          "checkbox_value": 82
        },
        {
          "label_checkbox": "Checkbox option 81",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-81-checkbox-with-filter",
          "checkbox_value": 81
        },
        {
          "label_checkbox": "Checkbox option 80",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-80-checkbox-with-filter",
          "checkbox_value": 80
        },
        {
          "label_checkbox": "Checkbox option 79",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-79-checkbox-with-filter",
          "checkbox_value": 79
        },
        {
          "label_checkbox": "Checkbox option 78",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-78-checkbox-with-filter",
          "checkbox_value": 78
        },
        {
          "label_checkbox": "Checkbox option 77",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-77-checkbox-with-filter",
          "checkbox_value": 77
        },
        {
          "label_checkbox": "Checkbox option 76",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-76-checkbox-with-filter",
          "checkbox_value": 76
        },
        {
          "label_checkbox": "Checkbox option 75",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-75-checkbox-with-filter",
          "checkbox_value": 75
        },
        {
          "label_checkbox": "Checkbox option 74",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-74-checkbox-with-filter",
          "checkbox_value": 74
        },
        {
          "label_checkbox": "Checkbox option 73",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-73-checkbox-with-filter",
          "checkbox_value": 73
        },
        {
          "label_checkbox": "Checkbox option 72",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-72-checkbox-with-filter",
          "checkbox_value": 72
        },
        {
          "label_checkbox": "Checkbox option 71",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-71-checkbox-with-filter",
          "checkbox_value": 71
        },
        {
          "label_checkbox": "Checkbox option 70",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-70-checkbox-with-filter",
          "checkbox_value": 70
        },
        {
          "label_checkbox": "Checkbox option 69",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-69-checkbox-with-filter",
          "checkbox_value": 69
        },
        {
          "label_checkbox": "Checkbox option 68",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-68-checkbox-with-filter",
          "checkbox_value": 68
        },
        {
          "label_checkbox": "Checkbox option 67",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-67-checkbox-with-filter",
          "checkbox_value": 67
        },
        {
          "label_checkbox": "Checkbox option 66",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-66-checkbox-with-filter",
          "checkbox_value": 66
        },
        {
          "label_checkbox": "Checkbox option 65",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-65-checkbox-with-filter",
          "checkbox_value": 65
        },
        {
          "label_checkbox": "Checkbox option 64",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-64-checkbox-with-filter",
          "checkbox_value": 64
        },
        {
          "label_checkbox": "Checkbox option 63",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-63-checkbox-with-filter",
          "checkbox_value": 63
        },
        {
          "label_checkbox": "Checkbox option 62",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-62-checkbox-with-filter",
          "checkbox_value": 62
        },
        {
          "label_checkbox": "Checkbox option 61",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-61-checkbox-with-filter",
          "checkbox_value": 61
        },
        {
          "label_checkbox": "Checkbox option 60",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-60-checkbox-with-filter",
          "checkbox_value": 60
        },
        {
          "label_checkbox": "Checkbox option 59",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-59-checkbox-with-filter",
          "checkbox_value": 59
        },
        {
          "label_checkbox": "Checkbox option 58",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-58-checkbox-with-filter",
          "checkbox_value": 58
        },
        {
          "label_checkbox": "Checkbox option 57",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-57-checkbox-with-filter",
          "checkbox_value": 57
        },
        {
          "label_checkbox": "Checkbox option 56",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-56-checkbox-with-filter",
          "checkbox_value": 56
        },
        {
          "label_checkbox": "Checkbox option 55",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-55-checkbox-with-filter",
          "checkbox_value": 55
        },
        {
          "label_checkbox": "Checkbox option 54",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-54-checkbox-with-filter",
          "checkbox_value": 54
        },
        {
          "label_checkbox": "Checkbox option 53",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-53-checkbox-with-filter",
          "checkbox_value": 53
        },
        {
          "label_checkbox": "Checkbox option 52",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-52-checkbox-with-filter",
          "checkbox_value": 52
        },
        {
          "label_checkbox": "Checkbox option 51",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-51-checkbox-with-filter",
          "checkbox_value": 51
        },
        {
          "label_checkbox": "Checkbox option 50",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-50-checkbox-with-filter",
          "checkbox_value": 50
        },
        {
          "label_checkbox": "Checkbox option 49",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-49-checkbox-with-filter",
          "checkbox_value": 49
        },
        {
          "label_checkbox": "Checkbox option 48",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-48-checkbox-with-filter",
          "checkbox_value": 48
        },
        {
          "label_checkbox": "Checkbox option 47",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-47-checkbox-with-filter",
          "checkbox_value": 47
        },
        {
          "label_checkbox": "Checkbox option 46",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-46-checkbox-with-filter",
          "checkbox_value": 46
        },
        {
          "label_checkbox": "Checkbox option 45",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-45-checkbox-with-filter",
          "checkbox_value": 45
        },
        {
          "label_checkbox": "Checkbox option 44",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-44-checkbox-with-filter",
          "checkbox_value": 44
        },
        {
          "label_checkbox": "Checkbox option 43",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-43-checkbox-with-filter",
          "checkbox_value": 43
        },
        {
          "label_checkbox": "Checkbox option 42",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-42-checkbox-with-filter",
          "checkbox_value": 42
        },
        {
          "label_checkbox": "Checkbox option 41",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-41-checkbox-with-filter",
          "checkbox_value": 41
        },
        {
          "label_checkbox": "Checkbox option 40",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-40-checkbox-with-filter",
          "checkbox_value": 40
        },
        {
          "label_checkbox": "Checkbox option 39",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-39-checkbox-with-filter",
          "checkbox_value": 39
        },
        {
          "label_checkbox": "Checkbox option 38",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-38-checkbox-with-filter",
          "checkbox_value": 38
        },
        {
          "label_checkbox": "Checkbox option 37",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-37-checkbox-with-filter",
          "checkbox_value": 37
        },
        {
          "label_checkbox": "Checkbox option 36",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-36-checkbox-with-filter",
          "checkbox_value": 36
        },
        {
          "label_checkbox": "Checkbox option 35",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-35-checkbox-with-filter",
          "checkbox_value": 35
        },
        {
          "label_checkbox": "Checkbox option 34",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-34-checkbox-with-filter",
          "checkbox_value": 34
        },
        {
          "label_checkbox": "Checkbox option 33",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-33-checkbox-with-filter",
          "checkbox_value": 33
        },
        {
          "label_checkbox": "Checkbox option 32",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-32-checkbox-with-filter",
          "checkbox_value": 32
        },
        {
          "label_checkbox": "Checkbox option 31",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-31-checkbox-with-filter",
          "checkbox_value": 31
        },
        {
          "label_checkbox": "Checkbox option 30",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-30-checkbox-with-filter",
          "checkbox_value": 30
        },
        {
          "label_checkbox": "Checkbox option 29",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-29-checkbox-with-filter",
          "checkbox_value": 29
        },
        {
          "label_checkbox": "Checkbox option 28",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-28-checkbox-with-filter",
          "checkbox_value": 28
        },
        {
          "label_checkbox": "Checkbox option 27",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-27-checkbox-with-filter",
          "checkbox_value": 27
        },
        {
          "label_checkbox": "Checkbox option 26",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-26-checkbox-with-filter",
          "checkbox_value": 26
        },
        {
          "label_checkbox": "Checkbox option 25",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-25-checkbox-with-filter",
          "checkbox_value": 25
        },
        {
          "label_checkbox": "Checkbox option 24",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-24-checkbox-with-filter",
          "checkbox_value": 24
        },
        {
          "label_checkbox": "Checkbox option 23",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-23-checkbox-with-filter",
          "checkbox_value": 23
        },
        {
          "label_checkbox": "Checkbox option 22",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-22-checkbox-with-filter",
          "checkbox_value": 22
        },
        {
          "label_checkbox": "Checkbox option 21",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-21-checkbox-with-filter",
          "checkbox_value": 21
        },
        {
          "label_checkbox": "Checkbox option 20",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-20-checkbox-with-filter",
          "checkbox_value": 20
        },
        {
          "label_checkbox": "Checkbox option 19",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-19-checkbox-with-filter",
          "checkbox_value": 19
        },
        {
          "label_checkbox": "Checkbox option 18",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-18-checkbox-with-filter",
          "checkbox_value": 18
        },
        {
          "label_checkbox": "Checkbox option 17",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-17-checkbox-with-filter",
          "checkbox_value": 17
        },
        {
          "label_checkbox": "Checkbox option 16",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-16-checkbox-with-filter",
          "checkbox_value": 16
        },
        {
          "label_checkbox": "Checkbox option 15",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-15-checkbox-with-filter",
          "checkbox_value": 15
        },
        {
          "label_checkbox": "Checkbox option 14",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-14-checkbox-with-filter",
          "checkbox_value": 14
        },
        {
          "label_checkbox": "Checkbox option 13",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-13-checkbox-with-filter",
          "checkbox_value": 13
        },
        {
          "label_checkbox": "Checkbox option 12",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-12-checkbox-with-filter",
          "checkbox_value": 12
        },
        {
          "label_checkbox": "Checkbox option 11",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-11-checkbox-with-filter",
          "checkbox_value": 11
        },
        {
          "label_checkbox": "Checkbox option 10",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-10-checkbox-with-filter",
          "checkbox_value": 10
        },
        {
          "label_checkbox": "Checkbox option 9",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-9-checkbox-with-filter",
          "checkbox_value": 9
        },
        {
          "label_checkbox": "Checkbox option 8",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-8-checkbox-with-filter",
          "checkbox_value": 8
        },
        {
          "label_checkbox": "Checkbox option 7",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-7-checkbox-with-filter",
          "checkbox_value": 7
        },
        {
          "label_checkbox": "Checkbox option 6",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-6-checkbox-with-filter",
          "checkbox_value": 6
        },
        {
          "label_checkbox": "Checkbox option 5",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-5-checkbox-with-filter",
          "checkbox_value": 5
        },
        {
          "label_checkbox": "Checkbox option 4",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-4-checkbox-with-filter",
          "checkbox_value": 4
        },
        {
          "label_checkbox": "Checkbox option 3",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-3-checkbox-with-filter",
          "checkbox_value": 3
        },
        {
          "label_checkbox": "Checkbox option 2",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-2-checkbox-with-filter",
          "checkbox_value": 2
        },
        {
          "label_checkbox": "Checkbox option 1",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-1-checkbox-with-filter",
          "checkbox_value": 1
        },
        {
          "label_checkbox": "Checkbox option 0",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-0-checkbox-with-filter",
          "checkbox_value": null
        }
      ]
    }
  ],
  "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 map",
        "Newsroom City of Ghent",
        "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"
    }
  }
}
  • Content:
    .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();
        }
      }
    
      .content {
        width: 100%;
    
        @include desktop {
          width: span(9 wide of 12);
        }
      }
    }
    
  • URL: /components/raw/sidebar-layout/_sidebar-layout.scss
  • Filesystem Path: components/61-layouts/sidebar-layout/_sidebar-layout.scss
  • Size: 332 Bytes