<div class="c-daily-activities-view">
<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">Daily Activities 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-container">
<h2 id="daily-activities-view-title" class="u-sr-only">Daily Activities</h2>
<ul class="c-daily-activities-view__items" aria-labelledby="daily-activities-view-title">
<li class="c-daily-activities-view__item js-watch u-watch--fade-up">
<div class="o-h-card o-h-card--centered" data-bkg-theme="">
<div class=" o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="https://source.unsplash.com/random/1600x700" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content">
<div class="o-h-card__main-text">
<div class="o-h-card__eyebrows">
<div class="o-h-card__eyebrow-groups">
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">Weekdays</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">10 a.m.—11:30 p.m.</p>
</div>
</div>
</div>
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 f-bold">
<span class="u-hover-drawline">Meet the Animals</span>
</h2>
<p class="o-h-card__desc f-text--small">Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="c-daily-activities-view__item js-watch u-watch--fade-up">
<div class="o-h-card o-h-card--centered" data-bkg-theme="">
<div class=" o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="https://source.unsplash.com/random/1600x700" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content">
<div class="o-h-card__main-text">
<div class="o-h-card__eyebrows">
<div class="o-h-card__eyebrow-groups">
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">Weekdays</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">2:30 p.m.</p>
</div>
</div>
</div>
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 f-bold">
<span class="u-hover-drawline">Up close with live butterflies</span>
</h2>
<p class="o-h-card__desc f-text--small">Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="c-daily-activities-view__item js-watch u-watch--fade-up">
<div class="o-h-card o-h-card--centered" data-bkg-theme="">
<div class=" o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="https://source.unsplash.com/random/1600x700" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content">
<div class="o-h-card__main-text">
<div class="o-h-card__eyebrows">
<div class="o-h-card__eyebrow-groups">
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">All Day</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">10 a.m.—11:30 p.m.</p>
</div>
</div>
</div>
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 f-bold">
<span class="u-hover-drawline">Fossil prep lab</span>
</h2>
<p class="o-h-card__desc f-text--small">Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="c-daily-activities-view__item js-watch u-watch--fade-up">
<div class="o-h-card o-h-card--centered" data-bkg-theme="">
<div class=" o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="https://source.unsplash.com/random/1600x700" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content">
<div class="o-h-card__main-text">
<div class="o-h-card__eyebrows">
<div class="o-h-card__eyebrow-groups">
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">Weekends</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">10 a.m.—11:30 p.m.</p>
</div>
</div>
</div>
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 f-bold">
<span class="u-hover-drawline">Activity name lorem</span>
</h2>
<p class="o-h-card__desc f-text--small">Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="c-daily-activities-view__item js-watch u-watch--fade-up">
<div class="o-h-card o-h-card--centered" data-bkg-theme="">
<div class=" o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="https://source.unsplash.com/random/1600x700" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content">
<div class="o-h-card__main-text">
<div class="o-h-card__eyebrows">
<div class="o-h-card__eyebrow-groups">
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">Weekends</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">10 a.m.—11:30 p.m.</p>
</div>
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">Weekends</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">12 p.m.—2 p.m.</p>
</div>
</div>
</div>
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 f-bold">
<span class="u-hover-drawline">Activity name lorem</span>
</h2>
<p class="o-h-card__desc f-text--small">Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-daily-activities-view">
{% embed "04-objects/filters/filter-content-container" with filterContainerData %}
{% block filterContainerContent %}
<div class="o-container">
<h2 id="daily-activities-view-title" class="u-sr-only">Daily Activities</h2>
<ul class="c-daily-activities-view__items" aria-labelledby="daily-activities-view-title">
{% for item in items %}
<li class="c-daily-activities-view__item js-watch u-watch--fade-up">
{% include "04-objects/horizontal-card" with item|merge({
hideContainer: true,
hClass: 'f-bold',
isCentered: true,
}) %}
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
{% endembed %}
</div>
{
"pageColorTheme": "teal",
"filterContainerData": {
"title": "Daily Activities Result List"
},
"items": [
{
"title": "Meet the Animals",
"link": "#",
"eyebrowGroups": [
{
"title": "Weekdays",
"subtitle": "10 a.m.—11:30 p.m."
}
],
"description": "Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.",
"image": "<img src=\"https://source.unsplash.com/random/1600x700\" alt=\"\" />",
"linkCTAText": "Learn More"
},
{
"title": "Up close with live butterflies",
"link": "#",
"eyebrowGroups": [
{
"title": "Weekdays",
"subtitle": "2:30 p.m."
}
],
"description": "Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.",
"image": "<img src=\"https://source.unsplash.com/random/1600x700\" alt=\"\" />",
"linkCTAText": "Learn More"
},
{
"title": "Fossil prep lab",
"link": "#",
"eyebrowGroups": [
{
"title": "All Day",
"subtitle": "10 a.m.—11:30 p.m."
}
],
"description": "Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.",
"image": "<img src=\"https://source.unsplash.com/random/1600x700\" alt=\"\" />",
"linkCTAText": "Learn More"
},
{
"title": "Activity name lorem",
"link": "#",
"eyebrowGroups": [
{
"title": "Weekends",
"subtitle": "10 a.m.—11:30 p.m."
}
],
"description": "Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.",
"image": "<img src=\"https://source.unsplash.com/random/1600x700\" alt=\"\" />",
"linkCTAText": "Learn More"
},
{
"title": "Activity name lorem",
"link": "#",
"eyebrowGroups": [
{
"title": "Weekends",
"subtitle": "10 a.m.—11:30 p.m."
},
{
"title": "Weekends",
"subtitle": "12 p.m.—2 p.m."
}
],
"description": "Brief description of the activity goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur.",
"image": "<img src=\"https://source.unsplash.com/random/1600x700\" alt=\"\" />",
"linkCTAText": "Learn More"
}
]
}
.c-daily-activities-view {
margin-top: 10rem;
margin-bottom: 10rem;
}
.c-daily-activities-view__item {
& + & {
margin-top: 10rem;
}
.o-h-card__image {
@include break($sm) {
padding-right: 5.4rem;
}
}
&:nth-child(even) .o-h-card__row {
flex-direction: row-reverse;
.o-h-card__image {
@include break($sm) {
padding-left: 5.4rem;
padding-right: 0;
}
}
.o-h-card__content-wrapper {
align-items: flex-start;
justify-content: flex-end;
align-content: flex-end;
}
}
.o-h-card__content {
max-width: 128rem;
}
h2 {
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 36px;
}
}
.c-daily-activities-view__item .o-h-card__content-wrapper {
align-items: flex-start;
justify-content: flex-start;
align-content: flex-end;
}
.c-daily-activities-view__item .o-col-sm-7,
.o-col-sm-5 {
padding: 0;
}
.c-daily-activities-view__item .o-h-card__main-text {
margin-bottom: 1.5rem;
}
No notes defined.