<div class="c-small-content-carousel" data-bkg-theme="">
<div class="o-container c-small-content-carousel__wrapper">
<div class="o-row c-small-content-carousel__header">
<h2 id="small-content-carousel-1133" class="c-small-content-carousel__title f-title--h3 o-col o-col-8">Latest articles </h2>
<div class="c-small-content-carousel__slides-nav swiper-button-row o-col o-col-4">
<button class="swiper-button-prev o-btn o-btn--round">
<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">
<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 class="c-small-content-carousel__slides-wrapper swiper-container">
<ul class="c-small-content-carousel__slides swiper-wrapper" aria-labelledby="small-content-carousel-1133">
<li class="c-small-content-carousel__slide swiper-slide">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">New already-endangered screech owls found</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/owl-on-branch.jpg" alt="owl on branch" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-small-content-carousel__slide swiper-slide">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Celebrating Women’s History Month</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/Wiley_Bioko.jpg" alt="Wiley Bioko" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-small-content-carousel__slide swiper-slide">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">New already-endangered screech owls found</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/Habibata-Sylla.jpg" alt="cliffs" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-small-content-carousel__slide swiper-slide">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">WINS Internships Connect to Active research</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/visit/Carousel_04.jpg" alt="owl on branch" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-small-content-carousel__slide swiper-slide">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Pteropods and climate change</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/visit/Carousel_03.jpg" alt="owl on branch" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'small-content-carousel-' ~ random(5000) %}
{% set hClass = hiddenTitle ? 'u-sr-only' : 'c-small-content-carousel__title f-title--h3 o-col o-col-8' %}
{% set btnColClass = hiddenTitle ? 'o-col-4 o-col--offset-8' : 'o-col-4' %}
<div class="c-small-content-carousel" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container c-small-content-carousel__wrapper">
<div class="o-row c-small-content-carousel__header">
<h2 id="{{ hID }}"class="{{ hClass }}">{{ title }}</h2>
<div class="c-small-content-carousel__slides-nav swiper-button-row o-col {{ btnColClass }}">
<button class="swiper-button-prev o-btn o-btn--round">
<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">
<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 class="c-small-content-carousel__slides-wrapper swiper-container">
<ul class="c-small-content-carousel__slides swiper-wrapper" aria-labelledby="{{ hID }}">
{% for item in items %}
<li class="c-small-content-carousel__slide swiper-slide">
{% include '05-objects/card' with item|merge({hSize: 'small'}) only %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Latest articles ",
"items": [
{
"title": "New already-endangered screech owls found",
"image": "<img src=\"/images/journal/owl-on-branch.jpg\" alt=\"owl on branch\" />",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"title": "Celebrating Women’s History Month",
"image": "<img src=\"/images/journal/Wiley_Bioko.jpg\" alt=\"Wiley Bioko\" />",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"title": "New already-endangered screech owls found",
"image": "<img src=\"/images/journal/Habibata-Sylla.jpg\" alt=\"cliffs\" />",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"title": "WINS Internships Connect to Active research",
"image": "<img src=\"/images/visit/Carousel_04.jpg\" alt=\"owl on branch\" />",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"title": "Pteropods and climate change",
"image": "<img src=\"/images/visit/Carousel_03.jpg\" alt=\"owl on branch\" />",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
}
]
}
.c-small-content-carousel {
overflow: hidden;
margin: 4rem 0;
@include break($sm){
margin: 16.4rem 0;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 4rem 0;
@include break($sm){
margin: 0;
padding: 16.4rem 0;
}
}
}
.c-small-content-carousel__slides-nav {
display: none;
@include break($sm) {
display: flex;
justify-content: flex-end;
}
}
.c-small-content-carousel__header {
margin-bottom: 5rem;
}
.c-small-content-carousel__slides-wrapper {
overflow: visible;
}
.c-small-content-carousel__slide {
flex: 0 0 80%;
@include break($xs) {
flex: 0 0 60%;
}
@include break($sm) {
flex: 0 0 38%;
max-width: 40rem;
}
}
No notes defined.