Paul Smith's College Component Library

Filter 

<!-- Filter -->
<div class="filter">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-all-justify-center">
            <div class="filter_inner">
                <form class="filter_tools" action="#" method="get">
                    <div class="filter_fields">
                        <div class="filter_search">
                            <label class="filter_tool_label" for="filter_tool_search_input">Search</label>
                            <div class="filter_tool_search_wrapper">
                                <input class="filter_tool_search_input" id="filter_tool_search_input" placeholder="Search by name or department" type="search">
                                <span class="filter_tool_search_icon" aria-hidden="true">
                                    <svg class="icon icon_search">
                                        <use href="/images/icons.svg#search" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <div class="filter_selects">
                            <div class="filter_tool">
                                <label class="filter_tool_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>
                    </div>
                    <div class="filter_action">
                        <button class="filter_tool_submit" type="submit">
                            <span class="filter_tool_submit_inner">
                                <span class="filter_tool_submit_label">Submit</span>
                                <span class="filter_tool_submit_icon">
                                    <svg class="icon icon_chevron_right">
                                        <use href="/images/icons.svg#chevron_right" />
                                    </svg>
                                </span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="filter_results">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="filter_results_inner">
                <div class="filter_results_description">
                    <p class="filter_results_label">Showing Results for</p>
                    <p class="filter_results_queries">
                    </p>
                </div>
                <div class="filter_results_action">

                    <a href="page-news-listing.html" class="filter_results_reset_link">
                        <span class="filter_results_reset_link_inner">
                            <span class="filter_results_reset_link_label">Clear Results</span>
                            <span class="filter_results_reset_link_icon" aria-hidden="true">

                                <svg class="icon icon_reset">
                                    <use href="/images/icons.svg#reset" />
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Filter -->
 
{#
	{% include '@partial-filter' with {
		label: 'Directory',
		action_category: '#',
		tools: [
			{
				label: 'Category',
				options: [
					{
						label: 'All Categories',
						selected: true
					}
				]
			}
		],
		search_placeholder: 'Placeholder',
		results: '',
		category: ''
	} %}
#}


<!-- Filter -->
<div class="filter">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-all-justify-center">
			<div class="filter_inner">
				<form class="filter_tools" action="{{ action_category }}" method="get">
					<div class="filter_fields">
						{% if search_placeholder %}
							<div class="filter_search">
								<label class="filter_tool_label" for="filter_tool_search_input">Search</label>
								<div class="filter_tool_search_wrapper">
									<input class="filter_tool_search_input" id="filter_tool_search_input" placeholder="{{ search_placeholder }}" type="search">
									<span class="filter_tool_search_icon" aria-hidden="true">{{ icon('search') }}</span>
								</div>
							</div>
						{% endif %}
						{% if tools %}
							<div class="filter_selects">
								{% for tool in tools %}
									<div class="filter_tool">
										<label class="filter_tool_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>
						{% endif %}
					</div>
					<div class="filter_action">
						<button class="filter_tool_submit" type="submit">
							<span class="filter_tool_submit_inner">
								<span class="filter_tool_submit_label">Submit</span>
								<span class="filter_tool_submit_icon">{{ icon('chevron_right') }}</span>
							</span>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
{% if queries != '' %}
	<div class="filter_results">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="filter_results_inner">
					<div class="filter_results_description">
						<p class="filter_results_label">Showing Results for</p>
						<p class="filter_results_queries">
							{% for item in queries %}
								<span class="filter_results_query">{{ item }}</span>
							{% endfor %}
						</p>
					</div>
					<div class="filter_results_action">
						{% include '@partial-link' with {
							class: 'filter_results_reset',
							title: 'Clear Results',
							url: 'page-news-listing.html',
							icon: 'reset'
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
{% endif %}
<!-- END: Filter -->

No notes defined.