<!-- Topic Row -->
<div class="visual_call_to_action">
<div class="fs-row">
<div class="fs-cell">
<div class="visual_call_to_action_inner">
<div class="visual_call_to_action_body">
<div class="js-observable visual_call_to_action_item visual_call_to_action_item_reversed">
<div class="visual_call_to_action_item_wrapper">
<div class="visual_call_to_action_item_bubble">
<div class="visual_call_to_action_item_header">
<h3 class="visual_call_to_action_item_title">Visual Call to Action</h3>
<h2 class="visual_call_to_action_item_lead">subtitle lead-in</h2>
</div>
<div class="visual_call_to_action_item_body">
<div class="visual_call_to_action_item_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="visual_call_to_action_item_links">
<div class="visual_call_to_action_item_link_item">
<a href="#" class="visual_call_to_action_item_link">
<span class="visual_call_to_action_item_link_inner">
<span class="visual_call_to_action_item_link_label">Link Number One</span>
<span class="visual_call_to_action_item_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a>
</div>
<div class="visual_call_to_action_item_link_item">
<a href="#" class="visual_call_to_action_item_link">
<span class="visual_call_to_action_item_link_inner">
<span class="visual_call_to_action_item_link_label">Link Number Two</span>
<span class="visual_call_to_action_item_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a>
</div>
<div class="visual_call_to_action_item_link_item">
<a href="#" class="visual_call_to_action_item_link">
<span class="visual_call_to_action_item_link_inner">
<span class="visual_call_to_action_item_link_label">Link Number Three</span>
<span class="visual_call_to_action_item_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="visual_call_to_action_full_media">
<div class="full_media full_media_has_video">
<figure class="full_media_figure">
<picture class="full_media_picture">
<source media="(min-width: 1200px)" srcset="https://images.fastspot.com/merced/1440x810/1">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/merced/1220x686/1">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/merced/980x552/1">
<img class="full_media_image" src="//images.fastspot.com/merced/735x980/1" alt="" loading="eager" width="735" height="980">
</picture>
</figure>
<div class="js-background-video-wrapper full_media_video" data-background-video='{"autoplay":true,"display":"background","id":"AjEwsxtp-yg","type":"youtube","title":"video","playerVars":{"loop":1}}'>
<div class="full_media_iframe_wrapper">
<div class="js-iframe-target full_media_iframe"></div>
</div>
<div class="full_media_video_controls">
<div class="fs-row">
<div class="fs-cell">
<div class="full_media_video_controls_inner">
<div class="full_media_video_controls_bubble">
<div class="full_media_video_control">
<button class="full_media_video_play_button js-full-media-video-play-button">
<span class="full_media_video_play_button_inner">
<span class="full_media_video_play_button_label">Play Video</span>
<span class="full_media_video_play_button_icon" aria-hidden="true"><span class="full_media_video_play_button_icon_inner">
<i class="fa-regular fa-play"></i>
</span>
</span>
</button>
</div>
<div class="full_media_video_control">
<button class="full_media_video_pause_button js-full-media-video-pause-button">
<span class="full_media_video_pause_button_inner">
<span class="full_media_video_pause_button_label">Pause Video</span>
<span class="full_media_video_pause_button_icon" aria-hidden="true"><span class="full_media_video_pause_button_icon_inner">
<i class="fa-regular fa-pause"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
{#
{% include '@component-call_to_action_item-row' with {
title: 'Title',
description: 'Description',
items: [
{
title: 'Item Title',
image: '1',
description: 'Item Description',
links: [
{
title: 'Link Title',
url: '#',
icon: 'arrow_right'
}
]
}
]
} %}
#}
<!-- Topic Row -->
<div class="visual_call_to_action">
<div class="fs-row">
<div class="fs-cell">
<div class="visual_call_to_action_inner">
<div class="visual_call_to_action_body">
<div class="js-observable visual_call_to_action_item{% if layout %} visual_call_to_action_item_{{ layout }}{% endif %}">
<div class="visual_call_to_action_item_wrapper">
<div class="visual_call_to_action_item_bubble">
<div class="visual_call_to_action_item_header">
<h3 class="visual_call_to_action_item_title">{{ title }}</h3>
<h2 class="visual_call_to_action_item_lead">{{ lead }}</h2>
</div>
<div class="visual_call_to_action_item_body">
<div class="visual_call_to_action_item_description">
<p>{{ description }}</p>
</div>
</div>
{% if links %}
<div class="visual_call_to_action_item_links">
{% for link in links %}
<div class="visual_call_to_action_item_link_item">
{% include '@component-link' with {
class: 'visual_call_to_action_item',
title: link.title,
url: link.url,
icon: 'fa-regular fa-circle-chevron-right'
} %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="visual_call_to_action_full_media">
{% if background %}
<figure class="visual_call_to_action_figure">
{% include '@component-image' with {
class: 'visual_call_to_action',
alt: '',
image: background,
loading: 'eager',
sources: [
img.wide.lrg,
img.wide.med,
]
} %}
</figure>
{% else %}
{% include '@component-full-media' with {
image: image,
video: video
} %}
{% endif %}
</div>
</div>
<!-- END: Topic Row -->
No notes defined.