Methodist University Component Library

Filter 

<!-- Filter -->
<div class="filter">
    <div class="fs-row">
        <div class="fs-cell">
            <form class="filter_inner" action="#" method="get">
                <div class="filter_search">
                    <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">
                        <div class="filter_search_submit">
                            <span class="filter_search_submit_icon">
                                <svg class="icon icon_search">
                                    <use href="/images/icons.svg#search" />
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="filter_tools">
                    <div class="filter_tool">
                        <label class="filter_label" for="filter_tool_label_1">Degree Type</label>
                        <div class="filter_tool_select_wrapper">
                            <select class="filter_tool_select" id="filter_tool_label_1">
                                <option value="All Degree Types">All Degree Types</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_chevron_down">
                                    <use href="/images/icons.svg#chevron_down" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="filter_tool">
                        <label class="filter_label" for="filter_tool_label_2">Mode of Study</label>
                        <div class="filter_tool_select_wrapper">
                            <select class="filter_tool_select" id="filter_tool_label_2">
                                <option value="All Modes of Study">All Modes of Study</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_chevron_down">
                                    <use href="/images/icons.svg#chevron_down" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="filter_tool">
                        <button class="filter_tools_submit" type="submit">
                            <span class="filter_tools_submit_label">Submit</span>
                            <span class="filter_tools_submit_icon">
                                <svg class="icon icon_chevron_right">
                                    <use href="/images/icons.svg#chevron_right" />
                                </svg>
                            </span>
                        </button>
                    </div>
                </div>
            </form>
            <div class="filter_results">
                <p class="filter_results_description">
                    <span class="filter_results_label">5 Results found for:</span>
                    <span class="filter_results_category">Category</span>
                </p>

                <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">Reset</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>
<!-- 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">
			<form class="filter_inner" action="{{ action_search }}" method="get">
				<div class="filter_search">
					<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 }}">
						<div class="filter_search_submit">
							<span class="filter_search_submit_icon">{{ icon('search') }}</span>
						</div>
					</div>
				</div>
				<div class="filter_tools">
					{% for tool in tools %}
						<div class="filter_tool">
							<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('chevron_down') }}</span>
							</div>
						</div>
					{% endfor %}
					<div class="filter_tool">
						<button class="filter_tools_submit" type="submit">
							<span class="filter_tools_submit_label">Submit</span>
							<span class="filter_tools_submit_icon">{{ icon('chevron_right') }}</span>
						</button>
					</div>
				</div>
			</form>
			<div class="filter_results">
				<p class="filter_results_description">
					<span class="filter_results_label">5 Results found for:</span>
					<span class="filter_results_category">Category</span>
				</p>
				{% include '@partial-link' with {
					class: 'filter_results_reset',
					title: 'Reset',
					url: 'page-news-listing.html',
					icon: 'reset'
				} %}
			</div>
		</div>
	</div>
</div>
<!-- END: Filter -->

No notes defined.