<!-- Call to Action -->
<div class="cta component_theme_blue_cloud">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_inner">
<div class="cta_media">
<figure class="cta_figure" aria-hidden="true">
<img class="cta_image" srcset="https://images.fastspot.com/jhusoe/740x740/13 740w, https://images.fastspot.com/jhusoe/500x500/13 500w, https://images.fastspot.com/jhusoe/300x300/13 300w" sizes="(min-width: 980px) 220px, (min-width: 740px) 192px, 220px" src="https://images.fastspot.com/jhusoe/300x300/13" alt="" loading="lazy" width="300" height="300">
</figure>
</div>
<div class="cta_group">
<div class="cta_description">
<p>Get Johns Hopkins news delivered to your inbox</p>
</div>
<div class="cta_action">
<a href="#" class="cta_link">
<span class="cta_link_inner">
<span class="cta_link_label">Subscribe to Education Matter</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
{#
{% include '@component-call-to-action' with {
theme: 'color',
image: '1',
alt: 'alt',
description: 'Description',
link: {
url: '#',
label: 'Link Label',
aria: ''
}
} %}
#}
<!-- Call to Action -->
<div class="cta component_theme_{{ theme ?: 'gold_gem' }}">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_inner">
<div class="cta_media">
<figure class="cta_figure" aria-hidden="true">
{% include '@partial-image' with {
class: 'cta',
alt: alt,
image: image,
loading: 'lazy',
sources: [
img.square.sml,
img.square.xsml,
img.square.xxsml
],
sizes: [
'(min-width: 980px) 220px',
'(min-width: 740px) 192px',
'220px'
]
} %}
</figure>
</div>
<div class="cta_group">
<div class="cta_description">
<p>{{ description }}</p>
</div>
<div class="cta_action">
{% include '@partial-link' with {
class: 'cta',
title: link.label,
url: link.url
} %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
No notes defined.