Zero Deaths Maryland Component Library

Filter 

<div id="filter_results"></div>

<div class="filter">
    <div class="fs-row">
        <div class="fs-cell fs-lg-11 fs-lg-push-1">
            <div class="filter_inner">
                <div class="filter_panels">
                    <div class="filter_tabpanel filter_tabpanel_tools">
                        <form class="filter_tools small" action="#filter_results" method="get">
                            <div class="filter_tool">
                                <label class="filter_label" for="filter_tool_label_1">Filter By Category</label>
                                <div class="filter_tool_select_wrapper">
                                    <select class="filter_tool_select" id="filter_tool_label_1" multiple>
                                        <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_divider"></div>
                            <div class="filter_tool">
                                <button class="filter_tools_submit" type="submit">Apply Filter
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </button>
                            </div>
                        </form>
                        <form class="filter_tools large" action="#filter_results" method="get">
                            <div class="filter_tool">
                                <div class="js-menu-item js-menu-item-1 menu_item">
                                    <button class="js-swap js-menu-trigger menu_trigger" data-swap-target=".js-menu-item-1">
                                        <span class="menu_trigger_label">Filter By Category</span>
                                        <span class="menu_trigger_icon" aria-hidden="true">
                                            <svg class="icon icon_arrow-down">
                                                <use href="/images/icons.svg#arrow-down" />
                                            </svg>
                                        </span>
                                        <span class="js-menu-trigger-count menu_trigger_count"></span>
                                    </button>
                                    <div class="js-menu-panel menu_panel">
                                        <ul class="menu_panel_list">
                                            <li class="js-menu-panel-item menu_panel_item">
                                                <label class="menu_panel_label">
                                                    <input class="js-menu-panel-input menu_panel_input" type="checkbox">
                                                    <span class="menu_panel_indicator"></span>
                                                    <span class="menu_panel_text">All Categories</span>
                                                </label>
                                            </li>
                                            <li class="js-menu-panel-item menu_panel_item">
                                                <label class="menu_panel_label">
                                                    <input class="js-menu-panel-input menu_panel_input" type="checkbox">
                                                    <span class="menu_panel_indicator"></span>
                                                    <span class="menu_panel_text">Category One</span>
                                                </label>
                                            </li>
                                            <li class="js-menu-panel-item menu_panel_item">
                                                <label class="menu_panel_label">
                                                    <input class="js-menu-panel-input menu_panel_input" type="checkbox">
                                                    <span class="menu_panel_indicator"></span>
                                                    <span class="menu_panel_text">Another Category</span>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="filter_tool_divider"></div>
                            <div class="filter_tool_button">
                                <button class="filter_tools_submit" type="submit">Apply Filter
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="filter_results_block">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-lg-justify-center">
            <div class="filter_results">
                <p class="filter_results_description">Showing <span class="filter_results_label"></span> results for <span class="filter_results_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">
                            <span class="filter_results_reset_link_icon_inner">
                                <span class="filter_results_reset_link_icon_space">&#xfeff;</span>
                                <svg class="icon icon_reset">
                                    <use xlink:href="/images/icons.svg#reset"></use>

                                </svg>
                            </span>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div id="filter_results"></div>

<div class="filter">
	<div class="fs-row">
		<div class="fs-cell fs-lg-11 fs-lg-push-1">
			<div class="filter_inner">
				<div class="filter_panels">
					<div class="filter_tabpanel filter_tabpanel_tools">
						<form class="filter_tools small" action="{{ action_category }}#filter_results" method="get">
							{% 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 }}" multiple>
											{% 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_divider"></div>
							<div class="filter_tool">
								<button class="filter_tools_submit" type="submit">Apply Filter {{ icon("arrow_right") }}</button>
							</div>
						</form>
						<form class="filter_tools large" action="{{ action_category }}#filter_results" method="get">
							{% for tool in tools %}
								<div class="filter_tool">
									<div class="js-menu-item js-menu-item-{{ loop.index }} menu_item">
										<button class="js-swap js-menu-trigger menu_trigger" data-swap-target=".js-menu-item-{{ loop.index }}">
											<span class="menu_trigger_label">{{ tool.label }}</span>
											<span class="menu_trigger_icon" aria-hidden="true">{{ icon("arrow-down") }}</span>
											<span class="js-menu-trigger-count menu_trigger_count"></span>
										</button>
										<div class="js-menu-panel menu_panel">
											<ul class="menu_panel_list">
												{% for option in tool.options %}
													<li class="js-menu-panel-item menu_panel_item">
														<label class="menu_panel_label">
															<input class="js-menu-panel-input menu_panel_input" type="checkbox">
															<span class="menu_panel_indicator"></span>
															<span class="menu_panel_text">{{ option.label }}</span>
														</label>
													</li>
												{% endfor %}
											</ul>
										</div>
									</div>
								</div>
							{% endfor %}
							<div class="filter_tool_divider"></div>
							<div class="filter_tool_button">
								<button class="filter_tools_submit" type="submit">Apply Filter {{ icon("arrow_right") }}</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="filter_results_block">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-lg-justify-center">
			<div class="filter_results">
				{% if results != "" %}
					<p class="filter_results_description">Showing <span class="filter_results_label">{{ results }}</span> results for <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"
					} %}
				{% else %}
					<p class="filter_results_description">
						Showing <span class="filter_results_label">All</span> Digital Resources
					</p>
				{% endif %}
			</div>
		</div>
	</div>
</div>

No notes defined.