<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="light">
<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">Daily Activities</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">Meet the animals</span>
</h4>
<p class="o-list-card__eyebrow f-text--tag f-upper">Daily Activity <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">Daily Activity <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">Daily Activity <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 Daily Activities
<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": [
{
"title": "Meet the animals",
"tag": "Daily Activity",
"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": "Daily Activity",
"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": "Daily Activity",
"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."
}
]
},
"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."
}
]
}
}
.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;
}
No notes defined.