<div class="c-content-carousel" data-bkg-theme="base">
<div class="o-container">
<div class="o-row">
<div class="c-content-carousel__header o-col o-col-sm-8 js-watch u-watch--fade-up">
<h2 class="c-content-carousel__title f-title--h3">At the Academy</h2>
<p class="c-content-carousel__description f-text--reg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Mauris id consequat sem. Praesent vulputate ipsum at metus sodales.
</div>
</div>
</div>
<div class="c-content-carousel__slides o-container js-watch u-watch--fade-up">
<div class="c-content-carousel__slides-stage">
<div class="c-content-carousel__image-slides-stage swiper-container" aria-hidden="true">
<div class="c-content-carousel__image-slides swiper-wrapper">
<div class="c-content-carousel__image-slide swiper-slide">
<img src="/images/homepage/dino-kid.jpg" alt="Child playing with dinosaur toy" />
</div>
<div class="c-content-carousel__image-slide swiper-slide">
<img src="/images/homepage/beetle.jpg" alt="Multiple rows of beetles" />
</div>
<div class="c-content-carousel__image-slide swiper-slide">
<img src="/images/homepage/dino-kid.jpg" alt="Child playing with dinosaur toy" />
</div>
<div class="c-content-carousel__image-slide swiper-slide">
<img src="/images/homepage/beetle.jpg" alt="Multiple rows of beetles" />
</div>
</div>
</div>
<div class="c-content-carousel__content-slides-stage swiper-container">
<div class="c-content-carousel__content-slides swiper-wrapper">
<div class="c-content-carousel__content-slide swiper-slide">
<div class="c-content-carousel__content-slide-inner">
<p class="c-content-carousel__slide-eyebrow f-text--tag f-upper">Workshop</p>
<h3 class="c-content-carousel__slide-title f-title--h4">Paleo playdates</h3>
<p class="c-content-carousel__slide-desc f-text--small">Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.</p>
<a href="" class="c-content-carousel__slide-link o-btn o-btn--expanding-arrow">
Read more
<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 class="u-sr-only">
<img src="/images/homepage/dino-kid.jpg" alt="Child playing with dinosaur toy" />
</div>
</div>
</div>
<div class="c-content-carousel__content-slide swiper-slide">
<div class="c-content-carousel__content-slide-inner">
<h3 class="c-content-carousel__slide-title f-title--h4">Item Name</h3>
<p class="c-content-carousel__slide-desc f-text--small">Brief description. Nullam iaculis ex dui, et lobortis purus blandit sed. Nam non sapien imperdiet lorem accumsan volutpat at et quam dolor quis.</p>
<p class="c-content-carousel__slide-credit f-text--credit">Image credit: Lorem ipsum dolor</p>
<p class="c-content-carousel__slide-status-title">YYYY</p>
<p class="c-content-carousel__slide-status-text">Source information goes here</p>
<div class="u-sr-only">
<img src="/images/homepage/beetle.jpg" alt="Multiple rows of beetles" />
</div>
</div>
</div>
<div class="c-content-carousel__content-slide swiper-slide">
<div class="c-content-carousel__content-slide-inner">
<p class="c-content-carousel__slide-eyebrow f-text--tag f-upper">Workshop</p>
<h3 class="c-content-carousel__slide-title f-title--h4">Paleo playdates</h3>
<p class="c-content-carousel__slide-desc f-text--small">Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.</p>
<a href="" class="c-content-carousel__slide-link o-btn o-btn--expanding-arrow">
Read more
<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 class="u-sr-only">
<img src="/images/homepage/dino-kid.jpg" alt="Child playing with dinosaur toy" />
</div>
</div>
</div>
<div class="c-content-carousel__content-slide swiper-slide">
<div class="c-content-carousel__content-slide-inner">
<h3 class="c-content-carousel__slide-title f-title--h4">Item Name</h3>
<p class="c-content-carousel__slide-desc f-text--small">Brief description. Nullam iaculis ex dui, et lobortis purus blandit sed. Nam non sapien imperdiet lorem accumsan volutpat at et quam dolor quis.</p>
<p class="c-content-carousel__slide-credit f-text--credit">Image credit: Lorem ipsum dolor</p>
<p class="c-content-carousel__slide-status-title">YYYY</p>
<p class="c-content-carousel__slide-status-text">Source information goes here</p>
<div class="u-sr-only">
<img src="/images/homepage/beetle.jpg" alt="Multiple rows of beetles" />
</div>
</div>
</div>
</div>
<div class="c-content-carousel__slides-nav swiper-button-row">
<button class="swiper-button-prev o-btn o-btn--round o-btn--round--on-dark">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center o-btn__icon-180" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
<button class="swiper-button-next o-btn o-btn--round o-btn--round--on-dark">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
{% set idAttr = id is defined ? 'id="' ~ id ~ '"' : '' %}
<div {{ idAttr }} class="c-content-carousel" data-bkg-theme="base">
<div class="o-container">
<div class="o-row">
<div class="c-content-carousel__header o-col o-col-sm-8 js-watch u-watch--fade-up">
<h2 class="c-content-carousel__title f-title--h3">{{ title }}</h2>
{% if description %}
<p class="c-content-carousel__description f-text--reg">{{ description }}
{% endif %}
</div>
</div>
</div>
<div class="c-content-carousel__slides o-container js-watch u-watch--fade-up">
<div class="c-content-carousel__slides-stage">
<div class="c-content-carousel__image-slides-stage swiper-container" aria-hidden="true">
<div class="c-content-carousel__image-slides swiper-wrapper">
{% for slide in slides %}
<div class="c-content-carousel__image-slide swiper-slide">
{{ slide.image|raw }}
</div>
{% endfor %}
</div>
</div>
<div class="c-content-carousel__content-slides-stage swiper-container">
<div class="c-content-carousel__content-slides swiper-wrapper">
{% for slide in slides %}
<div class="c-content-carousel__content-slide swiper-slide">
<div class="c-content-carousel__content-slide-inner">
{% if slide.eyebrow %}
<p class="c-content-carousel__slide-eyebrow f-text--tag f-upper">{{ slide.eyebrow }}</p>
{% endif %}
<h3 class="c-content-carousel__slide-title f-title--h4">{{ slide.title }}</h3>
<p class="c-content-carousel__slide-desc f-text--small">{{ slide.description }}</p>
{% if slide.imageCredit %}
<p class="c-content-carousel__slide-credit f-text--credit">{{ slide.imageCredit }}</p>
{% endif %}
{% if slide.statusTitle %}
<p class="c-content-carousel__slide-status-title">{{ slide.statusTitle }}</p>
{% endif %}
{% if slide.statusText %}
<p class="c-content-carousel__slide-status-text">{{ slide.statusText }}</p>
{% endif %}
{% if slide.ctaTitle and slide.ctaLink %}
<a href="{{ ctaLink }}" class="c-content-carousel__slide-link o-btn o-btn--expanding-arrow">
{{ slide.ctaTitle }}
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</a>
{% endif %}
<div class="u-sr-only">
{{ slide.image|raw }}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="c-content-carousel__slides-nav swiper-button-row">
<button class="swiper-button-prev o-btn o-btn--round o-btn--round--on-dark">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center o-btn__icon-180" aria-hidden="true">{% include "03/icons/arrow-slider" %}</span>
</button>
<button class="swiper-button-next o-btn o-btn--round o-btn--round--on-dark">
<span class="u-sr-only">Next</span>
<span class="o-btn__icon-center" aria-hidden="true">{% include "03/icons/arrow-slider" %}</span>
</button>
</div>
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "At the Academy",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Mauris id consequat sem. Praesent vulputate ipsum at metus sodales.",
"slides": [
{
"eyebrow": "Workshop",
"title": "Paleo playdates",
"description": "Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.",
"image": "<img src=\"/images/homepage/dino-kid.jpg\" alt=\"Child playing with dinosaur toy\" />",
"ctaTitle": "Read more",
"ctaLink": "#"
},
{
"title": "Item Name",
"description": "Brief description. Nullam iaculis ex dui, et lobortis purus blandit sed. Nam non sapien imperdiet lorem accumsan volutpat at et quam dolor quis.",
"image": "<img src=\"/images/homepage/beetle.jpg\" alt=\"Multiple rows of beetles\" />",
"imageCredit": "Image credit: Lorem ipsum dolor",
"statusTitle": "YYYY",
"statusText": "Source information goes here"
},
{
"eyebrow": "Workshop",
"title": "Paleo playdates",
"description": "Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.",
"image": "<img src=\"/images/homepage/dino-kid.jpg\" alt=\"Child playing with dinosaur toy\" />",
"ctaTitle": "Read more",
"ctaLink": "#"
},
{
"title": "Item Name",
"description": "Brief description. Nullam iaculis ex dui, et lobortis purus blandit sed. Nam non sapien imperdiet lorem accumsan volutpat at et quam dolor quis.",
"image": "<img src=\"/images/homepage/beetle.jpg\" alt=\"Multiple rows of beetles\" />",
"imageCredit": "Image credit: Lorem ipsum dolor",
"statusTitle": "YYYY",
"statusText": "Source information goes here"
}
]
}
.c-content-carousel {
margin: 2rem 0;
overflow: hidden;
@include break($sm){
margin: 22.1rem 0 15.7rem 0;
}
& + [data-bkg-theme="light"] {
margin-top: -15.7rem !important;
}
}
.c-content-carousel__header {
margin-bottom: 4.4rem;
}
.c-content-carousel__description {
margin-top: 1.2rem;
max-width: 70rem;
}
.c-content-carousel__slides-stage {
position: relative;
display: flex;
flex-direction: column-reverse;
@include break($md) {
width: 100%;
flex-direction: row-reverse;
}
}
.c-content-carousel__content-slides-stage {
background-color: var(--ct-dark);
color: var(--ct-text-on-dark);
max-width: calc(100% + 6.4rem);
margin-left: -3.2rem;
margin-right: -3.2rem;
position: relative;
overflow: visible;
&:before {
content: '';
display: block;
background: var(--ct-dark);
width: 200vw;
position: absolute;
top: 0;
bottom: 0;
left: -20%;
}
@include break($md) {
width: 40%;
flex: 0 0 40%;
max-width: 40%;
margin-left: 0;
margin-right: 0;
&:before {
display: none;
}
}
@include break($lg) {
width: 30%;
flex: 0 0 30%;
max-width: 30%;
}
}
.c-content-carousel__content-slide {
display: flex;
align-items: flex-end;
}
.c-content-carousel__content-slide-inner {
padding: 4.8rem 3.2rem 3.2rem;
@include break($md) {
padding: 12rem 6.2rem 5.6rem;
}
}
.c-content-carousel__image-slides-stage {
max-width: calc(100% + 6.4rem);
margin-left: -3.2rem;
margin-right: -3.2rem;
@include break($md) {
width: 60%;
flex: 0 0 60%;
max-width: 60%;
margin-left: 0;
margin-right: 0;
}
@include break($lg) {
width: 70%;
flex: 0 0 70%;
max-width: 70%;
}
&.swiper-container {
overflow: visible;
}
}
.c-content-carousel__image-slide {
background-color: var(--ct-dark);
max-height: 60rem;
height: 80vh;
@include break($md) {
max-height: 80rem;
height: 90vh;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
margin-left: auto;
}
}
.c-content-carousel__slide-eyebrow {
margin-bottom: 1.2rem;
}
.c-content-carousel__slide-desc {
margin-top: 1.6rem;
}
.c-content-carousel__slide-credit {
margin-top: 1.6rem;
}
.c-content-carousel__slide-status-title {
margin-top: 3.2rem;
font-weight: $f-bold;
font-size: 1.4rem;
line-height: 1.2;
@include break($md) {
margin-top: 20%;
}
}
.c-content-carousel__slide-status-text {
margin-top: 0.7rem;
font-size: 1.2rem;
line-height: 1.2;
}
.c-content-carousel__slide-link {
margin-top: 3.2rem;
@include break($md) {
margin-top: 28%;
}
}
.c-content-carousel__slides-nav {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
right: 3.2rem;
bottom: 3.2rem;
@include break($md) {
top: 5.4rem;
left: 6.2rem;
right: auto;
bottom: auto;
}
}
No notes defined.