<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only"></h2>
<div id="js-filter-content" class="o-filter-content-container c-all-experiences">

    <div class="c-all-experiences">
        <h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">All Experiences Results</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="o-column-panel c-all-experiences__section" data-bkg-theme="base">
                    <div class="o-container">
                        <div class="o-row">
                            <div class="o-column-panel__header o-col o-col-sm-md-4">
                                <div class="o-column-panel__header-content">
                                    <h3 class="o-column-panel__title f-title--h3">Events</h3>

                                </div>
                            </div>

                            <div class="o-column-panel__content o-col o-col-sm-md-8">

                                <ul class="c-all-experiences__list-items">

                                    <li class="o-list-card c-all-experiences__list-item js-watch u-watch--fade-up">
                                        <a href="" class="o-list-card__link">
                                            <div class="o-list-card__content">
                                                <h4 class="o-list-card__title f-title--h5">
                                                    <span class="u-hover-drawline">Academy Science Camp: Life before dinosaurs</span>
                                                </h4>

                                                <p class="o-list-card__eyebrow f-text--tag f-upper">Workshop <span class="u-sep-dot"></span> Free</p>

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

                                                <p class="o-list-card__date f-text--time">Thursday, March 25</p>

                                            </div>

                                            <div class="o-list-card__image">

                                                <img src="/images/experience/AcademyScienceCamp.jpg" alt="" />

                                            </div>

                                        </a>
                                    </li>

                                    <li class="o-list-card c-all-experiences__list-item js-watch u-watch--fade-up">
                                        <a href="" class="o-list-card__link">
                                            <div class="o-list-card__content">
                                                <h4 class="o-list-card__title f-title--h5">
                                                    <span class="u-hover-drawline">Paleo Playdate</span>
                                                </h4>

                                                <p class="o-list-card__eyebrow f-text--tag f-upper">Workshop <span class="u-sep-dot"></span> Free</p>

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

                                                <p class="o-list-card__date f-text--time">Thursday, March 25</p>

                                            </div>

                                            <div class="o-list-card__image">

                                                <img src="/images/experience/AcademyScienceCamp.jpg" alt="" />

                                            </div>

                                        </a>
                                    </li>

                                    <li class="o-list-card c-all-experiences__list-item js-watch u-watch--fade-up">
                                        <a href="" class="o-list-card__link">
                                            <div class="o-list-card__content">
                                                <h4 class="o-list-card__title f-title--h5">
                                                    <span class="u-hover-drawline">Academy Science Camp: Secrets of the museum</span>
                                                </h4>

                                                <p class="o-list-card__eyebrow f-text--tag f-upper">Workshop <span class="u-sep-dot"></span> Free</p>

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

                                                <p class="o-list-card__date f-text--time">Thursday, March 25</p>

                                            </div>

                                            <div class="o-list-card__image">

                                                <img src="/images/experience/AcademyScienceCamp.jpg" alt="" />

                                            </div>

                                        </a>
                                    </li>

                                </ul>
                                <div class="c-all-experiences__cta-wrapper">
                                    <a href="#" class="c-all-experiences__cta o-btn o-btn--text-dark o-btn--expanding-arrow">
                                        Explore all events
                                        <span class="o-btn__icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
                                                <path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="o-column-panel c-all-experiences__section" data-bkg-theme="base">
                    <div class="o-container">
                        <div class="o-row">
                            <div class="o-column-panel__header o-col o-col-sm-md-4">
                                <div class="o-column-panel__header-content">
                                    <h3 class="o-column-panel__title f-title--h3">Exhibits</h3>

                                </div>
                            </div>

                            <div class="o-column-panel__content o-col o-col-sm-md-8">

                                <ul class="c-all-experiences__list-items">

                                    <li class="o-list-card c-all-experiences__list-item js-watch u-watch--fade-up">
                                        <a href="" class="o-list-card__link">
                                            <div class="o-list-card__content">
                                                <h4 class="o-list-card__title f-title--h5">
                                                    <span class="u-hover-drawline">Academy Science Camp: Life before dinosaurs</span>
                                                </h4>

                                                <p class="o-list-card__eyebrow f-text--tag f-upper">Workshop <span class="u-sep-dot"></span> Free</p>

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

                                                <p class="o-list-card__date f-text--time">Thursday, March 25</p>

                                            </div>

                                            <div class="o-list-card__image">

                                                <img src="/images/experience/AcademyScienceCamp.jpg" alt="" />

                                            </div>

                                        </a>
                                    </li>

                                    <li class="o-list-card c-all-experiences__list-item js-watch u-watch--fade-up">
                                        <a href="" class="o-list-card__link">
                                            <div class="o-list-card__content">
                                                <h4 class="o-list-card__title f-title--h5">
                                                    <span class="u-hover-drawline">Paleo Playdate</span>
                                                </h4>

                                                <p class="o-list-card__eyebrow f-text--tag f-upper">Workshop <span class="u-sep-dot"></span> Free</p>

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

                                                <p class="o-list-card__date f-text--time">Thursday, March 25</p>

                                            </div>

                                            <div class="o-list-card__image">

                                                <img src="/images/experience/AcademyScienceCamp.jpg" alt="" />

                                            </div>

                                        </a>
                                    </li>

                                    <li class="o-list-card c-all-experiences__list-item js-watch u-watch--fade-up">
                                        <a href="" class="o-list-card__link">
                                            <div class="o-list-card__content">
                                                <h4 class="o-list-card__title f-title--h5">
                                                    <span class="u-hover-drawline">Academy Science Camp: Secrets of the museum</span>
                                                </h4>

                                                <p class="o-list-card__eyebrow f-text--tag f-upper">Workshop <span class="u-sep-dot"></span> Free</p>

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

                                                <p class="o-list-card__date f-text--time">Thursday, March 25</p>

                                            </div>

                                            <div class="o-list-card__image">

                                                <img src="/images/experience/AcademyScienceCamp.jpg" alt="" />

                                            </div>

                                        </a>
                                    </li>

                                </ul>
                                <div class="c-all-experiences__cta-wrapper">
                                    <a href="#" class="c-all-experiences__cta o-btn o-btn--text-dark o-btn--expanding-arrow">
                                        Explore all exhibits
                                        <span class="o-btn__icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
                                                <path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">{{ title }}</h2>
