Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

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!