Academy of Natural Sciences

Journal Featured Content 

<div class="c-journal-featured-content" data-bkg-theme="base">
    <div class="o-filter-bar o-container c-journal-view__filters">
        <h2 class="u-sr-only">Filters</h2>
        <form id="js-filter-form" class="o-row o-filter-bar__form js-filter-form" data-baseurl="https://bc-ans.netlify.app">

            <div class="c-experience-filters__filter c-experience-filters__filter--search o-col o-col-sm-4 o-col-lg-3">
                <div class="o-fancy-form-item o-fancy-form-item--icon o-fancy-input">
                    <label class="o-fancy-form-item__label" for="journal-search">
                        <span class="o-fancy-form-item__icon" aria-hidden="true"><svg width="14" height="14" viewbox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="u-ct-stroke" d="M6.90519 12.5466C10.1665 12.5466 12.8104 9.96179 12.8104 6.77329C12.8104 3.58479 10.1665 1 6.90519 1C3.64383 1 1 3.58479 1 6.77329C1 9.96179 3.64383 12.5466 6.90519 12.5466Z" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
                                <path class="u-ct-stroke" d="M11.0859 10.8608L15.9998 15.6649" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
                            </svg>
                        </span>
                        <span class="o-fancy-form-item__label-text">Search the Journal</span>
                    </label>
                    <input id="journal-search" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="s" />
                </div>
            </div>
            <div class="c-experience-filters__filter c-experience-filters__filter--topic o-col o-col-sm-4 o-col-lg-3">
                <div class="o-listbox-filter js-listbox-parent" data-param-name="topic">
                    <button class="o-listbox-filter__trigger js-listbox-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
                        Topic
                        <span class="o-listbox-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>
                    </button>
                    <ul role="listbox" class="o-listbox-filter__listbox js-listbox" tabindex="0" aria-label="Topic list">

                        <li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
                            <input tabindex="-1" id="listbox-item-3147" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 1" value="topic-1">
                            <label class="o-listbox-filter__label" for="listbox-item-3147">Topic 1</label>
                        </li>

                        <li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
                            <input tabindex="-1" id="listbox-item-1041" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 2" value="topic-2">
                            <label class="o-listbox-filter__label" for="listbox-item-1041">Topic 2</label>
                        </li>

                        <li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
                            <input tabindex="-1" id="listbox-item-3489" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 3" value="topic-3">
                            <label class="o-listbox-filter__label" for="listbox-item-3489">Topic 3</label>
                        </li>

                        <li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
                            <input tabindex="-1" id="listbox-item-3868" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 4" value="topic-4">
                            <label class="o-listbox-filter__label" for="listbox-item-3868">Topic 4</label>
                        </li>

                        <li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
                            <input tabindex="-1" id="listbox-item-1921" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 5" value="topic-5">
                            <label class="o-listbox-filter__label" for="listbox-item-1921">Topic 5</label>
                        </li>

                    </ul>
                </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>

    <h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">Journal Results List</h2>
    <div id="js-filter-content" class="o-filter-content-container">
        <div class="o-filter-content-container__loader">
            <div class="o-filter-content-container__loader-icon"></div>
            <span class="u-sr-only">Loading...</span>
        </div>
        <div id="js-replace-content" class="o-filter-content-container__inner">

            <div class="c-journal-view__content o-container">
                <div class="c-featured-content-callout" data-bkg-theme="base">

                    <h2 class="u-sr-only">Featured journal articles</h2>
                    <ul class="c-featured-content-callout__cards o-row">

                        <li class="c-featured-content-callout__card o-col o-col-12">

                            <div class="o-card o-card">
                                <a class="o-card__link u-hover-grow-image" href="#">
                                    <div class="o-card__content">
                                        <div class="o-card__text">
                                            <h2 class="o-card__text-title f-title--h4">
                                                <span class="u-hover-drawline">Support environmental justice</span>
                                            </h2>

                                            <p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.</p>

                                        </div>

                                        <div class="o-card__img">

                                            <img src="/images/journal/katie-rodriguez.jpg" alt="katie rodgriguez" />

                                        </div>

                                    </div>
                                </a>

                                <ul class="o-card__tags">

                                    <li class="o-card__tag">
                                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                                    </li>

                                    <li class="o-card__tag">
                                        <a class="c-tag f-text--tag" href=#>Environmental Justice</a>

                                    </li>

                                </ul>

                            </div>

                        </li>

                        <li class="c-featured-content-callout__card o-col o-col-sm-6">

                            <div class="o-card o-card">
                                <a class="o-card__link u-hover-grow-image" href="#">
                                    <div class="o-card__content">
                                        <div class="o-card__text">
                                            <h2 class="o-card__text-title f-title--h5">
                                                <span class="u-hover-drawline">Lorem ipsum dolor sit amet consectetur adipiscing</span>
                                            </h2>

                                            <p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>

                                        </div>

                                        <div class="o-card__img">

                                            <img src="/images/journal/eel.jpg" alt="eel" />

                                        </div>

                                    </div>
                                </a>

                                <ul class="o-card__tags">

                                    <li class="o-card__tag">
                                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                                    </li>

                                    <li class="o-card__tag">
                                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                                    </li>

                                </ul>

                            </div>

                        </li>

                        <li class="c-featured-content-callout__card o-col o-col-sm-6">

                            <div class="o-card o-card">
                                <a class="o-card__link u-hover-grow-image" href="#">
                                    <div class="o-card__content">
                                        <div class="o-card__text">
                                            <h2 class="o-card__text-title f-title--h5">
                                                <span class="u-hover-drawline">Dragons after dark: Seven reasons you should go</span>
                                            </h2>

                                            <p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>

                                        </div>

                                        <div class="o-card__img">

                                            <img src="/images/journal/wizarding.jpg" alt="wizarding" />

                                        </div>

                                    </div>
                                </a>

                                <ul class="o-card__tags">

                                    <li class="o-card__tag">
                                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                                    </li>

                                    <li class="o-card__tag">
                                        <a class="c-tag f-text--tag" href=#>topic tag</a>

                                    </li>

                                </ul>

                            </div>

                        </li>

                    </ul>
                </div>

            </div>

        </div>
    </div>

