<!-- Filter -->
<div class="filter" data-js-focus-on-load='{"focusTarget": ".filter__results"}' id="filter-3">
<div class="fw-container">
<div class="filter__inner">
<form class="filter__form filter__form--fields-4" action="#" method="get">
<div class="filter__form-item filter__form-item--select">
<label class="filter__form-item-label" for="filter-3__select-1">Category</label>
<div class="filter__form-item-select-wrapper">
<select class="filter__form-item-select" id="filter-3__select-1" name="category">
<option value="All Categories" selected>All Categories</option>
<option value="Vestibulum purus quam">Vestibulum purus quam</option>
<option value="Maecenas">Maecenas</option>
<option value="Nullam quis ante">Nullam quis ante</option>
<option value="Donec vitae">Donec vitae</option>
<option value="Cras dapibus">Cras dapibus</option>
<option value="Maecenas tempus">Maecenas tempus</option>
<option value="Curabitur ligula sapien">Curabitur ligula sapien</option>
<option value="Vivamus elementum semper nisi">Vivamus elementum semper nisi</option>
</select>
<span class="filter__form-item-select-icon" aria-hidden="true">
<svg class="icon icon--expand">
<use href="/images/icons.svg?1.0.0#expand" />
</svg>
</span>
</div>
</div>
<div class="filter__form-item filter__form-item--select">
<label class="filter__form-item-label" for="filter-3__select-2">Type</label>
<div class="filter__form-item-select-wrapper">
<select class="filter__form-item-select" id="filter-3__select-2" name="type">
<option value="All Types" selected>All Types</option>
<option value="Aenean massa">Aenean massa</option>
<option value="Quisque rutrum">Quisque rutrum</option>
<option value="Maecenas malesuada">Maecenas malesuada</option>
<option value="Maecenas vestibulum mollis">Maecenas vestibulum mollis</option>
<option value="Phasellus">Phasellus</option>
<option value="Integer ante arcu accumsan">Integer ante arcu accumsan</option>
</select>
<span class="filter__form-item-select-icon" aria-hidden="true">
<svg class="icon icon--expand">
<use href="/images/icons.svg?1.0.0#expand" />
</svg>
</span>
</div>
</div>
<div class="filter__form-item filter__form-item--search">
<label class="filter__form-item-label" for="filter-3__search">
Search
</label>
<div class="filter__form-item-search-wrapper">
<input class="filter__form-item-search-input" id="filter-3__search" name="q" placeholder="Search by keyword" type="search">
</div>
</div>
<div class="filter__form-item filter__form-item--action">
<div class="filter__form-item-submit">
<button class="button-filled
button-filled--large
" type="submit">
<span class="button-filled__inner"> <span class="button-filled__label">Submit</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- END: Filter -->
{#
{% include '@component-filter' with {
action_category: '#',
selects: [
{
label: 'Category',
name: 'category',
options: [
{
title: 'All Categories',
value: '',
selected: true
}
]
}
],
search_name: 'q',
search_placeholder: 'Placeholder',
results: '',
category: ''
} %}
#}
{% set id = uniqid('filter') %}
{% set field_count = selects|length + 2 %}
<!-- Filter -->
<div
class="filter"
data-js-focus-on-load='{"focusTarget": ".filter__results"}'
id="{{ id }}"
>
<div class="fw-container">
<div class="filter__inner">
<form
class="filter__form filter__form--fields-{{ field_count }}"
action="{{ action_category|default('') }}"
method="get"
>
{% for select in selects %}
<div class="filter__form-item filter__form-item--select">
<label
class="filter__form-item-label"
for="{{ id ~ '__select-' ~ loop.index }}"
>
{{- select.label -}}
</label>
<div class="filter__form-item-select-wrapper">
<select
class="filter__form-item-select"
id="{{ id ~ '__select-' ~ loop.index }}"
name="{{ select.name|default(select.label|lower|replace({' ': '_'})) }}"
>
{% for option in select.options %}
<option
value="{{ option.value|default(option.title) }}"
{% if option.selected %}selected{% endif %}
>
{{- option.title -}}
</option>
{% endfor %}
</select>
<span class="filter__form-item-select-icon" aria-hidden="true">
{{ icon('expand') }}
</span>
</div>
</div>
{% endfor %}
<div class="filter__form-item filter__form-item--search">
<label
class="filter__form-item-label"
for="{{ id ~ '__search' }}"
>
Search
</label>
<div class="filter__form-item-search-wrapper">
<input
class="filter__form-item-search-input"
id="{{ id ~ '__search' }}"
name="{{ search_name|default('q') }}"
placeholder="{{ search_placeholder }}"
type="search"
>
</div>
</div>
<div class="filter__form-item filter__form-item--action">
<div class="filter__form-item-submit">
{% include '@partial-button' with {
classes: {
base: 'button-filled',
modifiers: [
'large'
]
},
attributes: {
'type': 'submit'
},
title: 'Submit'
} only %}
</div>
</div>
</form>
{% if results != '' %}
<div class="filter__results">
<p class="filter__results-description">
<span class="filter__results-label">
{{ results }} Results found for:
</span>
<span class="filter__results-category">
{{- category -}}
</span>
</p>
<div class="filter__results-action">
{% include '@partial-link' with {
classes: {
base: 'button-bordered'
},
title: 'Reset',
url: '#',
icon: 'reset',
attributes: {
'aria-label': 'Reset Filters'
}
} only %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
<!-- END: Filter -->
No notes defined.