<div class="dropdown-list filters__dropdown" id="test-id">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--checkbox
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label" aria-controls="color" aria-expanded="true">
<h3 class="filter__heading" >
Color
</h3>
<svg
class="icon dropdown-list__icon"
role="presentation"
focusable="false"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="color" class="dropdown-list__content filter__content " aria-hidden="false">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper
feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg
class="icon "
role="presentation"
focusable="false"
>
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<ul class="list filter__list">
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option--active">
<div class="filter__color-sample" style="background: #000"></div>
<span class="filter__color-label">
Black
</span>
</a>
</li>
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: red"></div>
<span class="filter__color-label">
Red
</span>
</a>
</li>
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #5cb85c"></div>
<span class="filter__color-label">
Green
</span>
</a>
</li>
<li class="filter__color-item">
<a href='#' class="filter__color-option filter__color-option">
<div class="filter__color-sample" style="background: #0275d8"></div>
<span class="filter__color-label">
Blue
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--checkbox
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label filter__label" aria-controls="swatch" aria-expanded="true">
<h3 class="filter__heading" >
Swatch
</h3>
<svg
class="icon dropdown-list__icon"
role="presentation"
focusable="false"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="swatch" class="dropdown-list__content filter__content " aria-hidden="false">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper
feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg
class="icon "
role="presentation"
focusable="false"
>
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<ul class="list filter__list">
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
XS
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option filter__swatch-option--active">
S
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
M
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
L
</a>
</li>
<li class="filter__swatch-item">
<a href="#" class="filter__swatch-option ">
XL
</a>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--checkbox
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label" aria-controls="checkbox" aria-expanded="false">
<h3 class="filter__heading" >
Filters
</h3>
<svg
class="icon dropdown-list__icon"
role="presentation"
focusable="false"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="checkbox" class="dropdown-list__content filter__content " aria-hidden="true">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper
feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg
class="icon "
role="presentation"
focusable="false"
>
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<ul class="list">
<li>
<a href="#" class="checkbox checkbox--link ">
<svg
class="
checkbox__icon
checkbox__icon--checked
"
role="presentation"
>
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg
class="
checkbox__icon
checkbox__icon--unchecked
"
role="presentation"
>
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="checkbox__label" >
Value 1
</span>
</a>
</li>
<li>
<a href="#" class="checkbox checkbox--link checkbox--link-checked">
<svg
class="
checkbox__icon
checkbox__icon--checked
"
role="presentation"
>
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg
class="
checkbox__icon
checkbox__icon--unchecked
"
role="presentation"
>
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="checkbox__label" >
Value 2
</span>
</a>
</li>
<li>
<a href="#" class="checkbox checkbox--link ">
<svg
class="
checkbox__icon
checkbox__icon--checked
"
role="presentation"
>
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg
class="
checkbox__icon
checkbox__icon--unchecked
"
role="presentation"
>
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="checkbox__label" >
Value 3
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
filter
filter--range
">
<div class="dropdown-list__label-wrapper filter__label-wrapper">
<button type="button" class="dropdown-list__label" aria-controls="range" aria-expanded="false">
<h3 class="filter__heading" >
Range
</h3>
<svg
class="icon dropdown-list__icon"
role="presentation"
focusable="false"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
<div id="range" class="dropdown-list__content filter__content " aria-hidden="true">
<div class="more-info">
<button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">
<span class="button__text ">
More information
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Show tooltip</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
</button>
<div class="more-info__content-wrapper" aria-hidden="true">
<div class="more-info__content">
<h3 class="more-info__heading">
Example title
</h3>
<div class="more-info__data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper
feugiat. Curabitur egestas neque in leo finibus ultricies.
</div>
<button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
<svg
class="icon "
role="presentation"
focusable="false"
>
<title>Close more information</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="range-filter ">
<div class="range-filter__slider " data-min="0" data-max="1000" data-show-float="0"></div>
<div class="range-filter__inputs-wrapper ">
<div class="input range-filter__input range-filter__input--lower">
<label class="
label
input__label
range-filter__label
" for="range-filter-min">
Minimum value
</label>
<input class="input__field range-filter__field range-filter__field--lower" id="range-filter-min" name="range-filter-min" type="" placeholder="">
</div>
<span class="range-filter__suffix ">
$
</span>
<span class="range-filter__dash">-</span>
<div class="input range-filter__input range-filter__input--upper">
<label class="
label
input__label
range-filter__label
" for="range-filter-max">
Maximum value
</label>
<input class="input__field range-filter__field range-filter__field--upper" id="range-filter-max" name="range-filter-max" type="" placeholder="">
</div>
<span class="range-filter__suffix ">
$
</span>
</div>
</div>
<button class="button range-filter__button button--fluid margin-vc-sm" type="button" data-min="0" data-max="1000" data-attribute="price" href="#" data-filter-url="#">
Apply
</button>
<script src="/components/raw/range/range.js"></script>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-id'));
</script>
<div
class="dropdown-list filters__dropdown"
id="{{ dropdownListId }}"
>
<ul class="dropdown-list__list">
{{ render '@filter--color' }}
{{ render '@filter--swatch' }}
{{ render '@filter--checkbox' }}
{{ render '@filter--range' }}
</ul>
</div>
{{#if dropdownListId }}
<script type="text/javascript">
new DropdownList(document.getElementById('{{ dropdownListId }}'));
</script>
{{/if}}
{
"dropdownListId": "test-id"
}
There are no notes for this item.