Filters

Filters are a way for users to drill down information.

Filters Trigger

<filters-trigger>
  <button type="button"
    class="filters-trigger__btn btn btn--icon-square"
    aria-label="Show Filters">
    <svg class="icon filters-trigger__icon"
      role="presentation">
      <use xlink:href="#icon-filters"></use>
    </svg>
  </button>
</filters-trigger>

Filters Trigger: open

<filters-trigger>
  <button type="button"
    class="filters-trigger__btn btn btn--icon-square active"
    aria-label="Show Filters">
    <span class="filters-trigger__count mr-2x">5</span>
    <svg class="icon filters-trigger__icon"
      role="presentation">
      <use xlink:href="#icon-filters"></use>
    </svg>
  </button>
</filters-trigger>

Filters Overlay

Filters



<div class="filters-overlay-container">
  <filters-overlay>
    <div class="filters-overlay__header">
      <h2 class="filters-header__title mr-3x">Filters</h2>
    </div>

    <div class="filters-overlay__body">
      <accordion>
        <accordion-trigger class="mb-3x">
          <button type="button" class="accordion-trigger__btn btn">
            <span class="accordion-trigger__title">
              Potion Names
              <svg class="accordion-trigger__icon icon-arrow--up ml-2x"
                role="presentation">
                <use xlink:href="#icon-dropdown"></use>
              </svg>
            </span>
            <span class="accordion-trigger__count">1 Selected</span>
          </button>
        </accordion-trigger>

        <accordion-content>
          <div class="filters-input-container">
            <filters-input class="filters-input search">
              <input class="form-input filters-input__input" placeholder="Filter by potion name">
            </filters-input>

            <filters-results class="filters-input-container__results">
              <nav class="tab-switcher tab-switcher--left">
                <button type="button" class="tab-switcher__link active">
                  My potions <span class="badge">2</span>
                </button>
                <button type="button" class="tab-switcher__link">
                  All potions <span class="badge badge--muted">188</span>
                </button>
              </nav>

              <hr class="filters-overlay__rule">

              <label class="form__label form__label--checkbox form__label--medium">
                <input type="checkbox" class="input-checkbox input-checkbox--medium">
                Felix Felicis
              </label>
              <label class="form__label form__label--checkbox form__label--medium">
                <input type="checkbox" class="input-checkbox input-checkbox--medium">
                Polyjuice Potion
              </label>
            </filters-results>
          </div>
        </accordion-content>
      </accordion>

      <hr class="filters-overlay__rule">

      <accordion>
        <accordion-trigger>
          <button type="button" class="accordion-trigger__btn btn">
            <span class="accordion-trigger__title">
              Ingredients
              <svg class="accordion-trigger__icon ml-2x"
                role="presentation">
                <use xlink:href="#icon-dropdown"></use>
              </svg>
            </span>
            <span class="accordion-trigger__count">3 Selected</span>
          </button>
        </accordion-trigger>
      </accordion>
    </div>

    <div class="filters-overlay__footer">
      <filters-submit class="ml-auto">
        <button type="button" class="btn btn--tertiary filters-overlay__clear">Clear</button>
        <button type="button" class="ml-3x btn btn--primary">Apply</button>
      </filters-submit>
    </div>
  </filters-overlay>
</div>