<div class="card_carousel">
<div class="section_header card_carousel_header">
<div class="fs-row">
<div class="fs-cell">
<div class="section_header_inner">
<div class="section_header_content">
<h2 class="section_header_title">Research & Impact</h2>
<p class="section_header_description">Lorem ipsum dolor sit amet consectetur. Sodales tristique dui pulvinar tellus porta. Vel at tempus nunc vitae.</p>
</div>
<div class="section_header_link_wrapper">
<a href="#" class="button button_shadow section_header_link theme_accent" aria-label="Link Aria">
<span class="button_inner section_header_link_inner">
<span class="button_label section_header_link_label">Learn More</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="fs-row">
<div class="fs-cell">
<div class="card_carousel_content">
<div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"loop":false,"slidesToScroll":1,"align":"start"}'>
<div id="card-carousel-viewport-1" class="embla__viewport js-carousel-embla-viewport">
<ul class="card_carousel_list embla__container js-carousel-embla-container">
<li class="card_carousel_item embla__slide">
<div class="card_carousel_card">
<div class="card_carousel_card_icon">
<svg class="icon icon_building">
<use href="/images/icons.svg#building" />
</svg>
</div>
<h2 class="card_carousel_card_title">
<a href="#" class="card_carousel_card_link">
Focus Areas
</a>
</h2>
<p class="card_carousel_card_description">Lorem ipsum dolor sit amet consectetur. Sed mi blandit id magna. Tellus enim morbi gravida in phasellus. A faucibus augue rhoncus cursus erat aliquet porttitor.</p>
</div>
</li>
<li class="card_carousel_item embla__slide">
<div class="card_carousel_card">
<div class="card_carousel_card_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<h2 class="card_carousel_card_title">
<a href="#" class="card_carousel_card_link">
Resources
</a>
</h2>
<p class="card_carousel_card_description">Sed interdum pulvinar neque vitae iaculis. Maecenas facilisis nisl eget sem convallis, quis mollis ligula posuere. Maecenas ullamcorper orci sit.</p>
</div>
</li>
<li class="card_carousel_item embla__slide">
<div class="card_carousel_card">
<div class="card_carousel_card_icon">
<svg class="icon icon_jh_cookie">
<use href="/images/icons.svg#jh_cookie" />
</svg>
</div>
<h2 class="card_carousel_card_title">
<a href="#" class="card_carousel_card_link">
Projects
</a>
</h2>
<p class="card_carousel_card_description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus tempor nisl massa, in molestie lacus dictum sed. Duis tincidunt mattis feugiat. Fusce porta viverra vehicula.</p>
</div>
</li>
<li class="card_carousel_item embla__slide">
<div class="card_carousel_card">
<div class="card_carousel_card_icon">
<svg class="icon icon_building">
<use href="/images/icons.svg#building" />
</svg>
</div>
<h2 class="card_carousel_card_title">
<a href="#" class="card_carousel_card_link">
Focus Areas
</a>
</h2>
<p class="card_carousel_card_description">Lorem ipsum dolor sit amet consectetur. Sed mi blandit id magna. Tellus enim morbi gravida in phasellus. A faucibus augue rhoncus cursus erat aliquet porttitor.</p>
</div>
</li>
<li class="card_carousel_item embla__slide">
<div class="card_carousel_card">
<div class="card_carousel_card_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<h2 class="card_carousel_card_title">
<a href="#" class="card_carousel_card_link">
Resources
</a>
</h2>
<p class="card_carousel_card_description">Sed interdum pulvinar neque vitae iaculis. Maecenas facilisis nisl eget sem convallis, quis mollis ligula posuere. Maecenas ullamcorper orci sit.</p>
</div>
</li>
<li class="card_carousel_item embla__slide">
<div class="card_carousel_card">
<div class="card_carousel_card_icon">
<svg class="icon icon_jh_cookie">
<use href="/images/icons.svg#jh_cookie" />
</svg>
</div>
<h2 class="card_carousel_card_title">
<a href="#" class="card_carousel_card_link">
Projects
</a>
</h2>
<p class="card_carousel_card_description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus tempor nisl massa, in molestie lacus dictum sed. Duis tincidunt mattis feugiat. Fusce porta viverra vehicula.</p>
</div>
</li>
</ul>
</div>
<div class="card_carousel_controls embla__controls" aria-controls="card-carousel-viewport-1">
<button class="button button_shadow theme_default embla__button embla__button--prev js-carousel-embla-btn-prev" type="button" aria-label="Previous Slide">
<span class="embla__button-icon"></span>
</button>
<button class="button button_shadow theme_default embla__button embla__button--next js-carousel-embla-btn-next" type="button" aria-label="Next Slide">
<span class="embla__button-icon"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{#
{% include '@component-card-carousel' with {
title: 'Title',
description: 'Description',
link: {
url: '#',
title: 'Link Title',
target: '_blank',
aria: '',
}
cards: [
{
url: '#',
icon: 'icon',
title: 'Card Title',
description: 'Description',
}
]
} %}
#}
{% set carousel_json = {
loop: false,
slidesToScroll: 1,
align: 'start',
}|json_encode %}
{% set uuid_viewport = uniqid("card-carousel-viewport") %}
<div class="card_carousel">
{% include "@partial-section-header" with {
class: 'card_carousel_header',
title: title,
description: description,
link: link,
} %}
<div class="fs-row">
<div class="fs-cell">
<div class="card_carousel_content">
<div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{{ carousel_json }}'>
<div
id="{{ uuid_viewport }}"
class="embla__viewport js-carousel-embla-viewport"
>
<ul class="card_carousel_list embla__container js-carousel-embla-container">
{% for item in cards %}
<li class="card_carousel_item embla__slide">
<div class="card_carousel_card">
{% if item.icon %}
<div class="card_carousel_card_icon">
{{ icon(item.icon) }}
</div>
{% endif %}
<h2 class="card_carousel_card_title">
{% if item.url %}
<a href="{{ item.url }}" class="card_carousel_card_link">
{% endif %}
{{ item.title }}
{% if item.url %}
</a>
{% endif %}
</h2>
{% if item.description %}
<p class="card_carousel_card_description">{{ item.description }}</p>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="card_carousel_controls embla__controls" aria-controls="{{ uuid_viewport }}">
<button class="button button_shadow theme_default embla__button embla__button--prev js-carousel-embla-btn-prev" type="button" aria-label="Previous Slide">
<span class="embla__button-icon"></span>
</button>
<button class="button button_shadow theme_default embla__button embla__button--next js-carousel-embla-btn-next" type="button" aria-label="Next Slide">
<span class="embla__button-icon"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.