JHU SOE Component Library

Call To Action: Gold Gem 

<!-- Call to Action -->
<div class="cta component_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">

                        <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,
							aria: link.aria
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->

No notes defined.