Office of Diversity and Inclusion Component Library

Filter 

<!-- Filter -->
<div class="filter">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="filter_inner">
                <div class="filter_grid">
                    <div class="filter_grid_item is_title">
                        <h2 class="filter_grid_title">
                            Filter Bar
                        </h2>
                    </div>

                    <div class="filter_grid_item is_tools">
                        <form class="filter_tools fs-row" action="#" method="get">
                            <div class="filter_tool fs-cell fs-lg-6 fs-xl-4">
                                <label class="filter_label" for="filter_search_input">Search</label>
                                <div class="filter_search_form">
                                    <input class="filter_search_input" id="filter_search_input" type="search" placeholder="Search by name or department">
                                    <span class="filter_search_submit">
                                        <span class="filter_search_submit_label">Submit</span>
                                        <span class="filter_search_submit_icon">
                                            <svg class="icon icon_search">
                                                <use href="/images/icons.svg#search" />
                                            </svg>
                                        </span>
                                    </span>
                                </div>
                            </div>

                            <div class="filter_tool fs-cell fs-lg-6 fs-xl-4">
                                <label class="filter_label" for="filter_tool_label_1">Category</label>
                                <div class="filter_tool_select_wrapper">
                                    <select class="filter_tool_select" id="filter_tool_label_1">
                                        <option value="All Categories">All Categories</option>
                                        <option value="Category One" selected>Category One</option>
                                        <option value="Another Category">Another Category</option>
                                    </select>
                                    <span class="filter_tool_select_icon">
                                        <svg class="icon icon_expand">
                                            <use href="/images/icons.svg#expand" />
                                        </svg>
                                    </span>
                                </div>
                            </div>

                            <div class="filter_tool fs-cell fs-lg-12 fs-xl-4">
                                <button class="filter_tools_submit" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- END: Filter -->
 
{#
	{% include '@partial-filter' with {
		label: 'Directory',
		active: 'search',
		action_category: '#',
		action_search: '#',
		tools: [
			{
				label: 'Category',
				options: [
					{
						label: 'All Categories',
						label: true
					}
				]
			}
		],
		search_placeholder: 'Placeholder',
		results: '',
		category: ''
	} %}
#}
<!-- Filter -->
<div class="filter">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="filter_inner">
				<div class="filter_grid">
					<div class="filter_grid_item is_title">
						<h2 class="filter_grid_title">
							{{ title }}
						</h2>
					</div>

					<div class="filter_grid_item is_tools">
						<form class="filter_tools fs-row" action="{{ action_category }}" method="get">
							<div class="filter_tool fs-cell fs-lg-6 fs-xl-4">
								<label class="filter_label" for="filter_search_input">Search</label>
								<div class="filter_search_form">
									<input class="filter_search_input" id="filter_search_input" type="search" placeholder="{{ search_placeholder }}">
									<span class="filter_search_submit">
										<span class="filter_search_submit_label">Submit</span>
										<span class="filter_search_submit_icon">{{ icon('search') }}</span>
									</span>
								</div>
							</div>

							{% for tool in tools %}
								<div class="filter_tool fs-cell fs-lg-6 fs-xl-4">
									<label class="filter_label" for="filter_tool_label_{{ loop.index }}">{{ tool.label }}</label>
									<div class="filter_tool_select_wrapper">
										<select class="filter_tool_select" id="filter_tool_label_{{ loop.index }}">
											{% for option in tool.options %}
												<option value="{{ option.label }}" {% if option.selected == true %} selected {% endif %}>{{ option.label }}</option>
											{% endfor %}
										</select>
										<span class="filter_tool_select_icon">{{ icon('expand') }}</span>
									</div>
								</div>
							{% endfor %}

							<div class="filter_tool fs-cell fs-lg-12 fs-xl-4">
								<button class="filter_tools_submit" type="submit">Submit</button>
							</div>
						</form>
					</div>
				</div>

				{% 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 {
								class: 'filter_results_reset',
								title: 'Reset',
								url: 'page-news-listing.html',
								icon: 'reset'
							} %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Filter -->

No notes defined.