filters

Information

Folder
src/components/patterns/search/filters

Files

Schema
Mocks
Template
// src/components/patterns/search/filters/filters.html.twig

<div class="Filters{% if class %} {{ class }}{% endif %}{% if extendable %} js-Filters{% endif %}">
  {% if extendable %}
    <template class="js-Filters-toggleTemplate">
      <button class="Filters-toggle js-Filters-toggle u-typo-copy-bold" aria-expanded="false" aria-controls="Filters-extendableArea" type="button">
        {% include "@elements/icon/icon.html.twig" with {
          name: "filter",
          class: "Filters-icon"
        } only %}
        <span class="Filters-toggleLabel Filters-toggleLabel--open">Filter einblenden</span>
        <span class="Filters-toggleLabel Filters-toggleLabel--close">Filter ausblenden</span>
      </button>
    </template>
    <div class="Filters-extendableArea js-Filters-extendableArea" id="Filters-extendableArea">
  {% endif %}
  <div class="u-grid Filters-row Filters-row--general">
    {% for select in selects %}
      {{ select|raw }}
    {% endfor %}
  </div>
  {% if exact_match_checkbox %}
    <div class="Filters-row Filters-row--exactMatch">
      {{ exact_match_checkbox|raw }}
    </div>
  {% endif %}
  {% if kids_checkbox %}
    <div class="Filters-row Filters-row--kids">
      {{ kids_checkbox|raw }}
    </div>
  {% endif %}
  {% if submit_button %}
    <div class="Filters-row Filters-row--button">
      {{ submit_button|raw }}
    </div>
  {% endif %}
  {% if extendable %}
    </div>
  {% endif %}
</div>

Variants

default
Open

default mock data

Raw
Resolved
Education materials
Open

Education materials mock data

Raw
Resolved