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?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__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?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__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'
								},
								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>
</div>
<!-- END: Filter -->

No notes defined.