<div class="c-experience-view c-experience-view--events">
<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">Events Result 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="o-column-panel c-experience-view__event-section o-column-panel--collapsed" 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">February 12</h3>
</div>
</div>
<div class="o-column-panel__content o-col o-col-sm-md-8">
<ul class="c-experience-view__list-items">
<li class="o-list-card c-experience-view__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, February 12</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
<li class="o-list-card c-experience-view__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, February 12</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
<li class="o-list-card c-experience-view__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, February 12</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-column-panel c-experience-view__event-section o-column-panel--collapsed" 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">February 13</h3>
</div>
</div>
<div class="o-column-panel__content o-col o-col-sm-md-8">
<ul class="c-experience-view__list-items">
<li class="o-list-card c-experience-view__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, February 13</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-column-panel c-experience-view__event-section o-column-panel--collapsed" 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">February 19</h3>
</div>
</div>
<div class="o-column-panel__content o-col o-col-sm-md-8">
<ul class="c-experience-view__list-items">
<li class="o-list-card c-experience-view__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, February 19</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
<li class="o-list-card c-experience-view__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, February 19</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-column-panel c-experience-view__event-section o-column-panel--collapsed" 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">February 22</h3>
</div>
</div>
<div class="o-column-panel__content o-col o-col-sm-md-8">
<ul class="c-experience-view__list-items">
<li class="o-list-card c-experience-view__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, February 22</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
<li class="o-list-card c-experience-view__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, February 22</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
<li class="o-list-card c-experience-view__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, February 22</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-column-panel c-experience-view__event-section o-column-panel--collapsed" 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">March 1</h3>
</div>
</div>
<div class="o-column-panel__content o-col o-col-sm-md-8">
<ul class="c-experience-view__list-items">
<li class="o-list-card c-experience-view__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 1</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-pagination-column o-container">
<div class="o-row">
<div class="c-pagination-column__content o-col o-col-sm-8 o-col-sm--offset-4">
<div class="o-pagination">
<nav class="o-pagination__nav" aria-label="Pagination">
<ul class="o-pagination__items" aria-label="Pagination links">
<li class="o-pagination__item">
<a href="#1" class="o-pagination__link" aria-current="page" aria-label="Current Page - Page 1">1</a>
</li>
<li class="o-pagination__item">
<a href="#2" class="o-pagination__link" aria-label="Page 2">2</a>
</li>
<li class="o-pagination__item">
<a href="#3" class="o-pagination__link" aria-label="Page 3">3</a>
</li>
<li class="o-pagination__item">
<a href="#4" class="o-pagination__link" aria-label="Page 4">4</a>
</li>
<li class="o-pagination__item o-pagination__item--elipsis">
<span class="o-pagination__elipsis"> … </span>
</li>
<li class="o-pagination__item">
<a href="#11" class="o-pagination__link" aria-label="Page 11">11</a>
</li>
</ul>
<div class="o-pagination__next">
<a href="#next" class="o-pagination__dir-link">
<span class="u-sr-only">Next Page</span>
<span class="o-pagination__dir-icon" aria-hidden="true">
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L6 6L1 11" class="u-ct-stroke" />
</svg>
</span>
</a>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-experience-view c-experience-view--events">
{% embed "04-objects/filters/filter-content-container" with filterContainerData %}
{% block filterContainerContent %}
{% for day in days %}
{% include "06-components/experience-views/helpers/events-experience-single" with {
date: day.date,
items: day.items
} only %}
{% endfor %}
{% include "06-components/pagination-column" with pagination only %}
{% endblock %}
{% endembed %}
</div>
{
"pageColorTheme": "teal",
"filterContainerData": {
"title": "Events Result List"
},
"days": [
{
"date": "February 12",
"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, February 12",
"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, February 12",
"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, February 12",
"time": "2:00p.m.–3:00p.m."
}
]
},
{
"date": "February 13",
"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, February 13",
"time": "1:00p.m.–2:30p.m."
}
]
},
{
"date": "February 19",
"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, February 19",
"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, February 19",
"time": "4:00p.m.–5:30p.m."
}
]
},
{
"date": "February 22",
"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, February 22",
"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, February 22",
"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, February 22",
"time": "2:00p.m.–3:00p.m."
}
]
},
{
"date": "March 1",
"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 1",
"time": "1:00p.m.–2:30p.m."
}
]
}
],
"pagination": {
"data": {
"prev": false,
"items": [
{
"title": "1",
"link": "#1",
"isCurrent": true
},
{
"title": "2",
"link": "#2"
},
{
"title": "3",
"link": "#3"
},
{
"title": "4",
"link": "#4"
},
{
"isElipsis": true
},
{
"link": "#11",
"title": "11"
}
],
"next": {
"title": "Next Page",
"link": "#next"
}
}
}
}
.o-featured-card__inner {
@include break($sm) {
height: 56.3rem;
}
}
.o-featured-card__image img {
object-fit: inherit;
}
No notes defined.