Filter - Astridd

Overview

The filter component is designed to allow a user to narrow down a given amount of results, making it easier to decipher. The main content is populated in cards and is best suited to things like case studies. The component allows you to add single filters for multiple categories. These filters, being of different groups, will be applied as an intersection.

Examples

Multiple choice filters variation

<div class="container">
  <div class="wrapper" data-myob-filter data-filter-animation-in="fade-in-down" data-filter-animation-out="fade-out-up">
    <div class="row">
      <div class="col col-3 col-12--sm col-12--md">
        <div class="mb-1 mb-2--lg">
          <h5>Refine and sort</h5>
          <hr class="show-for-large">
        </div>
        <div class="row">
          <div class="mb-1 mb-2--lg col col-12 col-6--md" data-filter-group="products">
            <h6>Products</h6>
            <div class="checkbox__group">
              <label class="checkbox__label">
                All
                <input type="checkbox" class="checkbox__field is-active" disabled data-filter-all>
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                EXO
                <input type="checkbox" class="checkbox__field" data-filter-control="exo">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Advanced
                <input type="checkbox" class="checkbox__field" data-filter-control="advanced">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Greentree
                <input type="checkbox" class="checkbox__field" data-filter-control="greentree">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                PayGlobal
                <input type="checkbox" class="checkbox__field" data-filter-control="payglobal">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
          </div>
          <div class="mb-1 mb-2--lg col col-12 col-6--md" data-filter-group="industry">
            <h6>Industry</h6>
            <div class="checkbox__group">
              <label class="checkbox__label">
                All
                <input type="checkbox" class="checkbox__field is-active" disabled data-filter-all>
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Food & Beverage
                <input type="checkbox" class="checkbox__field" data-filter-control="food-beverage">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Manufacturing
                <input type="checkbox" class="checkbox__field" data-filter-control="manufacturing">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Retail
                <input type="checkbox" class="checkbox__field" data-filter-control="retail">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Wholesale
                <input type="checkbox" class="checkbox__field" data-filter-control="wholesale">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Health
                <input type="checkbox" class="checkbox__field" data-filter-control="health">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
            <div class="checkbox__group">
              <label class="checkbox__label">
                Non Profit
                <input type="checkbox" class="checkbox__field" data-filter-control="non-profit">
                <span class="checkbox__indicator"></span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-9 col-12--sm col-12--md" data-equalizer="card-heading">
        <div class="row">
          <div class="col col-12 no-records-found no-display absolute">
            <h4 class="fg-storm-50">There aren't any case studies for that right now.</h4>
            <h5>Untick some filters and search again.</h5>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="advanced,manufacturing">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/logos/GDK.jpg" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">GDK</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="payglobal,retail">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/backgrounds/star-retail-logo.jpg" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Star Retail Group</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="greentree,retail">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/mona logo.png" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">MONA</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="greentree,health">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/GPTT-Logo.jpg" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">General Practice Training Tasmania</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="exo,food-beverage">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-website/images/logos/case-study-logos/Koshi_logo.jpg" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Koshi Sushi</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="exo,food-beverage">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/interaust.png" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Interaust Foods</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="exo,manufacturing,food-beverage">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/illustrations/nippys-manufacturing-1257833382874.jpeg" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Nippys</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="greentree,wholesale">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/Dateline_Imports.png" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Dateline Imports</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="advanced,non-profit">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-website/images/logos/case-study-logos/bcna-logo.png" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Breast Cancer Network Austraila</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="advanced,manufacturing,food-beverage">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/tuataralogo.png" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Tuatara Brewery</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="exo,retail">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/nood_logo.png" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Nood</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-4 col-12--sm col-6--md col-6--lg">
            <div class="card card--center card--vertical mb-2" data-filter-tags="exo,wholesale">
              <div class="card__fg-img">
                <img src="https://www.myob.com/content/dam/myob-redesign/au/images/illustrations/unitex-international-1443359382682.png" alt="">
              </div>
              <div class="card__content">
                <div class="card__head">
                  <h5 data-equalizer-watch="card-heading">Unitex International</h5>
                </div>
                <div class="card__body">
                  <p>This is some content which relates to the card. This is some content which relates to the card.</p>
                  <a href="" class="link-advanced">Call to action</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Single choice filters variation

Currently used in Comparison Table, this variation allows you to add single filters for multiple categories. These filters, being of different groups, will be applied as an intersection. I.e. items that are both EXO and Food & Beverage instead of items that are either EXO or Food & Beverage.