Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
Filters
Usage
<button class="rc-md-down rc-btn rc-btn--icon-label rc-icon rc-filter--xs rc-iconography" data-filter-trigger="filter-example">Filter Products</button>
<aside class="rc-filters" data-filter-target="filter-example">
<form class="rc-filters__form" action="" name="example-filter">
<header class="rc-filters__header">
<button class="rc-md-down rc-stick-left rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography" data-filter-trigger="filter-example" type="button"></button>
<h1 class="rc-filters__heading rc-padding-top--sm rc-padding-bottom--xs rc-header-with-icon rc-header-with-icon--alpha">
<span class="md-up rc-icon rc-filter--xs rc-iconography"></span>
Filter Products
</h1>
</header>
<main class="rc-filters__main">
<div class="rc-list__accordion-item">
<fieldset class="rc-fieldset" data-toggle-group="" data-toggle-effect="rc-expand--vertical">
<legend class="rc-list__header" id="age-header" data-toggle="age">
<strong>Age 1</strong>
<a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
</legend>
<div id="age" aria-labelledby="age-header" class="rc-list__content">
<div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="32" data-js-start="0" data-js-step="1" data-js-labels="[{"value":0,"label":"All Ages"},{"value":1,"label":"1 Week"},{"value":2,"label":"2 Weeks"},{"value":3,"label":"3 Weeks"},{"value":4,"label":"4 Weeks"},{"value":5,"label":"5 Weeks"},{"value":6,"label":"6 Weeks"},{"value":7,"label":"7 Weeks"},{"value":8,"label":"8 Weeks"},{"value":8.7,"label":"2 Months"},{"value":13,"label":"3 Months"},{"value":17.4,"label":"4 Months"},{"value":21.7,"label":"5 Months"},{"value":26.1,"label":"6 Months"},{"value":30.4,"label":"7 Months"},{"value":34.8,"label":"8 Months"},{"value":39.1,"label":"9 Months"},{"value":43.5,"label":"10 Months"},{"value":47.8,"label":"11 Months"},{"value":52.2,"label":"12 Months"},{"value":56.5,"label":"13 Months"},{"value":60.9,"label":"14 Months"},{"value":65.2,"label":"15 Months"},{"value":69.6,"label":"16 Months"},{"value":73.9,"label":"17 Months"},{"value":78.3,"label":"18 Months"},{"value":82.6,"label":"19 Months"},{"value":87,"label":"20 Months"},{"value":91.3,"label":"21 Months"},{"value":95.7,"label":"22 Months"},{"value":100,"label":"23 Months"},{"value":104.4,"label":"24 Months"},{"value":156.5,"label":"3 Years"}]">
<input type="text" id="slider-result" />
</div>
</div>
</fieldset>
</div>
<div class="rc-list__accordion-item">
<fieldset class="rc-fieldset" data-toggle-group="" data-toggle-effect="rc-expand--vertical">
<legend class="rc-list__header" id="breed-header" data-toggle="breed">
<strong>Breed</strong>
<a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
</legend>
<ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="breed" aria-labelledby="breed-header" role="menu">
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="lab" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="lab">
Labrador Retriever
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="air" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="air">
Airedale Terrier
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="ala" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="ala">
Alaskan Malamute
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="aki" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="aki">
Akita
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="afg" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="afg">
Afghan Hound
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="amer" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="amer">
American Akita
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="aff" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="aff">
Affenpinscher
(
<span data-custom="">5</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="alp" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="alp">
Alpine Dachsbracke
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="bea" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="bea">
Beagle
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="rc-list__accordion-item">
<fieldset class="rc-fieldset" data-toggle-group="" data-toggle-effect="rc-expand--vertical">
<legend class="rc-list__header" id="drywet-header" data-toggle="drywet">
<strong>Dry/Wet</strong>
<a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
</legend>
<ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="drywet" aria-labelledby="drywet-header" role="menu">
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="dry" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="dry">
Dry
(
<span data-custom="">5</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="wet" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="wet">
Wet
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="tre" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="tre">
Treats
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="rc-list__accordion-item">
<fieldset class="rc-fieldset" data-toggle-group="" data-toggle-effect="rc-expand--vertical">
<legend class="rc-list__header" id="size-header" data-toggle="size">
<strong>Size</strong>
<a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
</legend>
<ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="size" aria-labelledby="size-header" role="menu">
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="xsm" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="xsm">
X-Small
(
<span data-custom="">5</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="sm" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="sm">
Small
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="md" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="md">
Medium
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="lg" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="lg">
Large
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="gia" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="gia">
Giant
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="rc-list__accordion-item">
<fieldset class="rc-fieldset" data-toggle-group="" data-toggle-effect="rc-expand--vertical">
<legend class="rc-list__header" id="special-needs-header" data-toggle="special-needs">
<strong>Special Needs</strong>
<a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
</legend>
<ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="special-needs" aria-labelledby="special-needs-header" role="menu">
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="sp1" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="sp1">
Special Need 1
(
<span data-custom="">6</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="sp2" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="sp2">
Special Need 2
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="sp3" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="sp3">
Special Need 3
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="rc-list__accordion-item">
<fieldset class="rc-fieldset" data-toggle-group="" data-toggle-effect="rc-expand--vertical">
<legend class="rc-list__header" id="indications-header" data-toggle="indications">
<strong>Indications</strong>
<a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
</legend>
<ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="indications" aria-labelledby="indications-header" role="menu">
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="lis" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="lis">
Listlessness
(
<span data-custom="">6</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="res" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="res">
Restless
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="rc-list__accordion-item">
<fieldset class="rc-fieldset" data-toggle-group="" data-toggle-effect="rc-expand--vertical">
<legend class="rc-list__header" id="counter-indications-header" data-toggle="counter-indications">
<strong>Counter Indications</strong>
<a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
</legend>
<ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="counter-indications" aria-labelledby="counter-indications-header" role="menu">
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="gro" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="gro">
Growth
(
<span data-custom="">6</span>
)
</label>
</div>
</li>
<li class="rc-list__item">
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="preg" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="preg">
Pregnancy
(
<span data-custom="">0</span>
)
</label>
</div>
</li>
</ul>
</fieldset>
</div>
</main>
<footer class="rc-filters__footer rc-md-down">
<button class="rc-btn rc-full-width rc-margin-bottom--md rc-btn--two">Clear filters</button>
<button class="rc-btn rc-full-width rc-btn--one">Apply filters</button>
</footer>
</form>
</aside>Copied!