<!-- Call to Action -->
<div class="cta theme_accent">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_header">
<h2 class="cta_title">Explore Our Programs</h2>
<p class="cta_description">Lorem ipsum dolor sit amet consectetur. Molestie ultrices sit sit viverra in nibh ut. Habitant velit augue at placerat sollicitudin eget.</p>
</div>
<div class="cta_body">
<div class="cta_body_inner">
<div class="cta_carousel_wrapper embla embla__default-controls js-carousel-embla" data-carousel-embla='{"align":"center","watchDrag":true,"containScroll":false,"duration":40,"plugins":["fade"],"breakpoints":{"(min-width: 61.25rem)":{"watchDrag":false}}}'>
<div id="cta-viewport-3" class="cta_carousel_inner embla__viewport js-carousel-embla-viewport">
<ul class="cta_list embla__container js-carousel-embla-container">
<li class="cta_item theme_accent embla__slide">
<div class="cta_item_inner">
<figure class="cta_item_figure cta_item_figure_sm">
<img class="cta_item_image" srcset="https://images.fastspot.com/generic/740x740/1 740w, https://images.fastspot.com/generic/500x500/1 500w, https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" sizes="(min-width: 780px) calc(-4.44vw + 681px), (min-width: 380px) calc(92.89vw - 59px), calc(31.67vw + 161px)" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
</figure>
<div class="cta_item_content">
<h3 class="cta_item_title">Professional Trainings</h3>
<p class="cta_item_description">Lorem ipsum dolor sit amet consectetur. Molestie enim amet elementum vestibulum. Enim nisl aliquet mauris odio lectus. Viverra ut elit neque tristique ullamcorper a quisque vitae dictum.</p>
<a href="#" class="button button_shadow cta_item_link theme_accent_filled">
<span class="button_inner cta_item_link_inner">
<span class="button_label cta_item_link_label">Explore This Option</span>
</span>
</a>
</div>
<figure class="cta_item_figure cta_item_figure_lg">
<img class="cta_item_image" srcset="https://images.fastspot.com/generic/740x740/1 740w, https://images.fastspot.com/generic/500x500/1 500w, https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" sizes="(min-width: 1400px) 627px, (min-width: 1220px) 543px, (min-width: 980px) 456px" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
</li>
<li class="cta_item theme_blue embla__slide">
<div class="cta_item_inner">
<figure class="cta_item_figure cta_item_figure_sm">
<img class="cta_item_image" srcset="https://images.fastspot.com/generic/740x740/2 740w, https://images.fastspot.com/generic/500x500/2 500w, https://images.fastspot.com/generic/300x300/2 300w, https://images.fastspot.com/generic/100x100/2 100w" sizes="(min-width: 780px) calc(-4.44vw + 681px), (min-width: 380px) calc(92.89vw - 59px), calc(31.67vw + 161px)" src="https://images.fastspot.com/generic/100x100/2" alt="" loading="lazy" width="100" height="100">
</figure>
<div class="cta_item_content">
<h3 class="cta_item_title">Suspendisse potenti. Quisque ultrices.</h3>
<p class="cta_item_description">Donec luctus dui sit amet velit cursus, at semper purus.</p>
<a href="#" class="button button_shadow cta_item_link theme_white">
<span class="button_inner cta_item_link_inner">
<span class="button_label cta_item_link_label">A Link Goes Here</span>
</span>
</a>
</div>
<figure class="cta_item_figure cta_item_figure_lg">
<img class="cta_item_image" srcset="https://images.fastspot.com/generic/740x740/2 740w, https://images.fastspot.com/generic/500x500/2 500w, https://images.fastspot.com/generic/300x300/2 300w, https://images.fastspot.com/generic/100x100/2 100w" sizes="(min-width: 1400px) 627px, (min-width: 1220px) 543px, (min-width: 980px) 456px" src="https://images.fastspot.com/generic/100x100/2" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
</li>
<li class="cta_item theme_spirit_blue embla__slide">
<div class="cta_item_inner">
<figure class="cta_item_figure cta_item_figure_sm">
<img class="cta_item_image" srcset="https://images.fastspot.com/generic/740x740/3 740w, https://images.fastspot.com/generic/500x500/3 500w, https://images.fastspot.com/generic/300x300/3 300w, https://images.fastspot.com/generic/100x100/3 100w" sizes="(min-width: 780px) calc(-4.44vw + 681px), (min-width: 380px) calc(92.89vw - 59px), calc(31.67vw + 161px)" src="https://images.fastspot.com/generic/100x100/3" alt="" loading="lazy" width="100" height="100">
</figure>
<div class="cta_item_content">
<h3 class="cta_item_title">Orci varius natoque penatibus et.</h3>
<p class="cta_item_description">Aliquam velit quam, porta non lobortis id, auctor vitae enim. Cras dapibus rutrum ex vitae condimentum. Donec velit erat, rutrum.</p>
<a href="#" class="button button_shadow cta_item_link theme_default">
<span class="button_inner cta_item_link_inner">
<span class="button_label cta_item_link_label">Please Don't Use Text This Long!</span>
</span>
</a>
</div>
<figure class="cta_item_figure cta_item_figure_lg">
<img class="cta_item_image" srcset="https://images.fastspot.com/generic/740x740/3 740w, https://images.fastspot.com/generic/500x500/3 500w, https://images.fastspot.com/generic/300x300/3 300w, https://images.fastspot.com/generic/100x100/3 100w" sizes="(min-width: 1400px) 627px, (min-width: 1220px) 543px, (min-width: 980px) 456px" src="https://images.fastspot.com/generic/100x100/3" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
</li>
</ul>
</div>
<div class="cta_controls embla__controls" aria-controls="cta-viewport-3">
<button class=" embla__button embla__button--prev js-carousel-embla-btn-prev" type="button" aria-label="Previous Slide">
<span class="embla__button-icon"><svg class="icon icon_caret_left">
<use href="/images/icons.svg#caret_left" />
</svg></span>
</button>
<button class=" embla__button embla__button--next js-carousel-embla-btn-next" type="button" aria-label="Next Slide">
<span class="embla__button-icon"><svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
{#
{% include '@component-call-to-action' with {
title: 'Title',
description:
'Description',
items: [
{
title: 'Title',
description: 'Description',
link: {
title: 'Link Text',
url: '#',
target: '',
aria: '',
},
image: '1',
alt: '',
},
]
} %}
#}
{% set carousel_json = {
align: 'center',
watchDrag: true,
containScroll: false,
duration: 40,
plugins: ['fade'],
breakpoints: {
'(min-width: 61.25rem)': { watchDrag: false }
}
}|json_encode %}
{% set themes = [
['accent', 'accent_filled'],
['blue', 'white'],
['spirit_blue', 'default'],
] %}
{% set uuid_viewport = uniqid("cta-viewport") %}
<!-- Call to Action -->
<div class="cta theme_accent">
<div class="fs-row">
<div class="fs-cell">
{% if title or description %}
<div class="cta_header">
{% if title %}
<h2 class="cta_title">{{ title }}</h2>
{% endif %}
{% if description %}
<p class="cta_description">{{ description }}</p>
{% endif %}
</div>
{% endif %}
<div class="cta_body">
<div class="cta_body_inner">
{% if items|length > 1 %}
<div class="cta_carousel_wrapper embla embla__default-controls js-carousel-embla" data-carousel-embla='{{ carousel_json }}'>
<div
id="{{ uuid_viewport }}"
class="cta_carousel_inner embla__viewport js-carousel-embla-viewport"
>
<ul class="cta_list embla__container js-carousel-embla-container">
{% endif %}
{% for item in items %}
{% if items|length > 1 %}
<li class="cta_item theme_{{ themes[loop.index0 % themes|length][0] }} embla__slide">
{% else %}
<div class="cta_wrapper theme_{{ themes[0][0] }}">
<div class="cta_item">
{% endif %}
<div class="cta_item_inner">
<figure class="cta_item_figure cta_item_figure_sm">
{% include "@partial-image" with {
class: 'cta_item',
image: item.image,
alt: item.alt,
loading: 'lazy',
crop: 'square',
max: 'sml',
sizes: [
'(min-width: 780px) calc(-4.44vw + 681px)',
'(min-width: 380px) calc(92.89vw - 59px)',
'calc(31.67vw + 161px)',
]
} %}
</figure>
<div class="cta_item_content">
{% if title %}
<h3 class="cta_item_title">{{ item.title }}</h3>
{% else %}
<h2 class="cta_item_title">{{ item.title }}</h2>
{% endif %}
{% if item.description %}
<p class="cta_item_description">{{ item.description }}</p>
{% endif %}
{% if item.link %}
{% include "@partial-link-button" with {
class: 'cta_item',
title: item.link.title,
url: item.link.url,
target: item.link.target,
aria: item.link.aria,
theme: themes[loop.index0 % themes|length][1],
} %}
{% endif %}
</div>
<figure class="cta_item_figure cta_item_figure_lg">
{% include "@partial-image" with {
class: 'cta_item',
image: item.image,
alt: item.alt,
loading: 'lazy',
crop: 'square',
max: 'sml',
sizes: [
'(min-width: 1400px) 627px',
'(min-width: 1220px) 543px',
'(min-width: 980px) 456px',
]
} %}
</figure>
</div>
{% if items|length > 1 %}
</li>
{% else %}
</div>
</div>
{% endif %}
{% endfor %}
{% if items|length > 1 %}
</ul>
</div>
<div class="cta_controls embla__controls" aria-controls="{{ uuid_viewport }}">
<button class=" embla__button embla__button--prev js-carousel-embla-btn-prev" type="button" aria-label="Previous Slide">
<span class="embla__button-icon">{{ icon('caret_left') }}</span>
</button>
<button class=" embla__button embla__button--next js-carousel-embla-btn-next" type="button" aria-label="Next Slide">
<span class="embla__button-icon">{{ icon('caret_right') }}</span>
</button>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
No notes defined.