<!-- Card Group -->
<div class="js-anim card_group component_theme_plum_gem">
<div class="js-card-row card_group_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="card_group_items" aria-label="Headline">
<li class="card_group_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/4 980w, https://images.fastspot.com/jhusoe/740x494/4 740w, https://images.fastspot.com/jhusoe/500x334/4 500w, https://images.fastspot.com/jhusoe/300x200/4 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</li>
<li class="card_group_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/5 980w, https://images.fastspot.com/jhusoe/740x494/5 740w, https://images.fastspot.com/jhusoe/500x334/5 500w, https://images.fastspot.com/jhusoe/300x200/5 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/5" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</li>
<li class="card_group_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/6 980w, https://images.fastspot.com/jhusoe/740x494/6 740w, https://images.fastspot.com/jhusoe/500x334/6 500w, https://images.fastspot.com/jhusoe/300x200/6 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/6" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</li>
<li class="card_group_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/8 980w, https://images.fastspot.com/jhusoe/740x494/8 740w, https://images.fastspot.com/jhusoe/500x334/8 500w, https://images.fastspot.com/jhusoe/300x200/8 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/8" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</li>
</ul>
</div>
</div>
</div>
<div class="card_group_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "Headline", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/4 980w, https://images.fastspot.com/jhusoe/740x494/4 740w, https://images.fastspot.com/jhusoe/500x334/4 500w, https://images.fastspot.com/jhusoe/300x200/4 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/5 980w, https://images.fastspot.com/jhusoe/740x494/5 740w, https://images.fastspot.com/jhusoe/500x334/5 500w, https://images.fastspot.com/jhusoe/300x200/5 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/5" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/6 980w, https://images.fastspot.com/jhusoe/740x494/6 740w, https://images.fastspot.com/jhusoe/500x334/6 500w, https://images.fastspot.com/jhusoe/300x200/6 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/6" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/8 980w, https://images.fastspot.com/jhusoe/740x494/8 740w, https://images.fastspot.com/jhusoe/500x334/8 500w, https://images.fastspot.com/jhusoe/300x200/8 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/8" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination card_group_carousel_pagination"></div>
</div>
</div>
<!-- END: Card Group -->
{#
{% include '@component-card-group' with {
theme: 'theme',
group_title: 'Title',
group_title_visible: true,
group_description: 'Description',
cards: [
{
card_type: 'solution',
item: {
}
}
]
} %}
#}
<!-- Card Group -->
<div class="js-anim card_group component_theme_{{ theme ?: 'white' }}">
{% if group_title_visible == true %}
<div class="card_group_header">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<div class="card_group_header_inner">
<h2 class="card_group_title">{{ group_title }}</h2>
{% if group_description %}
<div class="card_group_description">
<p>{{ group_description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="js-card-row card_group_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="card_group_items" aria-label="{{ group_title }}">
{% for card in cards %}
<li class="card_group_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="card_group_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "{{ group_title }}", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
{% for card in cards %}
<div class="carousel_row_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
{% endfor %}
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination card_group_carousel_pagination"></div>
</div>
</div>
<!-- END: Card Group -->
No notes defined.