</div>
 
<div class="c-journal-featured-content" data-bkg-theme="base">
{% embed "04-objects/filters/filter-bar" with filterBar|merge({classes: 'c-journal-view__filters'}) %}
  {% block formContent %}
    <div class="c-experience-filters__filter c-experience-filters__filter--search o-col o-col-sm-4 o-col-lg-3">
      <div class="o-fancy-form-item o-fancy-form-item--icon o-fancy-input">
        <label class="o-fancy-form-item__label" for="journal-search">
          <span class="o-fancy-form-item__icon" aria-hidden="true">{% include "03-icons/search" %}</span>
          <span class="o-fancy-form-item__label-text">Search the Journal</span>
        </label>
        <input id="journal-search" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="s" />
      </div>
    </div>
    <div class="c-experience-filters__filter c-experience-filters__filter--topic o-col o-col-sm-4 o-col-lg-3">
      {% include "04-objects/filters/listbox-filter" with {
        title: 'Topic',
        items: filterBar.topics,
        paramName: 'topic'
      } only %}
    </div>
  {% endblock %}
{% endembed %}

{% embed "04-objects/filters/filter-content-container" with filterContainerData %}
  {% block filterContainerContent %}
    <div class="c-journal-view__content o-container">
      {% include "06-components/featured-content-callout" with content|merge({hideContainer: true}) only %}
    </div>
  {% endblock %}
{% endembed %}
</div>
 
{
  "pageColorTheme": "teal",
  "filterBar": {
    "title": "Filters",
    "formBaseURL": "https://bc-ans.netlify.app",
    "topics": [
      {
        "title": "Topic 1",
        "value": "topic-1"
      },
      {
        "title": "Topic 2",
        "value": "topic-2"
      },
      {
        "title": "Topic 3",
        "value": "topic-3"
      },
      {
        "title": "Topic 4",
        "value": "topic-4"
      },
      {
        "title": "Topic 5",
        "value": "topic-5"
      }
    ]
  },
  "filterContainerData": {
    "title": "Journal Results List"
  },
  "content": {
    "title": "Featured journal articles",
    "cards": [
      {
        "link": "#",
        "title": "Support environmental justice",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.",
        "image": "<img src=\"/images/journal/katie-rodriguez.jpg\" alt=\"katie rodgriguez\" />",
        "tagLinks": [
          {
            "title": "topic tag",
            "link": "#"
          },
          {
            "title": "Environmental Justice",
            "link": "#"
          }
        ]
      },
      {
        "link": "#",
        "title": "Lorem ipsum dolor sit amet consectetur adipiscing",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
        "image": "<img src=\"/images/journal/eel.jpg\" alt=\"eel\" />",
        "tagLinks": [
          {
            "title": "topic tag",
            "link": "#"
          },
          {
            "title": "topic tag",
            "link": "#"
          }
        ]
      },
      {
        "link": "#",
        "title": "Dragons after dark: Seven reasons you should go",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
        "image": "<img src=\"/images/journal/wizarding.jpg\" alt=\"wizarding\" />",
        "tagLinks": [
          {
            "title": "topic tag",
            "link": "#"
          },
          {
            "title": "topic tag",
            "link": "#"
          }
        ]
      }
    ]
  }
}

No notes defined.