Filter

Filter

Functionality

  • Selected filters and result count are only visible after a search has occurred.
<div class="sidebar-layout filter">
  {% set modalContent %}

    <form action="#result">
      <div class="form-item">
        {% include '@label' with {
          "label": "Name",
          "for": "id_name",
          "label_optional": "Optional"
        } %}
        {% include '@input' with {
          "type": "text",
          "id": "id_name",
          "name": "name",
        } %}
      </div>
      <div class="form-item">
        {% include '@label' with {
          "label": "Category",
          "for": "id_category",
          "label_optional": "Optional"
        } %}
        {% include '@input' with {
          "type": "text",
          "id": "id_category",
          "name": "category"
        } %}
      </div>
      {% include '@checkbox-with-filter' with {
        "label": "Activities",
        "label_optional": "Optional",
        "label_count": "activity(ies)",
        "options": checkboxes,
        "field_description": null,
        "stacked": true
      } %}
      <div class="form-item">
        {% include '@label' with {
          "label": "Type",
          "for": "id_type",
          "label_optional": "Optional"
        } %}
        {% include '@input' with {
          "type": "text",
          "id": "id_type",
          "name": "type"
        } %}
      </div>
      <div class="form-item">
        {% include '@label' with {
          "label": "Extra",
          "for": "id_extra",
          "label_optional": "Optional"
        } %}
        {% include '@input' with {
          "type": "text",
          "id": "id_extra",
          "name": "type"
        } %}
      </div>
      <div class="form-item">
        {% include '@label' with {
          "label": "Extra bis",
          "for": "id_extra1",
          "label_optional": "Optional"
        } %}
        {% include '@input' with {
          "type": "text",
          "id": "id_extra1",
          "name": "type"
        } %}
      </div>
      <div class="form-item">
        {% include '@label' with {
          "label": "Extra tris",
          "for": "id_extra2",
          "label_optional": "Optional"
        } %}
        {% include '@input' with {
          "type": "text",
          "id": "id_extra2",
          "name": "type"
        } %}
      </div>
      <button type="submit" class="button button-primary filter__submit">Show result</button>

    </form>
  {% endset %}
  {% include "@modal" with {
    id: 'filter',
    title: 'Filter the results',
    title_heading_level: 'h2',
    classes: 'sidebar filter-section has-custom-binding',
    content: modalContent
  } %}

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

    {% include '@readspeaker-button' %}

    <div class="selected-filters">
      <h2>You have selected:</h2>
      <span :key="filter.key" class="tag filter">
        Filter one
        <button><span class="visually-hidden">Remove this filter</span></button>
      </span>
      <span :key="filter.key" class="tag filter">
        Filter two
        <button><span class="visually-hidden">Remove this filter</span></button>
      </span>
      <a href="#">Remove all filters</a>
    </div>

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

    <ul class="filter__results">
      {% 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,
          "tag": result.tag,
          "tag2": null,
          "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" role="dialog" aria-modal="true" aria-labelledby="filter-title" tabindex="-1">

        <div class="modal-inner">
            <div class="modal-header">
                <button type="button" class="button close icon-cross modal-close" data-target="filter">
                    <span>Close</span>
                </button>
            </div>
            <div class="modal-content">
                <h2 id="filter-title">Filter the results</h2>

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

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

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

                    <fieldset class="form-item  stacked checkbox-filter">
                        <legend>
                            Activities
                            <span class="label-optional">(Optional)</span>
                        </legend>
                        <div class="form-columns">
                            <div class="form-item-column">
                                <div id="modal" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">

                                    <div class="modal-inner">
                                        <div class="modal-header">
                                            <button type="button" class="button close icon-cross modal-close checkbox-filter__close" data-target="modal">
                                                <span>Close</span>
                                            </button>
                                        </div>
                                        <div class="modal-content">
                                            <h3 id="modal-title">Activities<span class="label-optional">(Optional)</span></h3>
                                            <div class="checkbox-filter__selected"></div>
                                            <div class="form-item">
                                                <label for="checkboxes__filter_id_">Filter the list
                                                    below</label>
                                                <div class="form-item checkbox-filter__filter__search-wrapper">
                                                    <input type="search" id="checkboxes__filter_id_" class="checkbox-filter__filter">

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

                                            <div class="checkbox-filter__checkboxes">
                                                <h4 class="checkbox-filter__category">Category 9</h4>
                                                <div class="checkbox full-width">

                                                    <input type="checkbox" id="category_ 9-" value="category_ 9" class="checkbox" />
                                                    <label for="category_ 9-">Show all</label>
                                                </div>

                                                <div class="checkbox">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                                    <input type="checkbox" id="category_ 10-" value="category_ 10" class="checkbox" />
                                                    <label for="category_ 10-">Show all</label>
                                                </div>

                                                <div class="checkbox">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                        </div>
                                    </div>

                                    <div class="modal-overlay modal-close checkbox-filter__close" data-target="modal" tabindex="-1"></div>
                                </div>
                                <p class="checkbox-filter__count-wrapper hidden">
                                    <strong><span class="checkbox-filter__count">0</span> activity(ies)
                                        selected</strong>
                                </p>
                                <button type="button" class="button button-secondary button-small checkbox-filter__open" aria-controls="modal" aria-expanded="false">
                                    Select ...
                                </button>
                            </div>
                            <div class="form-item-column">
                            </div>
                        </div>
                    </fieldset>
                    <div class="form-item">
                        <label for="id_type">Type
                            <span class="label-optional">
                                (Optional)
                            </span>
                        </label>

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

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

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

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

                </form>

            </div>
        </div>

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

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

        <button class="readspeaker-button">
            <i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
        </button>

        <div class="selected-filters">
            <h2>You have selected:</h2>
            <span :key="filter.key" class="tag filter">
                Filter one
                <button><span class="visually-hidden">Remove this filter</span></button>
            </span>
            <span :key="filter.key" class="tag filter">
                Filter two
                <button><span class="visually-hidden">Remove this filter</span></button>
            </span>
            <a href="#">Remove all filters</a>
        </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    </section>

</div>
{
  "checkboxes": [
    {
      "title": "Category 9",
      "value": "category_ 9",
      "items": [
        {
          "label_checkbox": "Checkbox option 199",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-199-checkbox-with-filter",
          "checkbox_value": "199"
        },
        {
          "label_checkbox": "Checkbox option 198",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-198-checkbox-with-filter",
          "checkbox_value": "198"
        },
        {
          "label_checkbox": "Checkbox option 197",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-197-checkbox-with-filter",
          "checkbox_value": "197"
        },
        {
          "label_checkbox": "Checkbox option 196",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-196-checkbox-with-filter",
          "checkbox_value": "196"
        },
        {
          "label_checkbox": "Checkbox option 195",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-195-checkbox-with-filter",
          "checkbox_value": "195"
        },
        {
          "label_checkbox": "Checkbox option 194",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-194-checkbox-with-filter",
          "checkbox_value": "194"
        },
        {
          "label_checkbox": "Checkbox option 193",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-193-checkbox-with-filter",
          "checkbox_value": "193"
        },
        {
          "label_checkbox": "Checkbox option 192",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-192-checkbox-with-filter",
          "checkbox_value": "192"
        },
        {
          "label_checkbox": "Checkbox option 191",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-191-checkbox-with-filter",
          "checkbox_value": "191"
        },
        {
          "label_checkbox": "Checkbox option 190",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-190-checkbox-with-filter",
          "checkbox_value": "190"
        },
        {
          "label_checkbox": "Checkbox option 189",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-189-checkbox-with-filter",
          "checkbox_value": "189"
        },
        {
          "label_checkbox": "Checkbox option 188",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-188-checkbox-with-filter",
          "checkbox_value": "188"
        },
        {
          "label_checkbox": "Checkbox option 187",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-187-checkbox-with-filter",
          "checkbox_value": "187"
        },
        {
          "label_checkbox": "Checkbox option 186",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-186-checkbox-with-filter",
          "checkbox_value": "186"
        },
        {
          "label_checkbox": "Checkbox option 185",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-185-checkbox-with-filter",
          "checkbox_value": "185"
        },
        {
          "label_checkbox": "Checkbox option 184",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-184-checkbox-with-filter",
          "checkbox_value": "184"
        },
        {
          "label_checkbox": "Checkbox option 183",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-183-checkbox-with-filter",
          "checkbox_value": "183"
        },
        {
          "label_checkbox": "Checkbox option 182",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-182-checkbox-with-filter",
          "checkbox_value": "182"
        },
        {
          "label_checkbox": "Checkbox option 181",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-181-checkbox-with-filter",
          "checkbox_value": "181"
        },
        {
          "label_checkbox": "Checkbox option 180",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-180-checkbox-with-filter",
          "checkbox_value": "180"
        },
        {
          "label_checkbox": "Checkbox option 179",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-179-checkbox-with-filter",
          "checkbox_value": "179"
        },
        {
          "label_checkbox": "Checkbox option 178",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-178-checkbox-with-filter",
          "checkbox_value": "178"
        },
        {
          "label_checkbox": "Checkbox option 177",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-177-checkbox-with-filter",
          "checkbox_value": "177"
        },
        {
          "label_checkbox": "Checkbox option 176",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-176-checkbox-with-filter",
          "checkbox_value": "176"
        },
        {
          "label_checkbox": "Checkbox option 175",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-175-checkbox-with-filter",
          "checkbox_value": "175"
        },
        {
          "label_checkbox": "Checkbox option 174",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-174-checkbox-with-filter",
          "checkbox_value": "174"
        },
        {
          "label_checkbox": "Checkbox option 173",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-173-checkbox-with-filter",
          "checkbox_value": "173"
        },
        {
          "label_checkbox": "Checkbox option 172",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-172-checkbox-with-filter",
          "checkbox_value": "172"
        },
        {
          "label_checkbox": "Checkbox option 171",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-171-checkbox-with-filter",
          "checkbox_value": "171"
        },
        {
          "label_checkbox": "Checkbox option 170",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-170-checkbox-with-filter",
          "checkbox_value": "170"
        },
        {
          "label_checkbox": "Checkbox option 169",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-169-checkbox-with-filter",
          "checkbox_value": "169"
        },
        {
          "label_checkbox": "Checkbox option 168",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-168-checkbox-with-filter",
          "checkbox_value": "168"
        },
        {
          "label_checkbox": "Checkbox option 167",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-167-checkbox-with-filter",
          "checkbox_value": "167"
        },
        {
          "label_checkbox": "Checkbox option 166",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-166-checkbox-with-filter",
          "checkbox_value": "166"
        },
        {
          "label_checkbox": "Checkbox option 165",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-165-checkbox-with-filter",
          "checkbox_value": "165"
        },
        {
          "label_checkbox": "Checkbox option 164",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-164-checkbox-with-filter",
          "checkbox_value": "164"
        },
        {
          "label_checkbox": "Checkbox option 163",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-163-checkbox-with-filter",
          "checkbox_value": "163"
        },
        {
          "label_checkbox": "Checkbox option 162",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-162-checkbox-with-filter",
          "checkbox_value": "162"
        },
        {
          "label_checkbox": "Checkbox option 161",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-161-checkbox-with-filter",
          "checkbox_value": "161"
        },
        {
          "label_checkbox": "Checkbox option 160",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-160-checkbox-with-filter",
          "checkbox_value": "160"
        },
        {
          "label_checkbox": "Checkbox option 159",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-159-checkbox-with-filter",
          "checkbox_value": "159"
        },
        {
          "label_checkbox": "Checkbox option 158",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-158-checkbox-with-filter",
          "checkbox_value": "158"
        },
        {
          "label_checkbox": "Checkbox option 157",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-157-checkbox-with-filter",
          "checkbox_value": "157"
        },
        {
          "label_checkbox": "Checkbox option 156",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-156-checkbox-with-filter",
          "checkbox_value": "156"
        },
        {
          "label_checkbox": "Checkbox option 155",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-155-checkbox-with-filter",
          "checkbox_value": "155"
        },
        {
          "label_checkbox": "Checkbox option 154",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-154-checkbox-with-filter",
          "checkbox_value": "154"
        },
        {
          "label_checkbox": "Checkbox option 153",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-153-checkbox-with-filter",
          "checkbox_value": "153"
        },
        {
          "label_checkbox": "Checkbox option 152",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-152-checkbox-with-filter",
          "checkbox_value": "152"
        },
        {
          "label_checkbox": "Checkbox option 151",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-151-checkbox-with-filter",
          "checkbox_value": "151"
        },
        {
          "label_checkbox": "Checkbox option 150",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-150-checkbox-with-filter",
          "checkbox_value": "150"
        },
        {
          "label_checkbox": "Checkbox option 149",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-149-checkbox-with-filter",
          "checkbox_value": "149"
        },
        {
          "label_checkbox": "Checkbox option 148",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-148-checkbox-with-filter",
          "checkbox_value": "148"
        },
        {
          "label_checkbox": "Checkbox option 147",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-147-checkbox-with-filter",
          "checkbox_value": "147"
        },
        {
          "label_checkbox": "Checkbox option 146",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-146-checkbox-with-filter",
          "checkbox_value": "146"
        },
        {
          "label_checkbox": "Checkbox option 145",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-145-checkbox-with-filter",
          "checkbox_value": "145"
        },
        {
          "label_checkbox": "Checkbox option 144",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-144-checkbox-with-filter",
          "checkbox_value": "144"
        },
        {
          "label_checkbox": "Checkbox option 143",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-143-checkbox-with-filter",
          "checkbox_value": "143"
        },
        {
          "label_checkbox": "Checkbox option 142",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-142-checkbox-with-filter",
          "checkbox_value": "142"
        },
        {
          "label_checkbox": "Checkbox option 141",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-141-checkbox-with-filter",
          "checkbox_value": "141"
        },
        {
          "label_checkbox": "Checkbox option 140",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-140-checkbox-with-filter",
          "checkbox_value": "140"
        },
        {
          "label_checkbox": "Checkbox option 139",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-139-checkbox-with-filter",
          "checkbox_value": "139"
        },
        {
          "label_checkbox": "Checkbox option 138",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-138-checkbox-with-filter",
          "checkbox_value": "138"
        },
        {
          "label_checkbox": "Checkbox option 137",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-137-checkbox-with-filter",
          "checkbox_value": "137"
        },
        {
          "label_checkbox": "Checkbox option 136",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-136-checkbox-with-filter",
          "checkbox_value": "136"
        },
        {
          "label_checkbox": "Checkbox option 135",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-135-checkbox-with-filter",
          "checkbox_value": "135"
        },
        {
          "label_checkbox": "Checkbox option 134",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-134-checkbox-with-filter",
          "checkbox_value": "134"
        },
        {
          "label_checkbox": "Checkbox option 133",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-133-checkbox-with-filter",
          "checkbox_value": "133"
        },
        {
          "label_checkbox": "Checkbox option 132",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-132-checkbox-with-filter",
          "checkbox_value": "132"
        },
        {
          "label_checkbox": "Checkbox option 131",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-131-checkbox-with-filter",
          "checkbox_value": "131"
        },
        {
          "label_checkbox": "Checkbox option 130",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-130-checkbox-with-filter",
          "checkbox_value": "130"
        },
        {
          "label_checkbox": "Checkbox option 129",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-129-checkbox-with-filter",
          "checkbox_value": "129"
        },
        {
          "label_checkbox": "Checkbox option 128",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-128-checkbox-with-filter",
          "checkbox_value": "128"
        },
        {
          "label_checkbox": "Checkbox option 127",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-127-checkbox-with-filter",
          "checkbox_value": "127"
        },
        {
          "label_checkbox": "Checkbox option 126",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-126-checkbox-with-filter",
          "checkbox_value": "126"
        },
        {
          "label_checkbox": "Checkbox option 125",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-125-checkbox-with-filter",
          "checkbox_value": "125"
        },
        {
          "label_checkbox": "Checkbox option 124",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-124-checkbox-with-filter",
          "checkbox_value": "124"
        },
        {
          "label_checkbox": "Checkbox option 123",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-123-checkbox-with-filter",
          "checkbox_value": "123"
        },
        {
          "label_checkbox": "Checkbox option 122",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-122-checkbox-with-filter",
          "checkbox_value": "122"
        },
        {
          "label_checkbox": "Checkbox option 121",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-121-checkbox-with-filter",
          "checkbox_value": "121"
        },
        {
          "label_checkbox": "Checkbox option 120",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-120-checkbox-with-filter",
          "checkbox_value": "120"
        },
        {
          "label_checkbox": "Checkbox option 119",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-119-checkbox-with-filter",
          "checkbox_value": "119"
        },
        {
          "label_checkbox": "Checkbox option 118",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-118-checkbox-with-filter",
          "checkbox_value": "118"
        },
        {
          "label_checkbox": "Checkbox option 117",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-117-checkbox-with-filter",
          "checkbox_value": "117"
        },
        {
          "label_checkbox": "Checkbox option 116",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-116-checkbox-with-filter",
          "checkbox_value": "116"
        },
        {
          "label_checkbox": "Checkbox option 115",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-115-checkbox-with-filter",
          "checkbox_value": "115"
        },
        {
          "label_checkbox": "Checkbox option 114",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-114-checkbox-with-filter",
          "checkbox_value": "114"
        },
        {
          "label_checkbox": "Checkbox option 113",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-113-checkbox-with-filter",
          "checkbox_value": "113"
        },
        {
          "label_checkbox": "Checkbox option 112",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-112-checkbox-with-filter",
          "checkbox_value": "112"
        },
        {
          "label_checkbox": "Checkbox option 111",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-111-checkbox-with-filter",
          "checkbox_value": "111"
        },
        {
          "label_checkbox": "Checkbox option 110",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-110-checkbox-with-filter",
          "checkbox_value": "110"
        },
        {
          "label_checkbox": "Checkbox option 19",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-19-checkbox-with-filter",
          "checkbox_value": "19"
        },
        {
          "label_checkbox": "Checkbox option 18",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-18-checkbox-with-filter",
          "checkbox_value": "18"
        },
        {
          "label_checkbox": "Checkbox option 17",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-17-checkbox-with-filter",
          "checkbox_value": "17"
        },
        {
          "label_checkbox": "Checkbox option 16",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-16-checkbox-with-filter",
          "checkbox_value": "16"
        },
        {
          "label_checkbox": "Checkbox option 15",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-15-checkbox-with-filter",
          "checkbox_value": "15"
        },
        {
          "label_checkbox": "Checkbox option 14",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-14-checkbox-with-filter",
          "checkbox_value": "14"
        },
        {
          "label_checkbox": "Checkbox option 13",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-13-checkbox-with-filter",
          "checkbox_value": "13"
        },
        {
          "label_checkbox": "Checkbox option 12",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-12-checkbox-with-filter",
          "checkbox_value": "12"
        },
        {
          "label_checkbox": "Checkbox option 11",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-11-checkbox-with-filter",
          "checkbox_value": "11"
        },
        {
          "label_checkbox": "Checkbox option 10",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-10-checkbox-with-filter",
          "checkbox_value": "10"
        }
      ]
    },
    {
      "title": "Category 10",
      "value": "category_ 10",
      "items": [
        {
          "label_checkbox": "Checkbox option 099",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-099-checkbox-with-filter",
          "checkbox_value": "099"
        },
        {
          "label_checkbox": "Checkbox option 098",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-098-checkbox-with-filter",
          "checkbox_value": "098"
        },
        {
          "label_checkbox": "Checkbox option 097",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-097-checkbox-with-filter",
          "checkbox_value": "097"
        },
        {
          "label_checkbox": "Checkbox option 096",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-096-checkbox-with-filter",
          "checkbox_value": "096"
        },
        {
          "label_checkbox": "Checkbox option 095",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-095-checkbox-with-filter",
          "checkbox_value": "095"
        },
        {
          "label_checkbox": "Checkbox option 094",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-094-checkbox-with-filter",
          "checkbox_value": "094"
        },
        {
          "label_checkbox": "Checkbox option 093",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-093-checkbox-with-filter",
          "checkbox_value": "093"
        },
        {
          "label_checkbox": "Checkbox option 092",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-092-checkbox-with-filter",
          "checkbox_value": "092"
        },
        {
          "label_checkbox": "Checkbox option 091",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-091-checkbox-with-filter",
          "checkbox_value": "091"
        },
        {
          "label_checkbox": "Checkbox option 090",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-090-checkbox-with-filter",
          "checkbox_value": "090"
        },
        {
          "label_checkbox": "Checkbox option 089",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-089-checkbox-with-filter",
          "checkbox_value": "089"
        },
        {
          "label_checkbox": "Checkbox option 088",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-088-checkbox-with-filter",
          "checkbox_value": "088"
        },
        {
          "label_checkbox": "Checkbox option 087",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-087-checkbox-with-filter",
          "checkbox_value": "087"
        },
        {
          "label_checkbox": "Checkbox option 086",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-086-checkbox-with-filter",
          "checkbox_value": "086"
        },
        {
          "label_checkbox": "Checkbox option 085",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-085-checkbox-with-filter",
          "checkbox_value": "085"
        },
        {
          "label_checkbox": "Checkbox option 084",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-084-checkbox-with-filter",
          "checkbox_value": "084"
        },
        {
          "label_checkbox": "Checkbox option 083",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-083-checkbox-with-filter",
          "checkbox_value": "083"
        },
        {
          "label_checkbox": "Checkbox option 082",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-082-checkbox-with-filter",
          "checkbox_value": "082"
        },
        {
          "label_checkbox": "Checkbox option 081",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-081-checkbox-with-filter",
          "checkbox_value": "081"
        },
        {
          "label_checkbox": "Checkbox option 080",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-080-checkbox-with-filter",
          "checkbox_value": "080"
        },
        {
          "label_checkbox": "Checkbox option 079",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-079-checkbox-with-filter",
          "checkbox_value": "079"
        },
        {
          "label_checkbox": "Checkbox option 078",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-078-checkbox-with-filter",
          "checkbox_value": "078"
        },
        {
          "label_checkbox": "Checkbox option 077",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-077-checkbox-with-filter",
          "checkbox_value": "077"
        },
        {
          "label_checkbox": "Checkbox option 076",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-076-checkbox-with-filter",
          "checkbox_value": "076"
        },
        {
          "label_checkbox": "Checkbox option 075",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-075-checkbox-with-filter",
          "checkbox_value": "075"
        },
        {
          "label_checkbox": "Checkbox option 074",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-074-checkbox-with-filter",
          "checkbox_value": "074"
        },
        {
          "label_checkbox": "Checkbox option 073",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-073-checkbox-with-filter",
          "checkbox_value": "073"
        },
        {
          "label_checkbox": "Checkbox option 072",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-072-checkbox-with-filter",
          "checkbox_value": "072"
        },
        {
          "label_checkbox": "Checkbox option 071",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-071-checkbox-with-filter",
          "checkbox_value": "071"
        },
        {
          "label_checkbox": "Checkbox option 070",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-070-checkbox-with-filter",
          "checkbox_value": "070"
        },
        {
          "label_checkbox": "Checkbox option 069",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-069-checkbox-with-filter",
          "checkbox_value": "069"
        },
        {
          "label_checkbox": "Checkbox option 068",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-068-checkbox-with-filter",
          "checkbox_value": "068"
        },
        {
          "label_checkbox": "Checkbox option 067",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-067-checkbox-with-filter",
          "checkbox_value": "067"
        },
        {
          "label_checkbox": "Checkbox option 066",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-066-checkbox-with-filter",
          "checkbox_value": "066"
        },
        {
          "label_checkbox": "Checkbox option 065",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-065-checkbox-with-filter",
          "checkbox_value": "065"
        },
        {
          "label_checkbox": "Checkbox option 064",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-064-checkbox-with-filter",
          "checkbox_value": "064"
        },
        {
          "label_checkbox": "Checkbox option 063",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-063-checkbox-with-filter",
          "checkbox_value": "063"
        },
        {
          "label_checkbox": "Checkbox option 062",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-062-checkbox-with-filter",
          "checkbox_value": "062"
        },
        {
          "label_checkbox": "Checkbox option 061",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-061-checkbox-with-filter",
          "checkbox_value": "061"
        },
        {
          "label_checkbox": "Checkbox option 060",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-060-checkbox-with-filter",
          "checkbox_value": "060"
        },
        {
          "label_checkbox": "Checkbox option 059",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-059-checkbox-with-filter",
          "checkbox_value": "059"
        },
        {
          "label_checkbox": "Checkbox option 058",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-058-checkbox-with-filter",
          "checkbox_value": "058"
        },
        {
          "label_checkbox": "Checkbox option 057",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-057-checkbox-with-filter",
          "checkbox_value": "057"
        },
        {
          "label_checkbox": "Checkbox option 056",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-056-checkbox-with-filter",
          "checkbox_value": "056"
        },
        {
          "label_checkbox": "Checkbox option 055",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-055-checkbox-with-filter",
          "checkbox_value": "055"
        },
        {
          "label_checkbox": "Checkbox option 054",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-054-checkbox-with-filter",
          "checkbox_value": "054"
        },
        {
          "label_checkbox": "Checkbox option 053",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-053-checkbox-with-filter",
          "checkbox_value": "053"
        },
        {
          "label_checkbox": "Checkbox option 052",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-052-checkbox-with-filter",
          "checkbox_value": "052"
        },
        {
          "label_checkbox": "Checkbox option 051",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-051-checkbox-with-filter",
          "checkbox_value": "051"
        },
        {
          "label_checkbox": "Checkbox option 050",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-050-checkbox-with-filter",
          "checkbox_value": "050"
        },
        {
          "label_checkbox": "Checkbox option 049",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-049-checkbox-with-filter",
          "checkbox_value": "049"
        },
        {
          "label_checkbox": "Checkbox option 048",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-048-checkbox-with-filter",
          "checkbox_value": "048"
        },
        {
          "label_checkbox": "Checkbox option 047",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-047-checkbox-with-filter",
          "checkbox_value": "047"
        },
        {
          "label_checkbox": "Checkbox option 046",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-046-checkbox-with-filter",
          "checkbox_value": "046"
        },
        {
          "label_checkbox": "Checkbox option 045",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-045-checkbox-with-filter",
          "checkbox_value": "045"
        },
        {
          "label_checkbox": "Checkbox option 044",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-044-checkbox-with-filter",
          "checkbox_value": "044"
        },
        {
          "label_checkbox": "Checkbox option 043",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-043-checkbox-with-filter",
          "checkbox_value": "043"
        },
        {
          "label_checkbox": "Checkbox option 042",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-042-checkbox-with-filter",
          "checkbox_value": "042"
        },
        {
          "label_checkbox": "Checkbox option 041",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-041-checkbox-with-filter",
          "checkbox_value": "041"
        },
        {
          "label_checkbox": "Checkbox option 040",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-040-checkbox-with-filter",
          "checkbox_value": "040"
        },
        {
          "label_checkbox": "Checkbox option 039",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-039-checkbox-with-filter",
          "checkbox_value": "039"
        },
        {
          "label_checkbox": "Checkbox option 038",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-038-checkbox-with-filter",
          "checkbox_value": "038"
        },
        {
          "label_checkbox": "Checkbox option 037",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-037-checkbox-with-filter",
          "checkbox_value": "037"
        },
        {
          "label_checkbox": "Checkbox option 036",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-036-checkbox-with-filter",
          "checkbox_value": "036"
        },
        {
          "label_checkbox": "Checkbox option 035",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-035-checkbox-with-filter",
          "checkbox_value": "035"
        },
        {
          "label_checkbox": "Checkbox option 034",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-034-checkbox-with-filter",
          "checkbox_value": "034"
        },
        {
          "label_checkbox": "Checkbox option 033",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-033-checkbox-with-filter",
          "checkbox_value": "033"
        },
        {
          "label_checkbox": "Checkbox option 032",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-032-checkbox-with-filter",
          "checkbox_value": "032"
        },
        {
          "label_checkbox": "Checkbox option 031",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-031-checkbox-with-filter",
          "checkbox_value": "031"
        },
        {
          "label_checkbox": "Checkbox option 030",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-030-checkbox-with-filter",
          "checkbox_value": "030"
        },
        {
          "label_checkbox": "Checkbox option 029",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-029-checkbox-with-filter",
          "checkbox_value": "029"
        },
        {
          "label_checkbox": "Checkbox option 028",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-028-checkbox-with-filter",
          "checkbox_value": "028"
        },
        {
          "label_checkbox": "Checkbox option 027",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-027-checkbox-with-filter",
          "checkbox_value": "027"
        },
        {
          "label_checkbox": "Checkbox option 026",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-026-checkbox-with-filter",
          "checkbox_value": "026"
        },
        {
          "label_checkbox": "Checkbox option 025",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-025-checkbox-with-filter",
          "checkbox_value": "025"
        },
        {
          "label_checkbox": "Checkbox option 024",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-024-checkbox-with-filter",
          "checkbox_value": "024"
        },
        {
          "label_checkbox": "Checkbox option 023",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-023-checkbox-with-filter",
          "checkbox_value": "023"
        },
        {
          "label_checkbox": "Checkbox option 022",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-022-checkbox-with-filter",
          "checkbox_value": "022"
        },
        {
          "label_checkbox": "Checkbox option 021",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-021-checkbox-with-filter",
          "checkbox_value": "021"
        },
        {
          "label_checkbox": "Checkbox option 020",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-020-checkbox-with-filter",
          "checkbox_value": "020"
        },
        {
          "label_checkbox": "Checkbox option 019",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-019-checkbox-with-filter",
          "checkbox_value": "019"
        },
        {
          "label_checkbox": "Checkbox option 018",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-018-checkbox-with-filter",
          "checkbox_value": "018"
        },
        {
          "label_checkbox": "Checkbox option 017",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-017-checkbox-with-filter",
          "checkbox_value": "017"
        },
        {
          "label_checkbox": "Checkbox option 016",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-016-checkbox-with-filter",
          "checkbox_value": "016"
        },
        {
          "label_checkbox": "Checkbox option 015",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-015-checkbox-with-filter",
          "checkbox_value": "015"
        },
        {
          "label_checkbox": "Checkbox option 014",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-014-checkbox-with-filter",
          "checkbox_value": "014"
        },
        {
          "label_checkbox": "Checkbox option 013",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-013-checkbox-with-filter",
          "checkbox_value": "013"
        },
        {
          "label_checkbox": "Checkbox option 012",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-012-checkbox-with-filter",
          "checkbox_value": "012"
        },
        {
          "label_checkbox": "Checkbox option 011",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-011-checkbox-with-filter",
          "checkbox_value": "011"
        },
        {
          "label_checkbox": "Checkbox option 010",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-010-checkbox-with-filter",
          "checkbox_value": "010"
        },
        {
          "label_checkbox": "Checkbox option 09",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-09-checkbox-with-filter",
          "checkbox_value": "09"
        },
        {
          "label_checkbox": "Checkbox option 08",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-08-checkbox-with-filter",
          "checkbox_value": "08"
        },
        {
          "label_checkbox": "Checkbox option 07",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-07-checkbox-with-filter",
          "checkbox_value": "07"
        },
        {
          "label_checkbox": "Checkbox option 06",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-06-checkbox-with-filter",
          "checkbox_value": "06"
        },
        {
          "label_checkbox": "Checkbox option 05",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-05-checkbox-with-filter",
          "checkbox_value": "05"
        },
        {
          "label_checkbox": "Checkbox option 04",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-04-checkbox-with-filter",
          "checkbox_value": "04"
        },
        {
          "label_checkbox": "Checkbox option 03",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-03-checkbox-with-filter",
          "checkbox_value": "03"
        },
        {
          "label_checkbox": "Checkbox option 02",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-02-checkbox-with-filter",
          "checkbox_value": "02"
        },
        {
          "label_checkbox": "Checkbox option 01",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-01-checkbox-with-filter",
          "checkbox_value": "01"
        },
        {
          "label_checkbox": "Checkbox option 00",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-00-checkbox-with-filter",
          "checkbox_value": "00"
        }
      ]
    }
  ],
  "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",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_8",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_7",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_6",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_5",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_4",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_3",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_2",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_1",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    },
    {
      "teaser_uid": "search_teaser_0",
      "image_ratio": "8:5",
      "image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "image_alt_text": "alt text",
      "type": "teaser--wide",
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid amet et impedit neque nobis ratione, totam unde? A asperiores, nam nihil quam repellat voluptatibus?",
      "title": "Search result",
      "link": "#",
      "link_text": "read more",
      "tag": "some tag"
    }
  ]
}
  • Content:
    .filter {
      .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;
            }
          }
        }
    
        > .modal-overlay {
          display: none;
        }
    
        form {
          // 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;
        }
      }
    
      .result-section {
    
        .selected-filters,
        .filter__result-count {
          h2 {
            font-size: .8rem;
          }
        }
    
        .result__show-filters {
          @include desktop {
            display: none;
          }
        }
    
        .selected-filters {
          margin-bottom: 1rem;
    
          .tag {
            margin: 0 .5rem .5rem 0;
          }
    
          a {
            white-space: nowrap;
          }
        }
    
        .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;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: components/41-organisms/filter/_filter.scss
  • Size: 2.2 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