Filter

Filter

Functionality

  • Selected filters and result count are only visible after a search has occurred.
<div class="sidebar-layout filter">
  {% set modalContent %}
    {% include '@form-item' with {
      label: "Name",
      id: _self.name ~ "-name_id",
      input_component: "input",
      type: "text",
      name: _self.name ~ "-name_name",
      field_description: null,
      stacked: true
    } %}

    {% include '@checkboxes-dynamic' with {
      label: "Category",
      id: _self.name ~ "-category",
      modifier: 'stacked',
      options: [
        {
          "label": "Games",
          "name": _self.name ~ "-checkboxgroup",
          "id": _self.name ~ "-checkbox-1"
        },
        {
          "label": "Movies",
          "name": _self.name ~ "-checkboxgroup",
          "id": _self.name ~ "-checkbox-2"
        },
        {
          "label": "Series",
          "name": _self.name ~ "-checkboxgroup",
          "id": _self.name ~ "-checkbox-3"
        },
        {
          "label": "Books",
          "name": _self.name ~ "-checkboxgroup",
          "id": _self.name ~ "-checkbox-4"
        }
      ]
    } %}

    {% include '@checkboxes-dynamic' with {
      label: "Price",
      id: _self.name ~ "-price",
      modifier: 'stacked',
      options: [
        {
          "label": "Less than €100",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-1"
        },
        {
          "label": "€100 - €249",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-2"
        },
        {
          "label": "€250 - €499",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-3"
        },
        {
          "label": "€500 - €999",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-4"
        },
        {
          "label": "€1000 - €1999",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-5"
        },
        {
          "label": "€2000 - €2999",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-6"
        },
        {
          "label": "€3000 - €3999",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-7"
        },
        {
          "label": "€4000 - €4999",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-8"
        },
        {
          "label": "€5000 or more",
          "name": _self.name ~ "-price",
          "id": _self.name ~ "-price-9"
        }
      ]
    } %}

    {% include '@checkboxes-dynamic' with {
      label: "Activities",
      id: _self.name ~ "-filter",
      modifier: 'stacked',
      options: checkboxes
    } %}

    {% include '@select' with {
      id: 'select',
      label: 'Store',
      field_description: null,
      stacked: true,
      input_component: 'input-select',
      options: [
        {
          label: 'Option 1'
        },
        {
          label: 'Option 2'
        },
        {
          optgroup: true,
          label: 'Option group',
          optgroupoptions: [
          {
            label: 'Option 3'
          },
          {
            label: 'Option 4'
          }
        ]
        }
      ]
    } %}
  {% endset %}
  {% include "@modal" with {
    id: 'filter',
    title: 'Filter the results',
    title_heading_level: 'h2',
    classes: 'sidebar filter-section has-custom-binding modal--fixed-height',
    content: modalContent,
    actions: '<button type="submit" class="button button-primary filter__submit">Show result</button>',
    modal_inner_tag: 'form',
    modal_inner_action: '#result'
  } %}

  <section class="content result-section" id="result">
    {% include '@heading' with {
      "type": "overview-title",
      "heading_text": "Filtercomponent"
    } %}

    <div class="bold show-desktop-only mb-20">
      {% include '@paragraph' with {
        text: 'This is an optional introductory text. If this text is present, it is never shown below desktop width!'
      } %}
      {% include '@paragraph' with {
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam dignissimos itaque. Ad autem consequuntur deleniti doloremque, impedit maxime praesentium provident quaerat reiciendis repudiandae vero?'
      } %}
    </div>

    <div class="selected-filters">
      <h2>You have selected:</h2>
      {% include '@tag-list' with {
        tags: [
          { text: 'Filter one', type: 'filter-tag' },
          { text: 'Filter two', type: 'filter-tag' },
          { text: 'Filter three', type: 'filter-tag' }
        ],
        link: { text: 'Remove all filters', link: '#' }
      } %}
    </div>

    <div class="filter__result-count">
      <h2>We have found 666 results</h2>
      <button type="button"
              class="button button-secondary icon-filter result__show-filters modal-trigger"
              aria-expanded="false"
              aria-controls="filter">Filters
      </button>
    </div>

    <ul class="filter__results">
      {% for key, result in results %}
        {% include '@teaser--teaser--wide' with {
          "image_ratio": result.image_ratio,
          "image_src": result.image_src,
          "image_alt_text": result.image_alt_text,
          "type": result.type,
          "teaser_uid": result.teaser_uid,
          "paragraph_text": result.paragraph_text,
          "title": result.title,
          "link_text": result.link_text,
          "link": result.link,
          "tags": result.tags,
          "address_location": null,
          "address": null,
          "list": null
        } %}
      {% endfor %}
    </ul>

    {% include '@pagination' with {
      total: 20,
      active: 17
    } %}

  </section>

