<!-- Expressive Gallery -->
<div class="js-anim expressive_gallery component_theme_white">
<div class="expressive_gallery_header">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<div class="expressive_gallery_header_inner">
<h2 class="expressive_gallery_title">Lorem Ipsum Headline</h2>
</div>
</div>
</div>
</div>
<div class="expressive_gallery_carousel">
<div class="js-slick-row carousel_row" data-slick='{
"regionLabel": "Lorem Ipsum Headline",
"arrows": true,
"arrowsPlacement": "beforeSlides",
"dots": true,
"infinite": false,
"variableWidth": true,
"slidesToShow": 2,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 1024,
"settings": {
"slidesToShow": 2,
"slidesToScroll": 1
}
},
{
"breakpoint": 740,
"settings": {
"slidesToShow": 1,
"slidesToScroll": 1
}
}
]
}'>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_expressive_wide card_type_default theme_green_gem">
<div class="card_inner card_expressive_wide_inner">
<div class="card_expressive_wide_grid">
<div class="card_expressive_wide_media">
<figure class="card_expressive_wide_figure">
<img class="card_expressive_wide_image" srcset="https://images.fastspot.com/jhusoe/1220x814/4 1220w, 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) 648px, (min-width: 1220px) 568px, (min-width: 980px) 454px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_expressive_wide_body">
<p class="card_expressive_wide_caption">Henderson-Hopkins’ Safe Center for Online Learning was a vital resource for kids whose parents could not work remotely.</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_expressive_descriptive card_type_default theme_blue_gem">
<div class="card_inner card_expressive_descriptive_inner">
<div class="card_expressive_descriptive_grid">
<div class="card_expressive_descriptive_media">
<figure class="card_expressive_descriptive_figure">
<img class="card_expressive_descriptive_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 class="card_expressive_descriptive_body">
<span class="card_expressive_descriptive_caption">Photo Credit Jane Doe</span>
<p class="card_expressive_descriptive_description">Description of the new facilities dolor sit amet consectetur. Netus interdum sed tincidunt pharetra odio a purus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_expressive_wide card_type_default theme_purple_gem">
<div class="card_inner card_expressive_wide_inner">
<div class="card_expressive_wide_grid">
<div class="card_expressive_wide_media">
<figure class="card_expressive_wide_figure">
<img class="card_expressive_wide_image" srcset="https://images.fastspot.com/jhusoe/1220x814/6 1220w, 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) 648px, (min-width: 1220px) 568px, (min-width: 980px) 454px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/6" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_expressive_wide_body">
<p class="card_expressive_wide_caption">Henderson-Hopkins’ Safe Center for Online Learning was a vital resource for kids whose parents could not work remotely.</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_expressive_descriptive card_type_default theme_orange_gem">
<div class="card_inner card_expressive_descriptive_inner">
<div class="card_expressive_descriptive_grid">
<div class="card_expressive_descriptive_media">
<figure class="card_expressive_descriptive_figure">
<img class="card_expressive_descriptive_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 class="card_expressive_descriptive_body">
<span class="card_expressive_descriptive_caption"></span>
<p class="card_expressive_descriptive_description">Description of the new facilities dolor sit amet consectetur. Netus interdum sed tincidunt pharetra odio a purus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
<div class="carousel_row_card">
<!-- Expressive Image Card -->
<div class="card card_expressive_image card_type_default theme_">
<div class="card_inner card_expressive_image_inner">
<div class="card_expressive_image_grid">
<div class="card_expressive_image_media">
<figure class="card_expressive_image_figure">
<img class="card_expressive_image_image" srcset="https://images.fastspot.com/jhusoe/735x980/9 735w, https://images.fastspot.com/jhusoe/555x740/9 555w, https://images.fastspot.com/jhusoe/375x500/9 375w, https://images.fastspot.com/jhusoe/225x300/9 225w" sizes="(min-width: 1394px) 404px, (min-width: 1220px) 252px, (min-width: 980px) 282px, (min-width: 740px) 212px, 90vw" src="https://images.fastspot.com/jhusoe/225x300/9" alt="" loading="lazy" width="225" height="300">
</figure>
<div class="card_expressive_image_body">
<p class="card_expressive_image_caption">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</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: Expressive Gallery -->
{#
{% include '@component-expressive-gallery' with {
theme: 'theme',
group_title: 'Title',
group_title_visible: true,
group_description: 'Description',
cards: [
{
card_type: 'solution',
item: {
}
}
]
} %}
#}
<!-- Expressive Gallery -->
<div class="js-anim expressive_gallery component_theme_{{ theme ?: 'white' }}">
{% if group_title_visible == true %}
<div class="expressive_gallery_header">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<div class="expressive_gallery_header_inner">
<h2 class="expressive_gallery_title">{{ group_title }}</h2>
{% if group_description %}
<div class="expressive_gallery_description">
<p>{{ group_description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="expressive_gallery_carousel">
<div
class="js-slick-row carousel_row"
data-slick='{
"regionLabel": "{{ group_title }}",
"arrows": true,
"arrowsPlacement": "beforeSlides",
"dots": true,
"infinite": false,
"variableWidth": true,
"slidesToShow": 2,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 1024,
"settings": {
"slidesToShow": 2,
"slidesToScroll": 1
}
},
{
"breakpoint": 740,
"settings": {
"slidesToShow": 1,
"slidesToScroll": 1
}
}
]
}'>
{% 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: Expressive Gallery -->
No notes defined.