Office of Diversity and Inclusion Component Library

Visual Call To Action 

<div class="visual_cta">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <div class="visual_cta_grid fs-row fs-lg-align-center">
                    <div class="visual_cta_grid_item fs-cell fs-lg-6">
                        <figure class="visual_cta_figure">

                            <img class="visual_cta_image" srcset="https://images.fastspot.com/jhu-odi/980x654/6 980w, https://images.fastspot.com/jhu-odi/740x494/6 740w, https://images.fastspot.com/jhu-odi/500x334/6 500w, https://images.fastspot.com/jhu-odi/300x200/6 300w" sizes="(min-width: 1220px) 549px, (min-width: 980px) 439px, (min-width: 740px) 689px, 90vw" src="https://images.fastspot.com/jhu-odi/300x200/6" alt="" loading="lazy" width="300" height="200">
                        </figure>
                    </div>

                    <div class="visual_cta_grid_item fs-cell fs-lg-6">
                        <div class="visual_cta_body">
                            <div class="visual_cta_pretitle">
                                Realizing Our Promise
                            </div>

                            <h2 class="visual_cta_title">
                                The Second JHU Roadmap on Diversity, Equity, and Inclusion
                            </h2>

                            <div class="visual_cta_desc typography">
                                <p>This Roadmap represents the next iteration of the university’s key strategic framework for advancing diversity, equity, and inclusion, with 24 goals designed to strengthen and expand our DEI commitments.</p>
                            </div>

                            <div class="visual_cta_links">
                                <div class="visual_cta_link_wrap">

                                    <a href="#" class="basic_link">
                                        <span class="basic_link_inner">
                                            <span class="basic_link_label">Diversity Roadmap Text</span><span class="icon_nowrap basic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                <div class="visual_cta_link_wrap">

                                    <a href="#" class="basic_link">
                                        <span class="basic_link_inner">
                                            <span class="basic_link_label">Our Goals in Progress</span><span class="icon_nowrap basic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                <div class="visual_cta_link_wrap">

                                    <a href="#" class="basic_link">
                                        <span class="basic_link_inner">
                                            <span class="basic_link_label">History of D&I and JHU</span><span class="icon_nowrap basic_link_icon" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="visual_cta">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="visual_cta_inner">
				<div class="visual_cta_grid fs-row fs-lg-align-center">
					<div class="visual_cta_grid_item fs-cell fs-lg-6">
						<figure class="visual_cta_figure">
							{% include "@partial-image" with {
								class: "visual_cta",
								alt: "",
								image: image,
								loading: "lazy",
								sources: [
									img.classic.med,
									img.classic.sml,
									img.classic.xsml,
									img.classic.xxsml
								],
								sizes: [
									"(min-width: 1220px) 549px",
									"(min-width: 980px) 439px",
									"(min-width: 740px) 689px",
									"90vw"
								]
							} %}
						</figure>
					</div>

					<div class="visual_cta_grid_item fs-cell fs-lg-6">
						<div class="visual_cta_body">
							{% if pretitle %}
								<div class="visual_cta_pretitle">
									{{ pretitle }}
								</div>
							{% endif %}

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

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

							{% if links|length %}
								<div class="visual_cta_links">
									{% for link in links %}
										<div class="visual_cta_link_wrap">
											{% include '@partial-link' with {
												title: link.title,
												url: link.url,
												class: 'basic',
												js: false,
												icon: 'arrow_right',
												aria: '',
												nowrap: true
											} %}
										</div>
									{% endfor %}
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.