VCUarts Component Library

Filter: Default 

<!-- Filter -->
<div class="filter">
    <div class="filter_header">
        <h2 class="filter_title">Filter By</h2>
    </div>
    <div class="filter_body">
        <form class="filter_tools" action="" method="get">
            <div class="filter_tools_group">
                <div class="filter_tool">
                    <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_chevron_down">
                                <use href="/images/icons.svg#chevron_down" />
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
            <div class="filter_action">
                <button class="filter_tools_submit" type="submit">
                    <span class="filter_tools_submit_inner">
                        <span class="filter_tools_submit_label">Submit</span><span class="icon_nowrap filter_tools_submit_icon" aria-hidden="true">&#xfeff;
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </button>
            </div>
        </form>
    </div>
</div>
<!-- END: Filter -->
 
{#
	{% include '@partial-filter' with {
		title: 'Title',
		action: '#',
		tools: [
			{
				label: 'Category',
				options: [
					{
						label: 'All Categories',
						label: true
					}
				]
			}
		]
	} %}
#}
<!-- Filter -->
<div class="filter">
	<div class="filter_header">
		<h2 class="filter_title">{{ title }}</h2>
	</div>
	<div class="filter_body">
		<form class="filter_tools" action="{{ action_category }}" method="get">
			<div class="filter_tools_group">
				{% 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>
			<div class="filter_action">
				<button class="filter_tools_submit" type="submit">
					<span class="filter_tools_submit_inner">
						<span class="filter_tools_submit_label">Submit</span><span class="icon_nowrap filter_tools_submit_icon" aria-hidden="true">&#xfeff;{{ icon('arrow_right') }}</span>
					</span>
				</button>
			</div>
		</form>
	</div>
</div>
<!-- END: Filter -->

No notes defined.