<div class="c-user-guided-carousel" data-bkg-theme="dark">
<div class="o-container">
<div class="c-user-guided-carousel__header o-row">
<div class="c-user-guided-carousel__text o-col o-col-sm-6 o-col-sm-md-8">
<h2 id="user-guided-carousel-636" class="u-sr-only">Explore articles by topic</h2>
<label for="user-guided-carousel-select-351" class="c-user-guided-carousel__title f-title--h3">I want to learn more about</label>
<div class="c-user-guided-carousel__select">
<select id="user-guided-carousel-select-351" class="js-ugc-select js-fancy-select f-lower">
<option class="f-title--h5 f-lower" value="climate_change">climate change</option>
<option class="f-title--h5 f-lower" value="water_conservation">water conservation</option>
<option class="f-title--h5 f-lower" value="enviornmental_justice">enviornmental justice</option>
<option class="f-title--h5 f-lower" value="wild">wild</option>
<option class="f-title--h5 f-lower" value="foxes">foxes</option>
<option class="f-title--h5 f-lower" value="dragon">dragon</option>
<option class="f-title--h5 f-lower" value="enviornmental_justice2">enviornmental justice 2</option>
<option class="f-title--h5 f-lower" value="enviornmental_justice3">enviornmental justice 3</option>
<option class="f-title--h5 f-lower" value="enviornmental_justice4">enviornmental justice 4</option>
<option class="f-title--h5 f-lower" value="enviornmental_justice5">enviornmental justice 5</option>
</select>
<span class="c-user-guided-carousel__select-icon"><svg width="24" height="10" viewbox="0 0 24 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M1 1L12 12L23 1" />
</svg>
</span>
</div>
</div>
<div class="c-user-guided-carousel__cta-wrapper o-col o-col-sm-6 o-col-sm-md-4">
<a href="explore the journal" class="c-user-guided-carousel__cta o-btn o-btn--expanding-arrow">
explore the journal
<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 class="c-user-guided-carousel__results o-row">
<div class="c-user-guided-carousel__first-card o-col o-col-sm-6 o-col-sm-md-8 js-watch u-watch--img-shrink">
<div class="c-user-guided-carousel__card-main-card">
<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--h4">
<span class="u-hover-drawline">Talking climate change with peers</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.</p>
</div>
<div class="o-card__img">
<img src="/images/homepage/climatechangewithpeers.jpeg" alt="image of woman in a lake" />
</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>
</ul>
</div>
</div>
</div>
<div class="c-user-guided-carousel__second-row o-col o-col-sm-6 o-col-sm-md-4">
<div class="c-user-guided-carousel__card js-watch u-watch--img-shrink">
<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">Talking climate change with peers</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.</p>
</div>
<div class="o-card__img">
<img src="/images/homepage/climatechangewithpeers.jpeg" alt="image of woman in a lake" />
</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>
</ul>
</div>
</div>
<div class="c-user-guided-carousel__card js-watch u-watch--img-shrink">
<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">Talking climate change with peers</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.</p>
</div>
<div class="o-card__img">
<img src="/images/homepage/climatechangewithpeers.jpeg" alt="image of woman in a lake" />
</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>
</ul>
</div>
</div>
<div class="c-user-guided-carousel__card js-watch u-watch--img-shrink">
<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">Talking climate change with peers</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.</p>
</div>
<div class="o-card__img">
<img src="/images/homepage/climatechangewithpeers.jpeg" alt="image of woman in a lake" />
</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>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'user-guided-carousel-' ~ random(5000) %}
{% set selectID = 'user-guided-carousel-select-' ~ random(5000) %}
{% set idAttr = id is defined ? 'id="' ~ id ~ '"' : '' %}
<div {{ idAttr }} class="c-user-guided-carousel" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<div class="c-user-guided-carousel__header o-row">
<div class="c-user-guided-carousel__text o-col o-col-sm-6 o-col-sm-md-8">
<h2 id="{{ hID }}" class="u-sr-only">Explore articles by topic</h2>
<label for="{{ selectID }}" class="c-user-guided-carousel__title f-title--h3">{{ title }}</label>
<div class="c-user-guided-carousel__select">
<select id="{{ selectID }}" class="js-ugc-select js-fancy-select f-lower">
{% for topic in topics %}
<option class="f-title--h5 f-lower" value="{{ topic.value }}">{{ topic.title }}</option>
{% endfor %}
</select>
<span class="c-user-guided-carousel__select-icon">{% include '03-icons/down-carrat' %}</span>
</div>
</div>
{% if primaryCtaLink %}
<div class="c-user-guided-carousel__cta-wrapper o-col o-col-sm-6 o-col-sm-md-4">
<a href="{{ primaryCtaLink }}" class="c-user-guided-carousel__cta o-btn o-btn--expanding-arrow">
{{ primaryCtaTitle }}
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</a>
</div>
{% endif %}
</div>
<div class="c-user-guided-carousel__results o-row">
<div class="c-user-guided-carousel__first-card o-col o-col-sm-6 o-col-sm-md-8 js-watch u-watch--img-shrink">
{% set cardData = cards|first %}
{% set firstClass = loop.first ? 'c-user-guided-carousel__card--first' : '' %}
<div class="c-user-guided-carousel__card-main-card">
{% include '05-objects/card' with cardData %}
</div>
</div>
<div class="c-user-guided-carousel__second-row o-col o-col-sm-6 o-col-sm-md-4">
{% for card in cards %}
{% if not loop.first %}
<div class="c-user-guided-carousel__card js-watch u-watch--img-shrink">
{% include '05-objects/card' with cardData|merge({hSize: 'small'}) %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "I want to learn more about",
"panelColorTheme": "dark",
"topics": [
{
"title": "climate change",
"value": "climate_change"
},
{
"title": "water conservation",
"value": "water_conservation"
},
{
"title": "enviornmental justice",
"value": "enviornmental_justice"
},
{
"title": "wild",
"value": "wild"
},
{
"title": "foxes",
"value": "foxes"
},
{
"title": "dragon",
"value": "dragon"
},
{
"title": "enviornmental justice 2",
"value": "enviornmental_justice2"
},
{
"title": "enviornmental justice 3",
"value": "enviornmental_justice3"
},
{
"title": "enviornmental justice 4",
"value": "enviornmental_justice4"
},
{
"title": "enviornmental justice 5",
"value": "enviornmental_justice5"
}
],
"primaryCtaTitle": "explore the journal",
"primaryCtaLink": "explore the journal",
"cards": [
{
"title": "Talking climate change with peers",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
"image": "<img src=\"/images/homepage/climatechangewithpeers.jpeg\" alt=\"image of woman in a lake\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
}
]
},
{
"title": "Using insects to track climate change",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
"image": "<img src=\"/images/homepage/InsectsToTrack.jpg\" alt=\"image of woman collecting insects\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"title": "Voting for the environment",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
"image": "<img src=\"/images/homepage/creek.png\" alt=\"image of creek\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
}
]
},
{
"title": "Four ways to cut your carbon",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
"image": "<img src=\"/images/homepage/Keller.jpg\" alt=\"image of bout on the lake\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
}
]
}
]
}
.c-user-guided-carousel {
margin: 6rem 0;
@include break($sm) {
margin: 16.4rem 0 16.4rem;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 6rem 0;
@include break($sm) {
margin: 0;
padding: 16.4rem 0 16.4rem;
}
}
}
.c-user-guided-carousel__title {
margin-bottom: 2rem;
}
.c-user-guided-carousel__header {
align-items: flex-end;
margin-bottom: 5rem;
}
.c-user-guided-carousel__cta-wrapper {
margin-top: 2.4rem;
@include break($sm) {
margin-top: 0;
text-align: right;
}
}
.c-user-guided-carousel__cta {
display: inline-flex;
align-items: center;
span {
display: block;
margin-left: 1.2rem;
}
svg {
display: block;
}
}
.c-user-guided-carousel__select {
position: relative;
max-width: 68rem;
border-bottom: 0.2rem solid var(--ct-txt);
}
.c-user-guided-carousel__select-icon {
position: absolute;
right: 0;
top: 50%;
margin-top: 0.5rem;
transition: transform 0.2s ease-in-out;
transform-style: preserve-3d;
.choices.is-open + & {
transform: rotateX(180deg);
}
svg {
display: block;
stroke-width: 0.2rem;
}
}
.c-user-guided-carousel__card {
margin-bottom: 5rem;
&:last-child {
margin-bottom: 0;
}
}
.c-user-guided-carousel__card-main-card {
margin-bottom: 5rem;
@include break($sm) {
position: sticky;
top: 2rem;
margin-bottom: 0;
}
}
.c-user-guided-carousel__select .choices {
.choices__list {
max-height: 30rem;
}
.choices__list--single {
background: none;
padding: 0;
}
.choices__list--single {
background-color: transparent;
color: inherit;
padding: 0;
font-size: 3.2rem;
@include break($sm) {
font-size: 5.4rem;
}
}
.choices__list {
text-decoration: none;
}
.choices__item {
text-transform: lowercase;
&.is-selected {
text-decoration: underline;
&:after {
display: none;
}
}
}
.choices__list--dropdown {
.choices__list {
overflow: auto;
}
.choices__item {
background-color: transparent;
color: var(--ct-dark);
@include title--h5;
&:hover {
background-color: $c-white;
text-decoration: none;
}
}
}
.c-user-guided-carousel[data-bkg-theme="light"] & {
.choices__list--dropdown {
background-color: var(--ct-dark);
.choices__item {
color: var(--ct-text-on-dark);
&:hover {
color: var(--ct-dark);
}
}
}
}
}
No notes defined.