</div>
<div class="sidebar-layout filter">
    <div id="filter" class="modal sidebar filter-section has-custom-binding modal--fixed-height" role="dialog" aria-modal="true" aria-labelledby="filter-title" tabindex="-1">

        <form class="modal-inner" action="#result">
            <div class="modal-header">
                <button type="button" class="button close icon-cross modal-close" data-target="filter">
                    <span>Close</span>
                </button>
            </div>
            <div class="modal-content">
                <h2 id="filter-title">Filter the results</h2>
                <div class="form-item  stacked">
                    <label for="default-name_id">Name
                    </label>
                    <div class="form-columns">
                        <div class="form-item-column">

                            <input type="text" id="default-name_id" name="default-name_name" class="text" />
                        </div>
                        <div class="form-item-column">
                        </div>
                    </div>
                </div>

                <fieldset class="form-item stacked">
                    <legend>
                        Category
                    </legend>
                    <div class="form-item">
                        <div class="form-columns">
                            <div class="form-item-column">
                                <div class="checkbox">

                                    <input type="checkbox" id="input-default-category-stacked-default-checkbox-1" name="default-checkboxgroup" class="checkbox stacked" />
                                    <label for="input-default-category-stacked-default-checkbox-1">Games</label>
                                </div>
                                <div class="checkbox">

                                    <input type="checkbox" id="input-default-category-stacked-default-checkbox-2" name="default-checkboxgroup" class="checkbox stacked" />
                                    <label for="input-default-category-stacked-default-checkbox-2">Movies</label>
                                </div>
                                <div class="checkbox">

                                    <input type="checkbox" id="input-default-category-stacked-default-checkbox-3" name="default-checkboxgroup" class="checkbox stacked" />
                                    <label for="input-default-category-stacked-default-checkbox-3">Series</label>
                                </div>
                                <div class="checkbox">

                                    <input type="checkbox" id="input-default-category-stacked-default-checkbox-4" name="default-checkboxgroup" class="checkbox stacked" />
                                    <label for="input-default-category-stacked-default-checkbox-4">Books</label>
                                </div>
                            </div>
                            <div class="form-item-column">

                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset class="form-item stacked checkbox-filter-dynamic">
                    <legend>
                        Price
                    </legend>

                    <div class="form-item">

                        <div class="form-columns">
                            <div class="form-item-column">

                                <div class="accordion-preview">
                                    <div class="checkbox">

                                        <input type="checkbox" id="input-default-price-stacked-default-price-1" name="default-price" class="checkbox stacked" />
                                        <label for="input-default-price-stacked-default-price-1">Less than €100</label>
                                    </div>
                                    <div class="checkbox">

                                        <input type="checkbox" id="input-default-price-stacked-default-price-2" name="default-price" class="checkbox stacked" />
                                        <label for="input-default-price-stacked-default-price-2">€100 - €249</label>
                                    </div>
                                    <div class="checkbox">

                                        <input type="checkbox" id="input-default-price-stacked-default-price-3" name="default-price" class="checkbox stacked" />
                                        <label for="input-default-price-stacked-default-price-3">€250 - €499</label>
                                    </div>
                                </div>

                                <div class="checkbox-accordion">
                                    <div class="accordion--content" aria-hidden="true" hidden="hidden" id="hidden-options-default-price-stacked">

                                        <div class="checkbox">

                                            <input type="checkbox" id="input-default-price-stacked-default-price-4" name="default-price" class="checkbox stacked" />
                                            <label for="input-default-price-stacked-default-price-4">€500 - €999</label>
                                        </div>
                                        <div class="checkbox">

                                            <input type="checkbox" id="input-default-price-stacked-default-price-5" name="default-price" class="checkbox stacked" />
                                            <label for="input-default-price-stacked-default-price-5">€1000 - €1999</label>
                                        </div>
                                        <div class="checkbox">

                                            <input type="checkbox" id="input-default-price-stacked-default-price-6" name="default-price" class="checkbox stacked" />
                                            <label for="input-default-price-stacked-default-price-6">€2000 - €2999</label>
                                        </div>
                                        <div class="checkbox">

                                            <input type="checkbox" id="input-default-price-stacked-default-price-7" name="default-price" class="checkbox stacked" />
                                            <label for="input-default-price-stacked-default-price-7">€3000 - €3999</label>
                                        </div>
                                        <div class="checkbox">

                                            <input type="checkbox" id="input-default-price-stacked-default-price-8" name="default-price" class="checkbox stacked" />
                                            <label for="input-default-price-stacked-default-price-8">€4000 - €4999</label>
                                        </div>
                                        <div class="checkbox">

                                            <input type="checkbox" id="input-default-price-stacked-default-price-9" name="default-price" class="checkbox stacked" />
                                            <label for="input-default-price-stacked-default-price-9">€5000 or more</label>
                                        </div>

                                    </div>

                                    <button type="button" class="accordion--button button button-secondary button-small icon-left" aria-expanded="false" aria-controls="hidden-options-default-price-stacked">
                                        Show more
                                    </button>
                                </div>

                            </div>
                            <div class="form-item-column">

                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset class="form-item stacked checkbox-filter-dynamic">
                    <legend>
                        Activities
                    </legend>

                    <div class="form-item">

                        <div class="form-columns">
                            <div class="form-item-column">

                                <div class="modal-preview">
                                    <div class="checkbox preview">

                                        <input type="checkbox" id="input-default-filter-stacked-checkbox-99-checkboxes-with-filter-preview" data-original="input-default-filter-stacked-checkbox-99-checkboxes-with-filter" value="99" class="checkbox stacked" />
                                        <label for="input-default-filter-stacked-checkbox-99-checkboxes-with-filter-preview">Checkbox option 99</label>
                                    </div>
                                    <div class="checkbox preview">

                                        <input type="checkbox" id="input-default-filter-stacked-checkbox-98-checkboxes-with-filter-preview" data-original="input-default-filter-stacked-checkbox-98-checkboxes-with-filter" value="98" class="checkbox stacked" />
                                        <label for="input-default-filter-stacked-checkbox-98-checkboxes-with-filter-preview">Checkbox option 98</label>
                                    </div>
                                    <div class="checkbox preview">

                                        <input type="checkbox" id="input-default-filter-stacked-checkbox-97-checkboxes-with-filter-preview" data-original="input-default-filter-stacked-checkbox-97-checkboxes-with-filter" value="97" class="checkbox stacked" />
                                        <label for="input-default-filter-stacked-checkbox-97-checkboxes-with-filter-preview">Checkbox option 97</label>
                                    </div>
                                </div>

                                <div id="modalstacked" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modalstacked-title" tabindex="-1">

                                    <div class="modal-inner">
                                        <div class="modal-header">
                                            <button type="button" class="button close icon-cross modal-close checkbox-filter__close" data-target="modalstacked">
                                                <span>Close</span>
                                            </button>
                                        </div>
                                        <div class="modal-content">
                                            <h2 id="modalstacked-title">Activities</h2>

                                            <div class="form-item checkbox-filter__filter__search-wrapper">
                                                <input type="search" id="checkboxes__filter_id_stacked" class="checkbox-filter__filter" aria-label="Filter the list below">

                                                <div aria-live="polite" aria-atomic="true" class="checkbox-filter__result-wrapper">
                                                    <span class="checkbox-filter__result">#</span> filter(s) found
                                                </div>
                                            </div>

                                            <div class="tag-list-wrapper">
                                                <ul class="tag-list checkbox-filter__selected">
                                                </ul>
                                            </div>

                                            <fieldset class="form-item stacked">
                                                <legend>
                                                    Activities
                                                </legend>
                                                <div class="form-item">
                                                    <div class="form-columns">
                                                        <div class="form-item-column">
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-99-checkboxes-with-filter" name="checkboxes-dynamic" value="99" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-99-checkboxes-with-filter">Checkbox option 99</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-98-checkboxes-with-filter" name="checkboxes-dynamic" value="98" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-98-checkboxes-with-filter">Checkbox option 98</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-97-checkboxes-with-filter" name="checkboxes-dynamic" value="97" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-97-checkboxes-with-filter">Checkbox option 97</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-96-checkboxes-with-filter" name="checkboxes-dynamic" value="96" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-96-checkboxes-with-filter">Checkbox option 96</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-95-checkboxes-with-filter" name="checkboxes-dynamic" value="95" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-95-checkboxes-with-filter">Checkbox option 95</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-94-checkboxes-with-filter" name="checkboxes-dynamic" value="94" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-94-checkboxes-with-filter">Checkbox option 94</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-93-checkboxes-with-filter" name="checkboxes-dynamic" value="93" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-93-checkboxes-with-filter">Checkbox option 93</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-92-checkboxes-with-filter" name="checkboxes-dynamic" value="92" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-92-checkboxes-with-filter">Checkbox option 92</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-91-checkboxes-with-filter" name="checkboxes-dynamic" value="91" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-91-checkboxes-with-filter">Checkbox option 91</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-90-checkboxes-with-filter" name="checkboxes-dynamic" value="90" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-90-checkboxes-with-filter">Checkbox option 90</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-89-checkboxes-with-filter" name="checkboxes-dynamic" value="89" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-89-checkboxes-with-filter">Checkbox option 89</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-88-checkboxes-with-filter" name="checkboxes-dynamic" value="88" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-88-checkboxes-with-filter">Checkbox option 88</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-87-checkboxes-with-filter" name="checkboxes-dynamic" value="87" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-87-checkboxes-with-filter">Checkbox option 87</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-86-checkboxes-with-filter" name="checkboxes-dynamic" value="86" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-86-checkboxes-with-filter">Checkbox option 86</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-85-checkboxes-with-filter" name="checkboxes-dynamic" value="85" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-85-checkboxes-with-filter">Checkbox option 85</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-84-checkboxes-with-filter" name="checkboxes-dynamic" value="84" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-84-checkboxes-with-filter">Checkbox option 84</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-83-checkboxes-with-filter" name="checkboxes-dynamic" value="83" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-83-checkboxes-with-filter">Checkbox option 83</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-82-checkboxes-with-filter" name="checkboxes-dynamic" value="82" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-82-checkboxes-with-filter">Checkbox option 82</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-81-checkboxes-with-filter" name="checkboxes-dynamic" value="81" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-81-checkboxes-with-filter">Checkbox option 81</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-80-checkboxes-with-filter" name="checkboxes-dynamic" value="80" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-80-checkboxes-with-filter">Checkbox option 80</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-79-checkboxes-with-filter" name="checkboxes-dynamic" value="79" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-79-checkboxes-with-filter">Checkbox option 79</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-78-checkboxes-with-filter" name="checkboxes-dynamic" value="78" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-78-checkboxes-with-filter">Checkbox option 78</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-77-checkboxes-with-filter" name="checkboxes-dynamic" value="77" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-77-checkboxes-with-filter">Checkbox option 77</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-76-checkboxes-with-filter" name="checkboxes-dynamic" value="76" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-76-checkboxes-with-filter">Checkbox option 76</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-75-checkboxes-with-filter" name="checkboxes-dynamic" value="75" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-75-checkboxes-with-filter">Checkbox option 75</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-74-checkboxes-with-filter" name="checkboxes-dynamic" value="74" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-74-checkboxes-with-filter">Checkbox option 74</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-73-checkboxes-with-filter" name="checkboxes-dynamic" value="73" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-73-checkboxes-with-filter">Checkbox option 73</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-72-checkboxes-with-filter" name="checkboxes-dynamic" value="72" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-72-checkboxes-with-filter">Checkbox option 72</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-71-checkboxes-with-filter" name="checkboxes-dynamic" value="71" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-71-checkboxes-with-filter">Checkbox option 71</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-70-checkboxes-with-filter" name="checkboxes-dynamic" value="70" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-70-checkboxes-with-filter">Checkbox option 70</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-69-checkboxes-with-filter" name="checkboxes-dynamic" value="69" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-69-checkboxes-with-filter">Checkbox option 69</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-68-checkboxes-with-filter" name="checkboxes-dynamic" value="68" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-68-checkboxes-with-filter">Checkbox option 68</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-67-checkboxes-with-filter" name="checkboxes-dynamic" value="67" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-67-checkboxes-with-filter">Checkbox option 67</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-66-checkboxes-with-filter" name="checkboxes-dynamic" value="66" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-66-checkboxes-with-filter">Checkbox option 66</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-65-checkboxes-with-filter" name="checkboxes-dynamic" value="65" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-65-checkboxes-with-filter">Checkbox option 65</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-64-checkboxes-with-filter" name="checkboxes-dynamic" value="64" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-64-checkboxes-with-filter">Checkbox option 64</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-63-checkboxes-with-filter" name="checkboxes-dynamic" value="63" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-63-checkboxes-with-filter">Checkbox option 63</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-62-checkboxes-with-filter" name="checkboxes-dynamic" value="62" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-62-checkboxes-with-filter">Checkbox option 62</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-61-checkboxes-with-filter" name="checkboxes-dynamic" value="61" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-61-checkboxes-with-filter">Checkbox option 61</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-60-checkboxes-with-filter" name="checkboxes-dynamic" value="60" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-60-checkboxes-with-filter">Checkbox option 60</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-59-checkboxes-with-filter" name="checkboxes-dynamic" value="59" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-59-checkboxes-with-filter">Checkbox option 59</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-58-checkboxes-with-filter" name="checkboxes-dynamic" value="58" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-58-checkboxes-with-filter">Checkbox option 58</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-57-checkboxes-with-filter" name="checkboxes-dynamic" value="57" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-57-checkboxes-with-filter">Checkbox option 57</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-56-checkboxes-with-filter" name="checkboxes-dynamic" value="56" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-56-checkboxes-with-filter">Checkbox option 56</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-55-checkboxes-with-filter" name="checkboxes-dynamic" value="55" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-55-checkboxes-with-filter">Checkbox option 55</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-54-checkboxes-with-filter" name="checkboxes-dynamic" value="54" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-54-checkboxes-with-filter">Checkbox option 54</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-53-checkboxes-with-filter" name="checkboxes-dynamic" value="53" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-53-checkboxes-with-filter">Checkbox option 53</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-52-checkboxes-with-filter" name="checkboxes-dynamic" value="52" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-52-checkboxes-with-filter">Checkbox option 52</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-51-checkboxes-with-filter" name="checkboxes-dynamic" value="51" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-51-checkboxes-with-filter">Checkbox option 51</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-50-checkboxes-with-filter" name="checkboxes-dynamic" value="50" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-50-checkboxes-with-filter">Checkbox option 50</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-49-checkboxes-with-filter" name="checkboxes-dynamic" value="49" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-49-checkboxes-with-filter">Checkbox option 49</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-48-checkboxes-with-filter" name="checkboxes-dynamic" value="48" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-48-checkboxes-with-filter">Checkbox option 48</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-47-checkboxes-with-filter" name="checkboxes-dynamic" value="47" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-47-checkboxes-with-filter">Checkbox option 47</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-46-checkboxes-with-filter" name="checkboxes-dynamic" value="46" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-46-checkboxes-with-filter">Checkbox option 46</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-45-checkboxes-with-filter" name="checkboxes-dynamic" value="45" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-45-checkboxes-with-filter">Checkbox option 45</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-44-checkboxes-with-filter" name="checkboxes-dynamic" value="44" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-44-checkboxes-with-filter">Checkbox option 44</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-43-checkboxes-with-filter" name="checkboxes-dynamic" value="43" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-43-checkboxes-with-filter">Checkbox option 43</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-42-checkboxes-with-filter" name="checkboxes-dynamic" value="42" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-42-checkboxes-with-filter">Checkbox option 42</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-41-checkboxes-with-filter" name="checkboxes-dynamic" value="41" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-41-checkboxes-with-filter">Checkbox option 41</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-40-checkboxes-with-filter" name="checkboxes-dynamic" value="40" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-40-checkboxes-with-filter">Checkbox option 40</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-39-checkboxes-with-filter" name="checkboxes-dynamic" value="39" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-39-checkboxes-with-filter">Checkbox option 39</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-38-checkboxes-with-filter" name="checkboxes-dynamic" value="38" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-38-checkboxes-with-filter">Checkbox option 38</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-37-checkboxes-with-filter" name="checkboxes-dynamic" value="37" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-37-checkboxes-with-filter">Checkbox option 37</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-36-checkboxes-with-filter" name="checkboxes-dynamic" value="36" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-36-checkboxes-with-filter">Checkbox option 36</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-35-checkboxes-with-filter" name="checkboxes-dynamic" value="35" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-35-checkboxes-with-filter">Checkbox option 35</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-34-checkboxes-with-filter" name="checkboxes-dynamic" value="34" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-34-checkboxes-with-filter">Checkbox option 34</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-33-checkboxes-with-filter" name="checkboxes-dynamic" value="33" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-33-checkboxes-with-filter">Checkbox option 33</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-32-checkboxes-with-filter" name="checkboxes-dynamic" value="32" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-32-checkboxes-with-filter">Checkbox option 32</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-31-checkboxes-with-filter" name="checkboxes-dynamic" value="31" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-31-checkboxes-with-filter">Checkbox option 31</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-30-checkboxes-with-filter" name="checkboxes-dynamic" value="30" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-30-checkboxes-with-filter">Checkbox option 30</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-29-checkboxes-with-filter" name="checkboxes-dynamic" value="29" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-29-checkboxes-with-filter">Checkbox option 29</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-28-checkboxes-with-filter" name="checkboxes-dynamic" value="28" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-28-checkboxes-with-filter">Checkbox option 28</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-27-checkboxes-with-filter" name="checkboxes-dynamic" value="27" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-27-checkboxes-with-filter">Checkbox option 27</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-26-checkboxes-with-filter" name="checkboxes-dynamic" value="26" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-26-checkboxes-with-filter">Checkbox option 26</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-25-checkboxes-with-filter" name="checkboxes-dynamic" value="25" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-25-checkboxes-with-filter">Checkbox option 25</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-24-checkboxes-with-filter" name="checkboxes-dynamic" value="24" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-24-checkboxes-with-filter">Checkbox option 24</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-23-checkboxes-with-filter" name="checkboxes-dynamic" value="23" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-23-checkboxes-with-filter">Checkbox option 23</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-22-checkboxes-with-filter" name="checkboxes-dynamic" value="22" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-22-checkboxes-with-filter">Checkbox option 22</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-21-checkboxes-with-filter" name="checkboxes-dynamic" value="21" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-21-checkboxes-with-filter">Checkbox option 21</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-20-checkboxes-with-filter" name="checkboxes-dynamic" value="20" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-20-checkboxes-with-filter">Checkbox option 20</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-19-checkboxes-with-filter" name="checkboxes-dynamic" value="19" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-19-checkboxes-with-filter">Checkbox option 19</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-18-checkboxes-with-filter" name="checkboxes-dynamic" value="18" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-18-checkboxes-with-filter">Checkbox option 18</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-17-checkboxes-with-filter" name="checkboxes-dynamic" value="17" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-17-checkboxes-with-filter">Checkbox option 17</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-16-checkboxes-with-filter" name="checkboxes-dynamic" value="16" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-16-checkboxes-with-filter">Checkbox option 16</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-15-checkboxes-with-filter" name="checkboxes-dynamic" value="15" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-15-checkboxes-with-filter">Checkbox option 15</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-14-checkboxes-with-filter" name="checkboxes-dynamic" value="14" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-14-checkboxes-with-filter">Checkbox option 14</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-13-checkboxes-with-filter" name="checkboxes-dynamic" value="13" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-13-checkboxes-with-filter">Checkbox option 13</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-12-checkboxes-with-filter" name="checkboxes-dynamic" value="12" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-12-checkboxes-with-filter">Checkbox option 12</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-11-checkboxes-with-filter" name="checkboxes-dynamic" value="11" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-11-checkboxes-with-filter">Checkbox option 11</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-10-checkboxes-with-filter" name="checkboxes-dynamic" value="10" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-10-checkboxes-with-filter">Checkbox option 10</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-9-checkboxes-with-filter" name="checkboxes-dynamic" value="9" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-9-checkboxes-with-filter">Checkbox option 9</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-8-checkboxes-with-filter" name="checkboxes-dynamic" value="8" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-8-checkboxes-with-filter">Checkbox option 8</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-7-checkboxes-with-filter" name="checkboxes-dynamic" value="7" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-7-checkboxes-with-filter">Checkbox option 7</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-6-checkboxes-with-filter" name="checkboxes-dynamic" value="6" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-6-checkboxes-with-filter">Checkbox option 6</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-5-checkboxes-with-filter" name="checkboxes-dynamic" value="5" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-5-checkboxes-with-filter">Checkbox option 5</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-4-checkboxes-with-filter" name="checkboxes-dynamic" value="4" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-4-checkboxes-with-filter">Checkbox option 4</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-3-checkboxes-with-filter" name="checkboxes-dynamic" value="3" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-3-checkboxes-with-filter">Checkbox option 3</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-2-checkboxes-with-filter" name="checkboxes-dynamic" value="2" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-2-checkboxes-with-filter">Checkbox option 2</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-1-checkboxes-with-filter" name="checkboxes-dynamic" value="1" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-1-checkboxes-with-filter">Checkbox option 1</label>
                                                            </div>
                                                            <div class="checkbox">

                                                                <input type="checkbox" id="input-default-filter-stacked-checkbox-0-checkboxes-with-filter" name="checkboxes-dynamic" class="checkbox stacked" />
                                                                <label for="input-default-filter-stacked-checkbox-0-checkboxes-with-filter">Checkbox option 0</label>
                                                            </div>
                                                        </div>
                                                        <div class="form-item-column">

                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>

                                        </div>
                                        <div class="modal-actions">
                                            <button type="button" class="button button-primary checkbox-filter__submit modal-close" data-target="modalstacked">Confirm selection
                                            </button>

                                        </div>
                                    </div>

                                    <div class="modal-overlay modal-close checkbox-filter__close" data-target="modalstacked" tabindex="-1"></div>
                                </div>

                                <button type="button" class="button button-secondary button-small icon-left icon-search checkbox-filter__open" aria-controls="modalstacked" aria-expanded="false">
                                    Show more
                                </button>

                            </div>
                            <div class="form-item-column">

                            </div>
                        </div>
                    </div>
                </fieldset>

                <div class="form-item  stacked">
                    <label for="select">Store
                        <span class="label-optional">
                            (Optional)
                        </span>
                    </label>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <select name="select" id="select">

                                <option>Option 1</option>

                                <option>Option 2</option>

                                <optgroup label="Option group">
                                    <option>Option 3</option>
                                    <option>Option 4</option>
                                </optgroup>

                            </select>
                        </div>
                        <div class="form-item-column">
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-actions">
                <button type="submit" class="button button-primary filter__submit">Show result</button>
            </div>
        </form>

        <div class="modal-overlay modal-close" data-target="filter" tabindex="-1"></div>
    </div>

    <section class="content result-section" id="result">
        <h1 class="overview-title"><span class="overview-title-colon">Filtercomponent<span class="colon" aria-hidden="true"></span></span></h1>

        <div class="bold show-desktop-only mb-20">
            <p class="">This is an optional introductory text. If this text is present, it is never shown below desktop width!</p>
            <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam dignissimos itaque. Ad autem consequuntur deleniti doloremque, impedit maxime praesentium provident quaerat reiciendis repudiandae vero?</p>
        </div>

        <div class="selected-filters">
            <h2>You have selected:</h2>
            <div class="tag-list-wrapper">
                <ul class="tag-list">
                    <li>

                        <span class="tag filter ">
                            Filter one
                            <button><span class="visually-hidden">Remove Filter one</span></button>
                        </span>

                    </li>
                    <li>

                        <span class="tag filter ">
                            Filter two
                            <button><span class="visually-hidden">Remove Filter two</span></button>
                        </span>

                    </li>
                    <li>

                        <span class="tag filter ">
                            Filter three
                            <button><span class="visually-hidden">Remove Filter three</span></button>
                        </span>

                    </li>
                    <li>
                        <a href='#'>
                            Remove all filters </a>
                    </li>
                </ul>
            </div>

        </div>

        <div class="filter__result-count">
            <h2>We have found 666 results</h2>
            <button type="button" class="button button-secondary icon-filter result__show-filters modal-trigger" aria-expanded="false" aria-controls="filter">Filters
            </button>
        </div>

        <ul class="filter__results">

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>

            <li class="teaser  teaser--wide  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Search result</h3>

                        <div class="tag-list-wrapper">
                            <ul class="tag-list">
                                <li>

                                    <span class="tag ">
                                        some tag
                                    </span>

                                </li>
                            </ul>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?</p>

                        <a href='#' class="read-more standalone-link">
                            Read more <span class="visually-hidden">
                                about Search result
                            </span>
                        </a>
                    </div>

                    <div class="content__first">
                        <div class="figure-wrapper">
                            <figure>
                                <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" /></div>
                            </figure>
                            <div class="accolade-inverse right-top"></div>
                            <div class="accolade-inverse bottom-left"></div>
                        </div>
                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Search result</a>
            </li>
        </ul>

        <nav class="pager" aria-labelledby="pagination_1-2017">
            <h2 id="pagination_1-2017" class="visually-hidden">Pagination</h2>
            <ul class="pager__items">
                <li class="previous"><a href="#" class="previous">
                        Previous
                        <span class="visually-hidden">page</span></a></li>
                <li><a href="#" title="Go to page 1"><span class="visually-hidden">Page</span>
                        1
                    </a></li>
                <li class="spacing">...</li>
                <li class="prev--number"><a href="#" title="Go to page 16"><span class="visually-hidden">Page</span>
                        16
                    </a></li>
                <li class="active"><span class="visually-hidden">Page</span>
                    17
                </li>
                <li class="next--number"><a href="#" title="Go to page 18"><span class="visually-hidden">Page</span>
                        18
                    </a></li>
                <li class="spacing">...</li>
                <li><a href="#" title="Go to page 20"><span class="visually-hidden">Page</span>
                        20
                    </a></li>
                <li class="next"><a href="#">
                        Next
                        <span class="visually-hidden">page</span></a></li>
            </ul>
        </nav>

    </section>

