Office of Diversity and Inclusion Component Library

About CTA 

<div class="about_cta">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="about_cta_inner">
                <div class="about_cta_grid fs-row fs-lg-align-center">
                    <div class="about_cta_grid_item fs-cell fs-lg-6">
                        <figure class="about_cta_figure">

                            <img class="about_cta_image" srcset="https://images.fastspot.com/jhu-odi/740x740/2 740w, https://images.fastspot.com/jhu-odi/500x500/2 500w, https://images.fastspot.com/jhu-odi/300x300/2 300w" sizes="(min-width: 1220px) 629px, (min-width: 980px) 439px, 90vw" src="https://images.fastspot.com/jhu-odi/300x300/2" alt="" loading="lazy" width="300" height="300">
                        </figure>
                    </div>

                    <div class="about_cta_grid_item fs-cell fs-lg-6">
                        <div class="about_cta_content">
                            <h2 class="about_cta_title">
                                The Office of Diversity and Inclusion
                            </h2>

                            <div class="about_cta_desc">
                                <p>As innovators and change agents, the Office of Diversity and Inclusion will set the standard for excellence in cultivating inclusive, equitable, and just environments in higher education.</p>
                            </div>

                            <div class="about_cta_link_wrap">

                                <a href="#" class="button_link theme_brand_blue">
                                    <span class="button_link_inner">
                                        <span class="button_link_label">Learn About ODI</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="about_cta">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="about_cta_inner">
				<div class="about_cta_grid fs-row fs-lg-align-center">
					<div class="about_cta_grid_item fs-cell fs-lg-6">
						<figure class="about_cta_figure">
							{% include '@partial-image' with {
								class: 'about_cta',
								alt: '',
								image: image,
								loading: 'lazy',
								sources: [
									img.square.sml,
									img.square.xsml,
									img.square.xxsml
								],
								sizes: [
									'(min-width: 1220px) 629px',
									'(min-width: 980px) 439px',
									'90vw'
								]
							} %}
						</figure>
					</div>

					<div class="about_cta_grid_item fs-cell fs-lg-6">
						<div class="about_cta_content">
							<h2 class="about_cta_title">
								{{ title }}
							</h2>

							<div class="about_cta_desc">
								<p>{{ description }}</p>
							</div>

							<div class="about_cta_link_wrap">
								{% include "@partial-link" with {
									title: 'Learn About ODI',
									url: '#',
									class: 'button',
									theme: 'brand_blue',
									js: false,
									icon: '',
									aria: '',
									nowrap: false,
								} %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.