<!-- Call to Action Visual -->
<div class="js-checkpoint cta_visual theme_history" data-checkpoint-offset="100" data-checkpoint-intersect="bottom-middle">
<figure class="cta_visual_figure">
<picture class="cta_visual_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/generic/1440x810/1">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/generic/1220x686/1">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/generic/980x980/1">
<img class="cta_visual_image" src="//images.fastspot.com/generic/740x740/1" alt="" loading="lazy" width="740px" height="740px">
</picture>
</figure>
<div class="fs-row">
<div class="fs-cell">
<div class="cta_visual_inner">
<div class="cta_visual_header">
<h2 class="cta_visual_title">It’s a beautiful day in the neighborhood.</h2>
<div class="cta_visual_meta">
<p class="cta_visual_type">Exhibit</p>
<p class="cta_visual_location">Heinz History Center</p>
</div>
</div>
<div class="cta_visual_body">
<div class="cta_visual_description ">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
</div>
</div>
<div class="cta_visual_action">
<a href="#" class="cta_visual_link" aria-label="Link Aria">
<span class="cta_visual_link_inner">
<span class="cta_visual_link_label">Link Label</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action Visual -->
{#
{% include '@component-call-to-action-visual' with {
theme: 'theme',
image: '1',
title: 'Title',
type: 'Type',
location: 'Location',
description: 'Description',
link: {
url: '#',
label: 'Link',
aria: 'aria'
}
} %}
#}
<!-- Call to Action Visual -->
<div class="js-checkpoint cta_visual theme_{{ theme }}" data-checkpoint-offset="100" data-checkpoint-intersect="bottom-middle">
<figure class="cta_visual_figure">
{% include '@partial-picture' with {
class: 'cta_visual',
image: image,
alt: '',
loading: 'lazy',
default: img.square.sml,
sources: {
'980px': img.wide.xlrg,
'740px': img.wide.lrg,
'500px': img.square.med
}
} %}
</figure>
<div class="fs-row">
<div class="fs-cell">
<div class="cta_visual_inner">
<div class="cta_visual_header">
<h2 class="cta_visual_title">{{ title }}</h2>
<div class="cta_visual_meta">
<p class="cta_visual_type">{{ type }}</p>
<p class="cta_visual_location">{{ location }}</p>
</div>
</div>
<div class="cta_visual_body">
<div class="cta_visual_description ">
<p>{{ description }}</p>
</div>
</div>
<div class="cta_visual_action">
{% include '@partial-link' with {
class: 'cta_visual',
title: link.label,
url: link.url,
aria: link.aria
} %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action Visual -->
No notes defined.