Johns Hopkins University Component Library

Visual Callout 

<!-- Call to Action Featured -->
<div class="cta_featured theme_orange">
    <div class="cta_featured_inner">
        <div class="cta_featured_header cta_featured_header_sm">
            <h2 class="cta_featured_lead">Engage With US</h2>
            <h3 class="cta_featured_title">Community Education & Engagement</h3>
        </div>
        <div class="cta_featured_media">

            <picture class="cta_featured_picture">
                <source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/740x740/1" width="740" height="740">
                <img class="cta_featured_image" src="//images.fastspot.com/framework/740x416/1" alt="" loading="lazy" width="740" height="416">
            </picture>
        </div>
        <div class="cta_featured_body">
            <div class="cta_featured_body_inner">
                <div class="cta_featured_header cta_featured_header_lg">
                    <h2 class="cta_featured_lead">Engage With US</h2>
                    <h3 class="cta_featured_title">Community Education & Engagement</h3>
                </div>
                <div class="cta_featured_description">
                    <p>From strategic planning to campus operations, technical guidance, behavior change education, and more, the Office of Sustainability’s work spans the physical, academic, and cultural environments of JHU. Our office aims to empower students, faculty, and staff to meaningfully contribute to a more just and sustainable world.</p>
                </div>
                <div class="cta_featured_action">

                    <a href="#" class="cta_featured_link" aria-label="Link Aria">
                        <span class="cta_featured_link_inner">
                            <span class="cta_featured_link_label">Learn More</span>
                            <span class="cta_featured_link_icon" aria-hidden="true">

                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Call to Action Featured -->
 
{#
	{% include '@component-call-to-action-featured' %}
#}

<!-- Call to Action Featured -->
<div class="cta_featured{% if layout %} layout_{{ layout }}{% endif %}{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="cta_featured_inner">
		<div class="cta_featured_header cta_featured_header_sm">
			<h2 class="cta_featured_lead">{{ lead }}</h2>
			<h3 class="cta_featured_title">{{ title }}</h3>
		</div>
		<div class="cta_featured_media">
			{% include '@partial-picture' with {
				class: 'cta_featured',
				alt: '',
				image: image,
				loading: 'lazy',
				default: img.wide.sml,
				sources: {
					'980px': img.square.sml,
				}
			} %}
		</div>
		<div class="cta_featured_body">
			<div class="cta_featured_body_inner">
				<div class="cta_featured_header cta_featured_header_lg">
					<h2 class="cta_featured_lead">{{ lead }}</h2>
					<h3 class="cta_featured_title">{{ title }}</h3>
				</div>
				<div class="cta_featured_description">
					<p>{{ description }}</p>
				</div>
				<div class="cta_featured_action">
					{% include '@partial-link' with {
						class: 'cta_featured',
						title: link.label,
						url: link.url,
						icon: link.icon,
						aria: link.aria
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action Featured -->

No notes defined.