JHU Carey Centers Component Library

People Related: Dark 

<!-- Related People -->
<div class="people_related people_related_carousel">
    <div class="people_related_background">
        <img src="/images/placeholder-hero-content-dark.svg" alt="" class="people_related_background_pattern">
    </div>
    <div class="people_related_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="people_related_header_inner">
                    <h2 class="people_related_title">Our People</h2>
                    <p class="people_related_description">Hopkins Carey Business School's Gender and Work Initiatives invites world-class speakers and facilitators aligned with individualized coaching and mentoring that is beyond compare.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="people_related_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"loop":false,"slidesToScroll":1,"align":"start","breakpoints":{"(min-width: 980px)":{"active":false}}}'>
                    <div id="people-related-viewport-2" class="embla__viewport js-carousel-embla-viewport">
                        <ul class="people_related_items embla__container js-carousel-embla-container" aria-label="Our People">
                            <li class="people_related_item">
                                <div class="people_related_item_inner">
                                    <figure class="people_related_item_figure">
                                        <a class="people_related_item_figure_link" href="" aria-label="Read more about " tabindex="-1">

                                            <img class="people_related_item_image" srcset="https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
                                        </a>
                                    </figure>
                                    <h3 class="people_related_item_name">

                                        <a href="page-directory-detail.html" class="people_related_item_name_link">
                                            <span class="people_related_item_name_link_inner">
                                                <span class="people_related_item_name_link_label">Marcus Smith Anderson, Ph.D</span><span class="icon_nowrap people_related_item_name_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg></span>
                                            </span>
                                        </a>
                                    </h3>
                                    <div class="people_related_item_title">Executive Director of Inclusive Development, Johns Hopkins Bloomberg School of Public Health</div>
                                </div>
                            </li>
                            <li class="people_related_item">
                                <div class="people_related_item_inner">
                                    <figure class="people_related_item_figure">

                                        <img class="people_related_item_image" srcset="https://images.fastspot.com/generic/300x300/2 300w, https://images.fastspot.com/generic/100x100/2 100w" src="https://images.fastspot.com/generic/100x100/2" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                    <h3 class="people_related_item_name">
                                        Demere Woolway
                                    </h3>
                                    <div class="people_related_item_title">Executive Director of Inclusive Development, Johns Hopkins University</div>
                                </div>
                            </li>
                            <li class="people_related_item">
                                <div class="people_related_item_inner">
                                    <figure class="people_related_item_figure">
                                        <a class="people_related_item_figure_link" href="" aria-label="Read more about " tabindex="-1">

                                            <img class="people_related_item_image" srcset="https://images.fastspot.com/generic/300x300/3 300w, https://images.fastspot.com/generic/100x100/3 100w" src="https://images.fastspot.com/generic/100x100/3" alt="" loading="lazy" width="100" height="100">
                                        </a>
                                    </figure>
                                    <h3 class="people_related_item_name">

                                        <a href="page-directory-detail.html" class="people_related_item_name_link">
                                            <span class="people_related_item_name_link_inner">
                                                <span class="people_related_item_name_link_label">Dr. Kalahan Taylor</span><span class="icon_nowrap people_related_item_name_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg></span>
                                            </span>
                                        </a>
                                    </h3>
                                    <div class="people_related_item_title">Executive Education Faculty, Carey Business School</div>
                                </div>
                            </li>
                            <li class="people_related_item">
                                <div class="people_related_item_inner">
                                    <figure class="people_related_item_figure">
                                        <a class="people_related_item_figure_link" href="" aria-label="Read more about " tabindex="-1">

                                            <img class="people_related_item_image" srcset="https://images.fastspot.com/generic/300x300/3 300w, https://images.fastspot.com/generic/100x100/3 100w" src="https://images.fastspot.com/generic/100x100/3" alt="" loading="lazy" width="100" height="100">
                                        </a>
                                    </figure>
                                    <h3 class="people_related_item_name">

                                        <a href="page-directory-detail.html" class="people_related_item_name_link">
                                            <span class="people_related_item_name_link_inner">
                                                <span class="people_related_item_name_link_label">Antidisestablishmentarianism Lastname</span><span class="icon_nowrap people_related_item_name_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg></span>
                                            </span>
                                        </a>
                                    </h3>
                                    <div class="people_related_item_title">Executive Education Faculty, Carey Business School</div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="people_related_controls embla__controls" aria-controls="people-related-viewport-2">
                        <div class="embla__dots js-carousel-embla-dots" role="navigation"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related People -->
 
{#
	{% include '@component-people-related' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				name: 'Name',
				job_title: 'Job Title',
				url: '#',
				image: '1',
				alt: '',
			}
		]
	} %}
#}

{% set carousel_json = {
	loop: false,
	slidesToScroll: 1,
	align: 'start',
	breakpoints: {
		'(min-width: 980px)': {
			active: false
		}
	}
}|json_encode %}

{% set uuid_viewport = uniqid("people-related-viewport") %}

<!-- Related People -->
<div class="people_related {{ carousel ? 'people_related_carousel' }}">
	{% if pattern %}
		<div class="people_related_background">
			<img src="{{ pattern }}" alt="" class="people_related_background_pattern">
		</div>
	{% endif %}
	<div class="people_related_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="people_related_header_inner">
					<h2 class="people_related_title">{{ title }}</h2>
					{% if description %}
						<p class="people_related_description">{{ description }}</p>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="people_related_body">
		<div class="fs-row">
			<div class="fs-cell">
				{% if carousel %}
					<div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{{ carousel_json }}'>
						<div
							id="{{ uuid_viewport }}"
							class="embla__viewport js-carousel-embla-viewport"
						>
				{% endif %}
						<ul class="people_related_items embla__container{% if carousel %} js-carousel-embla-container{% endif %}" aria-label="{{ title }}">
							{% for item in items %}
								<li class="people_related_item">
									<div class="people_related_item_inner">
										{% if item.image %}
											<figure class="people_related_item_figure">
												{% if item.url %}
													<a class="people_related_item_figure_link" href="{{ item.link }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
												{% endif %}
													{% include '@partial-image' with {
														class: 'people_related_item',
														alt: item.alt,
														image: item.image,
														loading: 'lazy',
														crop: 'square',
														max: 'xxsml',
													} %}
												{% if item.url %}
													</a>
												{% endif %}
											</figure>
										{% endif %}
										<h3 class="people_related_item_name">
											{% if item.url %}
												{% include "@partial-link" with {
													class: 'people_related_item_name',
													title: item.name,
													url: item.url,
													icon: 'caret_right',
													nowrap: true,
												} %}
											{% else %}
												{{ item.name }}
											{% endif %}
										</h3>
										{% if item.job_title %}
											<div class="people_related_item_title">{{ item.job_title }}</div>
										{% endif %}
									</div>
								</li>
							{% endfor %}
						</ul>
				{% if carousel %}
						</div>

						<div class="people_related_controls embla__controls" aria-controls="{{ uuid_viewport }}">
							<div class="embla__dots js-carousel-embla-dots" role="navigation"></div>
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Related People -->

No notes defined.