<div id="js-filter-content" class="o-filter-content-container c-all-experiences">

<div class="c-all-experiences">
  {% embed "04-objects/filters/filter-content-container" with filterContainerData %}
    {% block filterContainerContent %}
      {% if events.items or dailyActivities.items or exhibits.items %}

        {% if events.items %}
          {% embed "04-objects/column-panel" with {
            title: 'Events',
            removeOffset: true,
            panelColorTheme: 'base',
            classes: 'c-all-experiences__section',
            hTag: 'h3'
          } %}
            {% block content %}
              <ul class="c-all-experiences__list-items">
                {% for item in events.items %}
                  {% include "04-objects/list-card" with item|merge({classes: 'c-all-experiences__list-item'}) only %}
                {% endfor %}
              </ul>
              <div class="c-all-experiences__cta-wrapper">
                <a href="{{ events.ctaLink }}" class="c-all-experiences__cta o-btn o-btn--text-dark o-btn--expanding-arrow">
                  {{ events.ctaTitle }}
                  <span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
                </a>
              </div>
            {% endblock content %}
          {% endembed %}
        {% endif %}

        {% if dailyActivities.items %}
          {% embed "04-objects/column-panel" with {
            title: 'Daily Activities',
            removeOffset: true,
            panelColorTheme: 'light',
            classes: 'c-all-experiences__section',
            hTag: 'h3'
          } %}
            {% block content %}
              <ul class="c-all-experiences__list-items">
                {% for item in dailyActivities.items %}
                  {% include "04-objects/list-card" with item|merge({classes: 'c-all-experiences__list-item'}) only %}
                {% endfor %}
              </ul>
              <div class="c-all-experiences__cta-wrapper">
                <a href="{{ dailyActivities.ctaLink }}" class="c-all-experiences__cta o-btn o-btn--text-dark o-btn--expanding-arrow">
                  {{ dailyActivities.ctaTitle }}
                  <span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
                </a>
              </div>
            {% endblock content %}
          {% endembed %}
        {% endif %}

        {% if exhibits.items %}
          {% embed "04-objects/column-panel" with {
            title: 'Exhibits',
            removeOffset: true,
            panelColorTheme: 'base',
            classes: 'c-all-experiences__section',
            hTag: 'h3'
          } %}
            {% block content %}
              <ul class="c-all-experiences__list-items">
                {% for item in exhibits.items %}
                  {% include "04-objects/list-card" with item|merge({classes: 'c-all-experiences__list-item'}) only %}
                {% endfor %}
              </ul>
              <div class="c-all-experiences__cta-wrapper">
                <a href="{{ exhibits.ctaLink }}" class="c-all-experiences__cta o-btn o-btn--text-dark o-btn--expanding-arrow">
                  {{ exhibits.ctaTitle }}
                  <span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
                </a>
              </div>
            {% endblock content %}
          {% endembed %}
        {% endif %}

      {# No events or daily activites or exhibits #}
      {% else %}
        <div class="c-all-experiences__no-results o-container">
          <h2 class="c-all-experiences__no-results-title f-title--h4 f-bold">No results matched your search.</h2>
          <p>Please try filtering again.</p>
        </div>

      {% endif %}
    {% endblock %}
  {% endembed %}

</div>
{
  "pageColorTheme": "reef",
  "filterContainerData": {
    "title": "All Experiences Results"
  },
  "events": {
    "ctaTitle": "Explore all events",
    "ctaLink": "#",
    "items": [
      {
        "title": "Academy Science Camp: Life before dinosaurs",
        "tag": "Workshop",
        "cost": "Free",
        "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
        "date": "Thursday, March 25",
        "time": "1:00p.m.–2:30p.m."
      },
      {
        "title": "Paleo Playdate",
        "tag": "Workshop",
        "cost": "Free",
        "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
        "date": "Thursday, March 25",
        "time": "4:00p.m.–5:30p.m."
      },
      {
        "title": "Academy Science Camp: Secrets of the museum",
        "tag": "Workshop",
        "cost": "Free",
        "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
        "date": "Thursday, March 25",
        "time": "2:00p.m.–3:00p.m."
      }
    ]
  },
  "dailyActivities": {
    "ctaTitle": "Explore all Daily Activities",
    "ctaLink": "#",
    "items": false
  },
  "exhibits": {
    "ctaTitle": "Explore all exhibits",
    "ctaLink": "#",
    "items": [
      {
        "title": "Academy Science Camp: Life before dinosaurs",
        "tag": "Workshop",
        "cost": "Free",
        "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
        "date": "Thursday, March 25",
        "time": "1:00p.m.–2:30p.m."
      },
      {
        "title": "Paleo Playdate",
        "tag": "Workshop",
        "cost": "Free",
        "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
        "date": "Thursday, March 25",
        "time": "4:00p.m.–5:30p.m."
      },
      {
        "title": "Academy Science Camp: Secrets of the museum",
        "tag": "Workshop",
        "cost": "Free",
        "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
        "date": "Thursday, March 25",
        "time": "2:00p.m.–3:00p.m."
      }
    ]
  }
}
  • Content:
    .c-all-experiences__cta-wrapper {
      margin-top: 4.8rem;
    }
    
    .c-all-experiences__no-results {
      padding-top: 10rem;
      padding-bottom: 10rem;
    }
    
    .c-all-experiences__no-results-title {
      margin-bottom: 1.2rem;
    }
    
  • URL: /components/raw/featured-experiences/featured-experiences.scss
  • Filesystem Path: patterns\06-components\experience-views\featured-experiences\featured-experiences.scss
  • Size: 220 Bytes

No notes defined.