</div>
{
  "checkboxes": [
    {
      "label": "Checkbox option 99",
      "id": "checkbox-99-checkboxes-with-filter",
      "value": 99,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 98",
      "id": "checkbox-98-checkboxes-with-filter",
      "value": 98,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 97",
      "id": "checkbox-97-checkboxes-with-filter",
      "value": 97,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 96",
      "id": "checkbox-96-checkboxes-with-filter",
      "value": 96,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 95",
      "id": "checkbox-95-checkboxes-with-filter",
      "value": 95,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 94",
      "id": "checkbox-94-checkboxes-with-filter",
      "value": 94,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 93",
      "id": "checkbox-93-checkboxes-with-filter",
      "value": 93,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 92",
      "id": "checkbox-92-checkboxes-with-filter",
      "value": 92,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 91",
      "id": "checkbox-91-checkboxes-with-filter",
      "value": 91,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 90",
      "id": "checkbox-90-checkboxes-with-filter",
      "value": 90,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 89",
      "id": "checkbox-89-checkboxes-with-filter",
      "value": 89,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 88",
      "id": "checkbox-88-checkboxes-with-filter",
      "value": 88,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 87",
      "id": "checkbox-87-checkboxes-with-filter",
      "value": 87,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 86",
      "id": "checkbox-86-checkboxes-with-filter",
      "value": 86,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 85",
      "id": "checkbox-85-checkboxes-with-filter",
      "value": 85,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 84",
      "id": "checkbox-84-checkboxes-with-filter",
      "value": 84,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 83",
      "id": "checkbox-83-checkboxes-with-filter",
      "value": 83,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 82",
      "id": "checkbox-82-checkboxes-with-filter",
      "value": 82,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 81",
      "id": "checkbox-81-checkboxes-with-filter",
      "value": 81,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 80",
      "id": "checkbox-80-checkboxes-with-filter",
      "value": 80,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 79",
      "id": "checkbox-79-checkboxes-with-filter",
      "value": 79,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 78",
      "id": "checkbox-78-checkboxes-with-filter",
      "value": 78,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 77",
      "id": "checkbox-77-checkboxes-with-filter",
      "value": 77,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 76",
      "id": "checkbox-76-checkboxes-with-filter",
      "value": 76,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 75",
      "id": "checkbox-75-checkboxes-with-filter",
      "value": 75,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 74",
      "id": "checkbox-74-checkboxes-with-filter",
      "value": 74,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 73",
      "id": "checkbox-73-checkboxes-with-filter",
      "value": 73,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 72",
      "id": "checkbox-72-checkboxes-with-filter",
      "value": 72,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 71",
      "id": "checkbox-71-checkboxes-with-filter",
      "value": 71,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 70",
      "id": "checkbox-70-checkboxes-with-filter",
      "value": 70,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 69",
      "id": "checkbox-69-checkboxes-with-filter",
      "value": 69,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 68",
      "id": "checkbox-68-checkboxes-with-filter",
      "value": 68,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 67",
      "id": "checkbox-67-checkboxes-with-filter",
      "value": 67,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 66",
      "id": "checkbox-66-checkboxes-with-filter",
      "value": 66,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 65",
      "id": "checkbox-65-checkboxes-with-filter",
      "value": 65,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 64",
      "id": "checkbox-64-checkboxes-with-filter",
      "value": 64,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 63",
      "id": "checkbox-63-checkboxes-with-filter",
      "value": 63,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 62",
      "id": "checkbox-62-checkboxes-with-filter",
      "value": 62,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 61",
      "id": "checkbox-61-checkboxes-with-filter",
      "value": 61,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 60",
      "id": "checkbox-60-checkboxes-with-filter",
      "value": 60,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 59",
      "id": "checkbox-59-checkboxes-with-filter",
      "value": 59,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 58",
      "id": "checkbox-58-checkboxes-with-filter",
      "value": 58,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 57",
      "id": "checkbox-57-checkboxes-with-filter",
      "value": 57,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 56",
      "id": "checkbox-56-checkboxes-with-filter",
      "value": 56,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 55",
      "id": "checkbox-55-checkboxes-with-filter",
      "value": 55,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 54",
      "id": "checkbox-54-checkboxes-with-filter",
      "value": 54,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 53",
      "id": "checkbox-53-checkboxes-with-filter",
      "value": 53,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 52",
      "id": "checkbox-52-checkboxes-with-filter",
      "value": 52,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 51",
      "id": "checkbox-51-checkboxes-with-filter",
      "value": 51,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 50",
      "id": "checkbox-50-checkboxes-with-filter",
      "value": 50,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 49",
      "id": "checkbox-49-checkboxes-with-filter",
      "value": 49,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 48",
      "id": "checkbox-48-checkboxes-with-filter",
      "value": 48,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 47",
      "id": "checkbox-47-checkboxes-with-filter",
      "value": 47,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 46",
      "id": "checkbox-46-checkboxes-with-filter",
      "value": 46,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 45",
      "id": "checkbox-45-checkboxes-with-filter",
      "value": 45,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 44",
      "id": "checkbox-44-checkboxes-with-filter",
      "value": 44,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 43",
      "id": "checkbox-43-checkboxes-with-filter",
      "value": 43,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 42",
      "id": "checkbox-42-checkboxes-with-filter",
      "value": 42,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 41",
      "id": "checkbox-41-checkboxes-with-filter",
      "value": 41,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 40",
      "id": "checkbox-40-checkboxes-with-filter",
      "value": 40,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 39",
      "id": "checkbox-39-checkboxes-with-filter",
      "value": 39,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 38",
      "id": "checkbox-38-checkboxes-with-filter",
      "value": 38,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 37",
      "id": "checkbox-37-checkboxes-with-filter",
      "value": 37,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 36",
      "id": "checkbox-36-checkboxes-with-filter",
      "value": 36,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 35",
      "id": "checkbox-35-checkboxes-with-filter",
      "value": 35,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 34",
      "id": "checkbox-34-checkboxes-with-filter",
      "value": 34,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 33",
      "id": "checkbox-33-checkboxes-with-filter",
      "value": 33,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 32",
      "id": "checkbox-32-checkboxes-with-filter",
      "value": 32,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 31",
      "id": "checkbox-31-checkboxes-with-filter",
      "value": 31,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 30",
      "id": "checkbox-30-checkboxes-with-filter",
      "value": 30,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 29",
      "id": "checkbox-29-checkboxes-with-filter",
      "value": 29,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 28",
      "id": "checkbox-28-checkboxes-with-filter",
      "value": 28,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 27",
      "id": "checkbox-27-checkboxes-with-filter",
      "value": 27,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 26",
      "id": "checkbox-26-checkboxes-with-filter",
      "value": 26,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 25",
      "id": "checkbox-25-checkboxes-with-filter",
      "value": 25,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 24",
      "id": "checkbox-24-checkboxes-with-filter",
      "value": 24,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 23",
      "id": "checkbox-23-checkboxes-with-filter",
      "value": 23,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 22",
      "id": "checkbox-22-checkboxes-with-filter",
      "value": 22,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 21",
      "id": "checkbox-21-checkboxes-with-filter",
      "value": 21,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 20",
      "id": "checkbox-20-checkboxes-with-filter",
      "value": 20,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 19",
      "id": "checkbox-19-checkboxes-with-filter",
      "value": 19,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 18",
      "id": "checkbox-18-checkboxes-with-filter",
      "value": 18,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 17",
      "id": "checkbox-17-checkboxes-with-filter",
      "value": 17,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 16",
      "id": "checkbox-16-checkboxes-with-filter",
      "value": 16,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 15",
      "id": "checkbox-15-checkboxes-with-filter",
      "value": 15,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 14",
      "id": "checkbox-14-checkboxes-with-filter",
      "value": 14,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 13",
      "id": "checkbox-13-checkboxes-with-filter",
      "value": 13,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 12",
      "id": "checkbox-12-checkboxes-with-filter",
      "value": 12,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 11",
      "id": "checkbox-11-checkboxes-with-filter",
      "value": 11,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 10",
      "id": "checkbox-10-checkboxes-with-filter",
      "value": 10,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 9",
      "id": "checkbox-9-checkboxes-with-filter",
      "value": 9,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 8",
      "id": "checkbox-8-checkboxes-with-filter",
      "value": 8,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 7",
      "id": "checkbox-7-checkboxes-with-filter",
      "value": 7,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 6",
      "id": "checkbox-6-checkboxes-with-filter",
      "value": 6,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 5",
      "id": "checkbox-5-checkboxes-with-filter",
      "value": 5,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 4",
      "id": "checkbox-4-checkboxes-with-filter",
      "value": 4,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 3",
      "id": "checkbox-3-checkboxes-with-filter",
      "value": 3,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 2",
      "id": "checkbox-2-checkboxes-with-filter",
      "value": 2,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 1",
      "id": "checkbox-1-checkboxes-with-filter",
      "value": 1,
      "name": "checkboxes-dynamic"
    },
    {
      "label": "Checkbox option 0",
      "id": "checkbox-0-checkboxes-with-filter",
      "value": 0,
      "name": "checkboxes-dynamic"
    }
  ],
  "results": [
    {
      "teaser_uid": "search_teaser_9",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_8",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_7",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_6",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_5",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_4",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_3",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_2",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_1",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    },
    {
      "teaser_uid": "search_teaser_0",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "Read more",
      "tags": [
        "some tag"
      ]
    }
  ]
}
  • Content:
    .filter {
      .result-section {
    
        .selected-filters,
        .filter__result-count {
          h2 {
            font-size: .8rem;
          }
        }
    
        .result__show-filters {
          @include desktop {
            display: none;
          }
        }
    
        .selected-filters {
          margin-bottom: 1rem;
        }
    
        .filter__result-count {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1.2rem;
    
          > * {
            margin: 0;
          }
    
          > * + * {
            margin-left: gutter() / 2;
          }
        }
    
        ul.filter__results {
          @extend %list-no-style;
        }
    
        .pager {
          @include tablet {
            li.previous,
            li.next {
              display: none;
            }
          }
    
          @include desktop {
            li.previous,
            li.next {
              display: block;
            }
          }
        }
      }
    }
    
    // On mobile the filter-section is moved to the body root because it is converted to a modal.
    // This means it's no longer a child of .filter.
    .sidebar.filter-section {
      padding-top: .7rem;
      visibility: hidden;
    
      @include desktop {
        position: static;
        height: auto;
        box-shadow: none;
        overflow: visible;
        visibility: visible;
        z-index: auto;
      }
    
      &.visible {
        @include breakpoint(max-width $bp-desktop) {
          padding: 0;
          visibility: visible;
    
          > .modal-inner > .modal-header {
            display: block;
          }
        }
      }
    
      > .modal-inner {
        width: 100%;
        max-width: initial;
        min-height: 100%;
        margin: 0;
        padding: 0;
    
        @include desktop {
          position: relative;
          top: 0;
          left: 0;
          transform: none;
          z-index: auto;
          filter: none;
        }
    
        > .modal-header {
          display: none;
        }
    
        > .modal-content {
          @include desktop {
            padding: 0;
            overflow: visible;
          }
        }
    
        > .modal-actions {
          @include desktop {
            padding-right: 0;
            padding-left: 0;
            border: 0;
          }
        }
      }
    
      > .modal-overlay {
        display: none;
      }
    
      form,
      form .modal-content {
        // style first level labels as headings
        > .form-item > label,
        > fieldset.form-item > legend {
          @extend %h3;
        }
    
        > fieldset {
          padding: 0;
          border: 0;
        }
      }
    
      .label-optional {
        display: none;
      }
    
      .filter__submit {
        margin-top: .8rem;
        margin-bottom: .8rem;
      }
    }
    
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: components/41-organisms/filter/_filter.scss
  • Size: 2.3 KB
  • Content:
    'use strict';
    
    (function () {
    
      if (!Modal) { // eslint-disable-line no-undef
        return;
      }
    
      const filter = document.querySelector('#filter');
      // eslint-disable-next-line no-undef
      new Modal(filter, {
        // The modal is always visible from tablet and up,
        // this is atypical.
        resizeEvent: (open, close) => {
          if (window.innerWidth > 960) {
            close();
            filter.setAttribute('aria-hidden', 'false');
          }
          else if (!filter.classList.contains('visible')) {
            filter.setAttribute('aria-hidden', 'true');
          }
        }
      });
    })();
    
  • URL: /components/raw/filter/filter.bindings.js
  • Filesystem Path: components/41-organisms/filter/filter.bindings.js
  • Size: 574 Bytes