<!-- Card Group -->
<div class="card_group theme_site_theme theme_accent">
<div class="card_group_background">
<img class="card_group_background_image" src="/images/demo-squiggle.png">
</div>
<div class="card_group_header">
<div class="fs-row">
<div class="fs-cell">
<div class="card_group_header_inner">
<h2 class="card_group_title">Card Group Headline</h2>
<div class="card_group_description">
<p>Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
</div>
</div>
</div>
</div>
</div>
<div class="card_group_body">
<div class="fs-row">
<div class="fs-cell">
<div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"loop":false,"slidesToScroll":1,"align":"center","breakpoints":{"(min-width: 980px)":{"active":false}}}'>
<div id="card-group-viewport-1" class="embla__viewport js-carousel-embla-viewport">
<ul class="card_group_items embla__container js-carousel-embla-container" aria-label="Card Group Headline">
<li class="card_group_item embla__slide">
<div class="card_group_item_body">
<h3 class="card_group_item_title">
<span class="card_group_item_title_label">Ornare Egestas</span>
</h3>
<figure class="card_group_item_figure">
<img class="card_group_item_image" srcset="https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" sizes="(min-width: 1400px) 375px, (min-width: 1220px) 320px, (min-width: 980px) calc(-2.27vw + 271px), (min-width: 780px) 657px, (min-width: 360px) calc(94.5vw - 77px), 244px" src="https://images.fastspot.com/generic/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_group_item_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.</p>
</div>
</div>
</li>
<li class="card_group_item embla__slide">
<div class="card_group_item_body">
<h3 class="card_group_item_title">
<span class="card_group_item_title_label">Ipsum Dolor Sit Amet</span>
</h3>
<figure class="card_group_item_figure">
<img class="card_group_item_image" srcset="https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" sizes="(min-width: 1400px) 375px, (min-width: 1220px) 320px, (min-width: 980px) calc(-2.27vw + 271px), (min-width: 780px) 657px, (min-width: 360px) calc(94.5vw - 77px), 244px" src="https://images.fastspot.com/generic/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_group_item_description">
<p>Donec ullamcorper nulla non metus auct. Praesent eget est sed ex pretium fringilla. <a href="#">Vivamus ac turpis</a> porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
<li class="card_group_item embla__slide">
<div class="card_group_item_body">
<h3 class="card_group_item_title">
<span class="card_group_item_title_label">Praesent Eget Est</span>
</h3>
<figure class="card_group_item_figure">
<img class="card_group_item_image" srcset="https://images.fastspot.com/generic/740x494/3 740w, https://images.fastspot.com/generic/500x334/3 500w, https://images.fastspot.com/generic/300x200/3 300w" sizes="(min-width: 1400px) 375px, (min-width: 1220px) 320px, (min-width: 980px) calc(-2.27vw + 271px), (min-width: 780px) 657px, (min-width: 360px) calc(94.5vw - 77px), 244px" src="https://images.fastspot.com/generic/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_group_item_description">
<p>Vivamus ac turpis quis eros consectetur ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla.</p>
</div>
</div>
</li>
</ul>
</div>
<div class="card_group_controls embla__controls" aria-controls="card-group-viewport-1">
<div class="embla__dots js-carousel-embla-dots"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
{#
{% include '@component-card-group' with {
title: 'Title',
description: 'Description',
items: [
{
image: '1',
title: 'Item Title',
description: 'Item Description'
}
]
} %}
#}
{% set carousel_json = {
loop: false,
slidesToScroll: 1,
align: 'center',
breakpoints: {
'(min-width: 980px)': { active: false }
}
}|json_encode %}
{% set uuid_viewport = uniqid("card-group-viewport") %}
<!-- Card Group -->
<div class="card_group theme_site_theme theme_accent">
{% if background %}
<div class="card_group_background">
<img class="card_group_background_image" src="{{ background }}">
</div>
{% endif %}
{% if title or description %}
<div class="card_group_header">
<div class="fs-row">
<div class="fs-cell">
<div class="card_group_header_inner">
{% if title %}
<h2 class="card_group_title">{{ title }}</h2>
{% endif %}
{% if description %}
<div class="card_group_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="card_group_body">
<div class="fs-row">
<div class="fs-cell">
<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_group_items embla__container js-carousel-embla-container" {% if title %} aria-label="{{ title }}" {% endif %}>
{% for item in items %}
<li class="card_group_item embla__slide">
<div class="card_group_item_body">
{% if item.title %}
<h3 class="card_group_item_title">
<span class="card_group_item_title_label">{{ item.title }}</span>
</h3>
{% endif %}
<figure class="card_group_item_figure">
{% include '@partial-image' with {
class: 'card_group_item',
alt: item.alt,
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'sml',
sizes: [
'(min-width: 1400px) 375px',
'(min-width: 1220px) 320px',
'(min-width: 980px) calc(-2.27vw + 271px)',
'(min-width: 780px) 657px',
'(min-width: 360px) calc(94.5vw - 77px)',
'244px',
]
} %}
</figure>
<div class="card_group_item_description">
<p>{{ item.description }}</p>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="card_group_controls embla__controls" aria-controls="{{ uuid_viewport }}">
<div class="embla__dots js-carousel-embla-dots"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
No notes defined.