JHU SOE Component Library

Spotlight: Blue Gem 

<!-- Person Spotlight -->
<div class="js-anim js-spotlight spotlight component_theme_blue_gem">
    <div class="spotlight_block">
        <div class="spotlight_frame">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="spotlight_inner">
                        <div class="spotlight_intro">
                            <div class="spotlight_header">
                                <h2 class="spotlight_label">People of SOE</h2>
                                <p class="spotlight_name">Robert Balfanz, PhD</p>
                                <p class="spotlight_title">Professor</p>
                            </div>
                            <blockquote class="spotlight_quote">
                                <p>"Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus."</p>
                            </blockquote>
                        </div>
                        <div class="spotlight_media">
                            <figure class="js-spotlight-media-figure spotlight_media_figure">

                                <picture class="spotlight_media_picture">
                                    <source media="(min-width: 1394px)" srcset="https://images.fastspot.com/jhusoe/735x980/7" width="735" height="980">
                                    <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/jhusoe/555x740/7" width="555" height="740">
                                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/jhusoe/375x500/7" width="375" height="500">
                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/jhusoe/500x282/7" width="500" height="282">
                                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/jhusoe/980x552/7" width="980" height="552">
                                    <img class="spotlight_media_image" src="//images.fastspot.com/jhusoe/740x416/7" alt="" loading="lazy" width="740" height="416">
                                </picture>
                            </figure>
                        </div>
                        <div class="spotlight_detail">
                            <p class="spotlight_description">Robert Balfanz, PhD, is a research professor at the Center for the Social Organization of Schools at Johns Hopkins University School of Education, where he is the director of the Everyone Graduates Center. He has published widely on secondary school reform, high school dropouts, early warning systems, chronic absenteeism, school climate, and instructional interventions in high-poverty schools. He focuses on translating research findings into effective school interventions.</p>
                            <div class="spotlight_action">
                                <a class="spotlight_action_link" href="#">
                                    <span class="spotlight_action_link_label">Robert Balfanz's Profile</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Person Spotlight -->
 
{#
	{% include '@component-spotlight' with {
		theme: 'blue_gem',
		label: 'label',
		name: 'name',
		title: 'title',
		quote: 'quote',
		image: '1',
		alt: '',
		description: 'description',
		link: {
			url: '#',
			label: 'label'
		}
	} %}
#}

<!-- Person Spotlight -->
<div class="js-anim js-spotlight spotlight component_theme_{{ theme ?: 'blue_brand' }}">
	<div class="spotlight_block">
		<div class="spotlight_frame">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="spotlight_inner">
						<div class="spotlight_intro">
							<div class="spotlight_header">
								<h2 class="spotlight_label">{{ label ?: 'People of SOE' }}</h2>
								<p class="spotlight_name">{{ name }}</p>
								{% if title %}
									<p class="spotlight_title">{{ title }}</p>
								{% endif %}
							</div>
							<blockquote class="spotlight_quote">
								<p>{{ quote }}</p>
							</blockquote>
						</div>
						<div class="spotlight_media">
							<figure class="js-spotlight-media-figure spotlight_media_figure">
								{% include '@partial-picture' with {
									class: 'spotlight_media',
									image: image,
									alt: alt,
									loading: 'lazy',
									default: img.wide.sml,
									sources: {
										'1394px': img.portraitFull.med,
										'1220px': img.portraitFull.sml,
										'980px': img.portraitFull.xsml,
										'740px': img.wide.xsml,
										'500px': img.wide.med
									},
									sizes: [
										'(min-width: 1394px) 290px',
										'(min-width: 1220px) 254px',
										'(min-width: 980px) 202px',
										'(min-width: 740px) 242px',
										'(min-width: 500px) 58vw',
										'90vw'
									]
								} %}
							</figure>
						</div>
						<div class="spotlight_detail">
							<p class="spotlight_description">{{ description }}</p>
							{% if link %}
								<div class="spotlight_action">
									<a class="spotlight_action_link" href="{{ link.url }}">
										<span class="spotlight_action_link_label">{{ link.label }}</span>
									</a>
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Person Spotlight -->

No notes defined.