Academy of Natural Sciences

Page Header Press Filters 

<div class="o-filter-bar o-container c-press-filters">
    <h2 class="u-sr-only">Press Filters</h2>
    <form id="js-filter-form" class="o-row o-filter-bar__form js-filter-form" data-baseurl="">

        <div class="c-press-filters__filter c-press-filters__filter--year o-col o-col-sm-3">
            <div class="o-select-filter" data-param-name="">
                <label for="" class="u-sr-only">Year</label>
                <select id="" class="o-select-filter__select js-filter-select">
                    <option value="">Year</option>

                    <option id="" value="2018">2018</option>

                    <option id="" value="2019">2019</option>

                    <option id="" value="2020">2020</option>

                    <option id="" value="2021">2021</option>

                </select>
                <span class="o-select-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11 1L6 6L1 1" class="u-ct-stroke" />
                    </svg>
                </span>
            </div>

        </div>

    </form>
</div>

<div class="o-applied-filters o-container is-empty">
    <h2 id="applied-filter-results-title" class="u-sr-only">Applied Filters</h2>
    <div class="o-applied-filters__wrapper">
        <div id="applied-filter-results" class="o-applied-filters__inner">

        </div>
        <button class="js-remove-all-filters o-applied-filters__remove-all">
            <span class="u-hover-drawline--thin">Remove All Filters</span>
        </button>
    </div>
</div>
 
{% embed "04-objects/filters/filter-bar" with {
  isSample: false,
  classes: 'c-press-filters',
  title: 'Press Filters'
} %}
  {% block formContent %}
    <div class="c-press-filters__filter c-press-filters__filter--year o-col o-col-sm-3">
      {% include "04-objects/filters/select-filter" with selectFilter only %}
    </div>
  {% endblock %}
{% endembed %}
 
{
  "pageColorTheme": "teal",
  "selectFilter": {
    "title": "Year",
    "items": [
      {
        "title": "2018",
        "value": "2018"
      },
      {
        "title": "2019",
        "value": "2019"
      },
      {
        "title": "2020",
        "value": "2020"
      },
      {
        "title": "2021",
        "value": "2021"
      }
    ]
  }
}

No notes defined.