JHU Sustainability Component Library

Visual Call To Action: White 

<!-- Call to Action -->
<div class="visual_cta theme_white">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <div class="visual_cta_grid">
                    <div class="visual_cta_grid_item is_media">
                        <div class="visual_cta_image_wrap">

                            <img class="visual_cta_image" srcset="https://images.fastspot.com/jhu-sustainability/1220x915/1 1220w, https://images.fastspot.com/jhu-sustainability/980x735/1 980w, https://images.fastspot.com/jhu-sustainability/740x555/1 740w, https://images.fastspot.com/jhu-sustainability/500x375/1 500w, https://images.fastspot.com/jhu-sustainability/300x225/1 300w" src="https://images.fastspot.com/jhu-sustainability/300x225/1" alt="" loading="lazy" width="300" height="225">
                        </div>
                    </div>
                    <div class="visual_cta_grid_item is_content">
                        <div class="visual_cta_pretitle">
                            The Plan
                        </div>

                        <h2 class="visual_cta_title">
                            The Sustainability Plan
                        </h2>

                        <div class="visual_cta_desc">
                            <div class="typography">
                                <p>The sustainability leadership council meets regularly to set goals for the future of sustainability at Hopkins.</p>
                            </div>
                        </div>

                        <div class="visual_cta_button_items">
                            <div class="visual_cta_button_item">

                                <a href="#" class="basic_link theme_white">
                                    <span class="basic_link_inner">
                                        <span class="basic_link_label">View Sustainability Plan</span>
                                    </span>
                                </a>
                            </div>
                            <div class="visual_cta_button_item">

                                <a href="#" class="basic_link theme_white">
                                    <span class="basic_link_inner">
                                        <span class="basic_link_label">Sustainability Leadership Council</span>
                                    </span>
                                </a>
                            </div>
                            <div class="visual_cta_button_item">

                                <a href="#" class="basic_link theme_white">
                                    <span class="basic_link_inner">
                                        <span class="basic_link_label">Our Solar Plan</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Call to Action -->
 
{#
	{% include '@component-call-to-action' with {
		pretitle: 'The Plan',
		title: 'The Sustainability Plan',
		description:
			'The sustainability leadership council meets regularly to set goals for the future of sustainability at Hopkins.',
		buttons: [
			{
				title: 'View Sustainability Plan',
				href: '#'
			},
			{
				title: 'Sustainability Leadership Council',
				href: '#'
			},
			{
				title: 'Our Solar Plan',
				href: '#'
			}
		]
	} %}
#}

<!-- Call to Action -->
<div class="visual_cta theme_{{ theme }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="visual_cta_inner">
				<div class="visual_cta_grid">
					<div class="visual_cta_grid_item is_media">
						<div class="visual_cta_image_wrap">
							{% include '@partial-image' with {
								class: 'visual_cta',
								alt: '',
								image: '1',
								loading: 'lazy',
								sources: [
									img.full.lrg,
									img.full.med,
									img.full.sml,
									img.full.xsml,
									img.full.xxsml
								],
							} %}
						</div>
					</div>
					<div class="visual_cta_grid_item is_content">
						{% if pretitle %}
							<div class="visual_cta_pretitle">
								{{ pretitle }}
							</div>
						{% endif %}

						<h2 class="visual_cta_title">
							{{ title }}
						</h2>

						<div class="visual_cta_desc">
							<div class="typography">
								<p>{{ description }}</p>
							</div>
						</div>

						{% if buttons|length %}
							<div class="visual_cta_button_items">
								{% for button in buttons %}
									<div class="visual_cta_button_item">
										{% include "@partial-link" with {
											class: 'basic',
											title: button.title,
											url: button.href
										} %}
									</div>
								{% endfor %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->

No notes defined.