JHU India Component Library

Visual Cta 

<div class="visual_cta theme_blue">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <figure class="visual_cta_figure" aria-hidden="true">
                    <span class="lazy_image_wrapper visual_cta_image_wrapper">
                        <picture class="visual_cta_picture">
                            <source media="(min-width: 980px)" srcset="//images.fastspot.com/johns-hopkins-india-institute/300x169/" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x555/">
                            <source media="(min-width: 740px)" srcset="//images.fastspot.com/johns-hopkins-india-institute/300x169/" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/740x416/">
                            <source media="(min-width: 500px)" srcset="//images.fastspot.com/johns-hopkins-india-institute/300x169/" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/500x282/">
                            <img class="js-lazy js-lazyload visual_cta_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/" alt="">
                        </picture>
                    </span>
                    <noscript>
                        <picture class="visual_cta_picture">
                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/johns-hopkins-india-institute/740x555/">
                            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/johns-hopkins-india-institute/740x416/">
                            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/johns-hopkins-india-institute/500x282/">
                            <img class="js-lazy js-lazyload visual_cta_image" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/" data-src="//images.fastspot.com/johns-hopkins-india-institute/300x169/" alt="">
                        </picture>
                    </noscript>
                </figure>
                <div class="visual_cta_wrapper">

                    <h2 class="visual_cta_title">Ways to Give</h2>
                    <span class="visual_cta_subhead">We Can Use Your Support</span>
                    <span class="visual_cta_description">Your contribution to the JHU India Institute expands opportunities for all of those seeking to change the world.</span>
                    <a href="#" class="visual_cta_link button_light">
                        <span class="visual_cta_link_label">Support JHII</span>
                        <span class="visual_cta_link_icon">
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="visual_cta{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="visual_cta_inner">
				<figure class="visual_cta_figure" aria-hidden="true">
					{% include "@partial-picture" with {
						class: "visual_cta",
						image: image,
						default: img.wide.xxsml,
						loading: "lazy",
						alt: "",
						sources: {
							"980px": img.full.sml,
							"740px": img.wide.sml,
							"500px": img.wide.xsml
						}
					} %}
				</figure>
				<div class="visual_cta_wrapper">

					<h2 class="visual_cta_title">{{ title }}</h2>
					{% if subheading %}
					<span class="visual_cta_subhead">{{ subheading }}</span>
					{% endif %}
					{% if description %}
					<span class="visual_cta_description">{{ description }}</span>
					{% endif %}
					{% if link %}
					<a href="{{ link.url }}" class="visual_cta_link button_light">
						<span class="visual_cta_link_label">{{ link.title }}</span>
						<span class="visual_cta_link_icon">{{ icon("arrow_right") }}</span>
					</a>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.