<div class="filter_inline">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="filter_inline_inner">
                <form action="#" class="filter_inline_form">
                    <div class="filter_inline_form_rows">
                        <div class="filter_inline_form_row">
                            <label for="s" class="filter_inline_form_label">
                                Search
                            </label>

                            <div class="filter_inline_form_input_wrap">
                                <input class="filter_inline_form_input_search" type="text" name="s" id="s" placeholder="Search by name">
                            </div>
                        </div>

                        <div class="filter_inline_form_row">
                            <label for="s" class="filter_inline_form_label">
                                Filter by Category
                            </label>

                            <div class="filter_inline_form_input_wrap">
                                <div class="filter_inline_form_pills">
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="All" checked="checked">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    All
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Affordable & Sustainable Energy">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Affordable & Sustainable Energy
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Clean Water & Sanitation">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Clean Water & Sanitation
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Climate Solutions">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Climate Solutions
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Healthy Communities, Workplaces, & Lifestyles">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Healthy Communities, Workplaces, & Lifestyles
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Healthy Air">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Healthy Air
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Innovation & Economic Progress">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Innovation & Economic Progress
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Sustainable Ecosystems & Resource Use">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Sustainable Ecosystems & Resource Use
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="filter_inline_form_pills_item">
                                        <label class="filter_inline_pill">
                                            <input class="filter_inline_pill_input" type="checkbox" value="Sustainable Food Production & Diets">

                                            <span class="filter_inline_pill_label">
                                                <span class="filter_inline_pill_label_inner">
                                                    Sustainable Food Production & Diets
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="filter_inline_form_row">
                            <button type="submit" class="button theme_dark">
                                <span class="button_inner">
                                    Submit
                                </span>
                            </button>
                        </div>
                    </div>
                </form>

                <div class="filter_results">
                    <p class="filter_results_description">
                        <span class="filter_results_label">10 Results found for:</span>
                        <span class="filter_results_category">Some Category</span>
                    </p>

                    <a href="#" class="button theme_light_border ">
                        <span class="button_inner">
                            <span class="button_label">Clear Filters</span>
                            <span class="button_icon" aria-hidden="true"><span class="button_icon_inner">

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

                                </span>
                            </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="filter_inline">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="filter_inline_inner">
				<form action="#" class="filter_inline_form">
					<div class="filter_inline_form_rows">
						<div class="filter_inline_form_row">
							<label for="s" class="filter_inline_form_label">
								{{ search.label }}
							</label>

							<div class="filter_inline_form_input_wrap">
								<input class="filter_inline_form_input_search" type="text" name="s" id="s" placeholder="{{ search.placeholder }}">
							</div>
						</div>

						<div class="filter_inline_form_row">
							<label for="s" class="filter_inline_form_label">
								{{ categories.label }}
							</label>

							<div class="filter_inline_form_input_wrap">
								<div class="filter_inline_form_pills">
									{% for option in categories.options %}
										<div class="filter_inline_form_pills_item">
											<label class="filter_inline_pill">
												<input class="filter_inline_pill_input" type="checkbox" value="{{ option.label }}" {% if option.selected %}checked="checked"{% endif %}
												>

												<span class="filter_inline_pill_label">
													<span class="filter_inline_pill_label_inner">
														{{ option.label }}
													</span>
												</span>
											</label>
										</div>
									{% endfor %}
								</div>
							</div>
						</div>

						<div class="filter_inline_form_row">
							<button type="submit" class="button theme_dark">
								<span class="button_inner">
									Submit
								</span>
							</button>
						</div>
					</div>
				</form>

				{% 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>

						{% include "@partial-button" with {
							theme: "light_border",
							title: "Clear Filters",
							url: "#",
							icon: "reset"
						} %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>

No notes defined.