Washington National Cathedral Component Library

Big Filter 

<!-- Filter -->
<div class="js-big-filter big_filter">
    <div class="big_filter_header">

        <button class="js-big-filter-toggle js-swap big_filter_toggle " data-swap-target=".js-big-filter">
            <span class="big_filter_toggle_inner_default big_filter_toggle_inner">
                <span class="big_filter_toggle_label_default big_filter_toggle_label">Filter Events</span>
                <span class="big_filter_toggle_icon_default big_filter_toggle_icon" aria-hidden="true">

                    <svg class="icon icon_more">
                        <use href="/images/icons.svg#more" />
                    </svg>

                </span>
            </span>
            <span class="big_filter_toggle_inner_active big_filter_toggle_inner">
                <span class="big_filter_toggle_label_active big_filter_toggle_label">Close</span>
                <span class="big_filter_toggle_icon_active big_filter_toggle_icon" aria-hidden="true">

                    <svg class="icon icon_close">
                        <use href="/images/icons.svg#close" />
                    </svg>

                </span>
            </span>
        </button>
    </div>
    <div class="js-big-filter-body big_filter_body">
        <form class="js-big-filter-body-inner big_filter_body_inner" action="#" method="get">
            <div class="big_filter_search">
                <label class="big_filter_label" for="big_filter_search_input">Search</label>
                <div class="big_filter_search_form">
                    <input class="big_filter_search_input" id="big_filter_search_input" type="search" placeholder="Search Calendar">
                    <span class="big_filter_search_icon">
                        <svg class="icon icon_search">
                            <use href="/images/icons.svg#search" />
                        </svg>
                    </span>
                </div>
            </div>
            <div class="big_filter_tools">
                <div class="big_filter_tool">
                    <label class="big_filter_label" for="big_filter_tool_label_1">Select Date</label>
                    <input class="big_filter_tool_date" type="date" id="date" name="date" placeholder="Search a Date" />
                </div>
            </div>
            <fieldset class="big_filter_fieldset">
                <legend class="big_filter_legend">Event Type</legend>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="tours" name="">
                    <label class="big_filter_option_input_label" for="tours">Sightseeing & Tours</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="worship" name="">
                    <label class="big_filter_option_input_label" for="worship">Worship & Spirituality</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="music" name="">
                    <label class="big_filter_option_input_label" for="music">Music & Concerts</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="workshops" name="">
                    <label class="big_filter_option_input_label" for="workshops">Workshops</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
            </fieldset>
            <fieldset class="big_filter_fieldset">
                <legend class="big_filter_legend">Details</legend>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="public" name="">
                    <label class="big_filter_option_input_label" for="public">Public</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="congregation" name="">
                    <label class="big_filter_option_input_label" for="congregation">Congregation</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="community" name="">
                    <label class="big_filter_option_input_label" for="community">Community Programs</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
                <div class="big_filter_option">
                    <input class="big_filter_option_input_field" type="checkbox" id="kids" name="">
                    <label class="big_filter_option_input_label" for="kids">Kids</label>
                    <span class="big_filter_option_input_indicator"></span>
                </div>
            </fieldset>
            <div class="big_filter_tool">
                <button class="big_filter_tools_submit" type="submit">
                    <span class="big_filter_tools_submit_inner">
                        <span class="big_filter_tools_submit_label">Submit Filters</span>
                    </span>
                </button>
            </div>
        </form>
    </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="js-big-filter big_filter">
	<div class="big_filter_header">
		{% render '@partial-button-toggle' with {
			class: 'big_filter',
			title: 'Filter Events',
			icon: 'more',
			active_title: 'Close',
			active_icon: 'close',
			swap_target: '.js-big-filter',
			js: true
		} %}
	</div>
	<div class="js-big-filter-body big_filter_body">
		<form class="js-big-filter-body-inner big_filter_body_inner" action="{{ action_category }}" method="get">
			{% if search %}
				<div class="big_filter_search">
					<label class="big_filter_label" for="big_filter_search_input">Search</label>
					<div class="big_filter_search_form">
						<input class="big_filter_search_input" id="big_filter_search_input" type="search" placeholder="{{ search_placeholder }}">
						<span class="big_filter_search_icon">{{ icon('search') }}</span>
					</div>
				</div>
			{% endif %}
			<div class="big_filter_tools">
				{% for tool in tools %}
					<div class="big_filter_tool">
						<label class="big_filter_label" for="big_filter_tool_label_{{ loop.index }}">{{ tool.label }}</label>
						<input class="big_filter_tool_date" type="date" id="date" name="date" placeholder="Search a Date" />
					</div>
				{% endfor %}
			</div>
			{% for fieldset in fieldsets %}
				<fieldset class="big_filter_fieldset">
					<legend class="big_filter_legend">{{ fieldset.legend }}</legend>
					{% for option in fieldset.options %}
						<div class="big_filter_option">
							<input class="big_filter_option_input_field" type="checkbox" id="{{ option.id }}" name="{{ option.name }}">
							<label class="big_filter_option_input_label" for="{{ option.id }}">{{ option.label }}</label>
							<span class="big_filter_option_input_indicator"></span>
						</div>
					{% endfor %}
				</fieldset>
			{% endfor %}
			<div class="big_filter_tool">
				<button class="big_filter_tools_submit" type="submit">
					<span class="big_filter_tools_submit_inner">
						<span class="big_filter_tools_submit_label">Submit Filters</span>
					</span>
				</button>
			</div>
		</form>
	</div>
</div>
<!-- END: Filter -->

No notes defined.