360Giving Design System - Components

Filter Panel 

<div class="filter-panel">
    <div class="accordion">
        <div class="grid">
            <div class="grid__1">
                <button class="button accordion__trigger">Filters</button>
            </div>
        </div>
        <div class="accordion__extra">
            <div class="filter-panel__item">
                <div class="grid grid--four-columns">
                    <div class="grid__1">
                        <h4>Amount Range</h4>
                    </div>
                    <div class="grid__3">
                        <div class="range-filter">
                            <input id="01-01" type="checkbox">
                            <label class="filter" for="01-01" data-value="0-100"></label>
                            <input id="01-02" type="checkbox">
                            <label class="filter" for="01-02" data-value="101-400"></label>
                            <input id="01-03" type="checkbox">
                            <label class="filter" for="01-03" data-value="401-1k"></label>
                            <input id="01-04" type="checkbox">
                            <label class="filter" for="01-04" data-value="1k-5k"></label>
                            <input id="01-05" type="checkbox">
                            <label class="filter" for="01-05" data-value="5k-10k"></label>
                            <input id="01-06" type="checkbox">
                            <label class="filter" for="01-06" data-value="10k-100k"></label>
                            <input id="01-07" type="checkbox">
                            <label class="filter" for="01-07" data-value="100k+"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-panel__item">
                <div class="grid grid--four-columns">
                    <div class="grid__1">
                        <h4>Amount Range</h4>
                    </div>
                    <div class="grid__3">
                        <div class="range-filter">
                            <input id="02-01" type="checkbox">
                            <label class="filter" for="02-01" data-value="0-100"></label>
                            <input id="02-02" type="checkbox">
                            <label class="filter" for="02-02" data-value="0-100"></label>
                            <input id="02-03" type="checkbox">
                            <label class="filter" for="02-03" data-value="0-100"></label>
                            <input id="02-04" type="checkbox">
                            <label class="filter" for="02-04" data-value="0-100"></label>
                            <input id="02-05" type="checkbox">
                            <label class="filter" for="02-05" data-value="0-100"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-panel__item">
                <div class="grid grid--four-columns">
                    <div class="grid__1">
                        <h4>Amount Range</h4>
                    </div>
                    <div class="grid__3">
                        <div class="range-filter">
                            <input id="03-01" type="checkbox"><label class="filter" for="03-01" data-value="0-100"></label>
                            <input id="03-02" type="checkbox"><label class="filter" for="03-02" data-value="0-100"></label>
                            <input id="03-03" type="checkbox"><label class="filter" for="03-03" data-value="0-100"></label>
                            <input id="03-04" type="checkbox"><label class="filter" for="03-04" data-value="0-100"></label>
                            <input id="03-05" type="checkbox"><label class="filter" for="03-05" data-value="0-100"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="filter-panel">
  <div class="accordion">
    <div class="grid">
      <div class="grid__1">
        <button class="button accordion__trigger">Filters</button>    
      </div>
    </div>
    <div class="accordion__extra">
      <div class="filter-panel__item">
        <div class="grid grid--four-columns">
          <div class="grid__1"><h4>Amount Range</h4></div>
          <div class="grid__3">
            <div class="range-filter">
              <input id="01-01" type="checkbox">
              <label class="filter" for="01-01" data-value="0-100"></label>
              <input id="01-02" type="checkbox">
              <label class="filter" for="01-02" data-value="101-400"></label>
              <input id="01-03" type="checkbox">
              <label class="filter" for="01-03" data-value="401-1k"></label>
              <input id="01-04" type="checkbox">
              <label class="filter" for="01-04" data-value="1k-5k"></label>
              <input id="01-05" type="checkbox">
              <label class="filter" for="01-05" data-value="5k-10k"></label>
              <input id="01-06" type="checkbox">
              <label class="filter" for="01-06" data-value="10k-100k"></label>
              <input id="01-07" type="checkbox">
              <label class="filter" for="01-07" data-value="100k+"></label>
            </div>
          </div>
        </div>
      </div>
      <div class="filter-panel__item">
        <div class="grid grid--four-columns">
          <div class="grid__1"><h4>Amount Range</h4></div>
          <div class="grid__3">
            <div class="range-filter">
              <input id="02-01" type="checkbox">
              <label class="filter" for="02-01" data-value="0-100"></label>
              <input id="02-02" type="checkbox">
              <label class="filter" for="02-02" data-value="0-100"></label>
              <input id="02-03" type="checkbox">
              <label class="filter" for="02-03" data-value="0-100"></label>
              <input id="02-04" type="checkbox">
              <label class="filter" for="02-04" data-value="0-100"></label>
              <input id="02-05" type="checkbox">
              <label class="filter" for="02-05" data-value="0-100"></label>
            </div>
          </div>
        </div>
      </div>
      <div class="filter-panel__item">
        <div class="grid grid--four-columns">
          <div class="grid__1"><h4>Amount Range</h4></div>
            <div class="grid__3">
              <div class="range-filter">
                <input id="03-01" type="checkbox"><label class="filter" for="03-01" data-value="0-100"></label>
                <input id="03-02" type="checkbox"><label class="filter" for="03-02" data-value="0-100"></label>
                <input id="03-03" type="checkbox"><label class="filter" for="03-03" data-value="0-100"></label>
                <input id="03-04" type="checkbox"><label class="filter" for="03-04" data-value="0-100"></label>
                <input id="03-05" type="checkbox"><label class="filter" for="03-05" data-value="0-100"></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
/* No context defined. */
  • Content: 
    .filter-panel {
  border-top: 1px solid hsla(var(--base-hsl),.2);
  border-bottom: 1px solid hsla(var(--base-hsl),.2);
  padding: 24px 0;

  h4 { margin: 0; }

  &__item {
    padding: 8px 0;
  }
  
}

.range-filter {
  input[type="checkbox"] { display: none; }
  label { 
    clear: right; 

  }
  label:after { content: attr(data-value); }
}
  • URL: /components/raw/filter-panel/filter-panel.scss
  • Filesystem Path: src/components/04-modules/filter-panel/filter-panel.scss
  • Size: 344 Bytes

No notes defined.