Framework Component Library

Filter: Three Fields 

<!-- Filter -->
<div class="filter" id="filter_3">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="filter_inner">
                <form class="filter_form" action="#" method="get">
                    <div class="filter_form_item filter_form_item_select">
                        <label class="filter_form_item_label" for="filter_form_item_select_1">
                            Category
                        </label>
                        <div class="filter_form_item_select_wrapper">
                            <select class="filter_form_item_select" id="filter_form_item_select_1">
                                <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#expand" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="filter_form_item filter_form_item_select">
                        <label class="filter_form_item_label" for="filter_form_item_select_2">
                            Type
                        </label>
                        <div class="filter_form_item_select_wrapper">
                            <select class="filter_form_item_select" id="filter_form_item_select_2">
                                <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#expand" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="filter_form_item filter_form_item_search">
                        <label class="filter_form_item_label" for="filter_form_item_search_input">
                            Search
                        </label>
                        <div class="filter_form_item_search_wrapper">
                            <input class="filter_form_item_search_input" id="filter_form_item_search_input" 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>
</div>
<!-- END: Filter -->
 
{#
	{% include '@component-filter' with {
		action_category: '#',
		selects: [
			{
				label: 'Category',
				options: [
					{
						title: 'All Categories',
						selected: true
					}
				]
			}
		],
		search_placeholder: 'Placeholder',
		results: '',
		category: ''
	} %}
#}

{% set id = uniqid('filter') %}

<!-- Filter -->
<div class="filter" id="{{ id }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="filter_inner">
				<form
					class="filter_form"
					action="{{ action_category }}"
					method="get"
				>
					{% for select in selects %}
						<div class="filter_form_item filter_form_item_select">
							<label
								class="filter_form_item_label"
								for="filter_form_item_select_{{ loop.index }}"
							>
								{{ select.label }}
							</label>
							<div class="filter_form_item_select_wrapper">
								<select
									class="filter_form_item_select"
									id="filter_form_item_select_{{ loop.index }}"
								>
									{% for option in select.options %}
										<option
											value="{{ 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="filter_form_item_search_input"
						>
							Search
						</label>
						<div class="filter_form_item_search_wrapper">
							<input
								class="filter_form_item_search_input"
								id="filter_form_item_search_input"
								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'
								},
								id: null,
								title: 'Submit'
							} %}
						</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'
								},
								id: null,
								title: 'Reset',
								url: '#',
								icon: 'reset',
								attributes: {
									'aria-label': 'Reset Filters'
								}
							} %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Filter -->

No notes defined.