VCUarts Component Library

Filter: Custom 

<!-- Filter -->
<div class="filter">
    <div class="filter_header">
        <h2 class="filter_title">Filter By</h2>
    </div>
    <div class="filter_body">
        <ul class="js-menu-item-group filter_menu_list">
            <li class="js-menu-item js-menu-item-1 filter_menu_item">
                <button class="js-swap js-menu-trigger filter_menu_button" data-swap-target=".js-menu-item-1">
                    <span class="filter_menu_button_label">Category</span>
                    <span class="filter_menu_button_icon" aria-hidden="true">
                        <svg class="icon icon_chevron_down">
                            <use href="/images/icons.svg#chevron_down" />
                        </svg>
                    </span>
                </button>
                <div class="js-menu-panel filter_menu_panel">
                    <ul class="filter_menu_panel_items">
                        <li class="js-menu-panel-item filter_menu_panel_item">
                            <a class="js-menu-panel-link filter_menu_panel_link" href="">All Categories</a>
                        </li>
                        <li class="js-menu-panel-item filter_menu_panel_item">
                            <a class="js-menu-panel-link filter_menu_panel_link" href="">Category One</a>
                        </li>
                        <li class="js-menu-panel-item filter_menu_panel_item">
                            <a class="js-menu-panel-link filter_menu_panel_link" href="">Another Category</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- END: Filter -->
 
{#
	{% include '@partial-filter--custom' with {
		title: 'Title',
		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">
		<ul class="js-menu-item-group filter_menu_list">
			{% for tool in tools %}
				<li class="js-menu-item js-menu-item-{{ loop.index }} filter_menu_item">
					<button class="js-swap js-menu-trigger filter_menu_button" data-swap-target=".js-menu-item-{{ loop.index }}">
						<span class="filter_menu_button_label">{{ tool.label }}</span>
						<span class="filter_menu_button_icon" aria-hidden="true">{{ icon("chevron_down") }}</span>
					</button>
					<div class="js-menu-panel filter_menu_panel">
						<ul class="filter_menu_panel_items">
							{% for option in tool.options %}
								<li class="js-menu-panel-item filter_menu_panel_item">
									<a class="js-menu-panel-link filter_menu_panel_link" href="{{ option.url }}">{{ option.label }}</a>
								</li>
							{% endfor %}
						</ul>
					</div>
				</li>
			{% endfor %}
		</ul>
	</div>
</div>
<!-- END: Filter -->

No notes defined.