JHU Carey Centers Component Library

Page Header: People (Dark) 

<div class="page_header page_header_people theme_site_theme">
    <div class="page_header_inner">
        <img class="page_header_inner_background" src="/images/demo-lines.png">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="page_header_people_inner">
                    <div class="page_header_people_content">

                        <div class="page_header_breadcrumb">
                            <div class="page_header_breadcrumb_inner">

                                <div class="breadcrumb">
                                    <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                                        <div class="breadcrumb_nav_header">
                                            <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                                        </div>
                                        <ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
                                            <li class="breadcrumb_item breadcrumb_item_home">
                                                <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
                                                    <span class="breadcrumb_pill_inner">

                                                        <span class="breadcrumb_pill_label">Home</span>
                                                    </span>
                                                </a>
                                                <span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg></span>

                                            </li>
                                            <li class="breadcrumb_item">
                                                <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                    <span class="breadcrumb_pill_inner">
                                                        <span class="breadcrumb_pill_label">Navigation Level</span>
                                                    </span>
                                                </a>
                                                <span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg></span>

                                            </li>
                                            <li class="breadcrumb_item">
                                                <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                    <span class="breadcrumb_pill_inner">
                                                        <span class="breadcrumb_pill_label">Parent Level</span>
                                                    </span>
                                                </a>
                                                <span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg></span>

                                            </li>
                                            <li class="breadcrumb_item">

                                            </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <div class="page_header_intro">
                            <div class="page_header_intro_inner">
                                <h1 class="page_header_title" id="page_header_title" tabindex="-1">Marcus Smith</h1>
                                <p class="page_header_job_title">Director of Department<br>Johns Hopkins Bloomberg School of Public Health</p>

                                <figure class="page_header_people_figure page_header_people_figure_sm">

                                    <img class="page_header_people_image" srcset="https://images.fastspot.com/generic/735x980/1 735w, https://images.fastspot.com/generic/555x740/1 555w, https://images.fastspot.com/generic/375x500/1 375w, https://images.fastspot.com/generic/225x300/1 225w" sizes="(min-width: 980px) 0px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/225x300/1" alt="" loading="lazy" width="225" height="300">
                                </figure>

                                <div class="page_header_people_details">
                                    <div class="page_header_people_detail page_header_people_detail_contact">
                                        <div class="page_header_people_detail_label">Contact</div>
                                        <div class="page_header_people_detail_content">
                                            <a class="page_header_people_detail_content_link" href="tel:4105551234">(410) 555-1234</a>
                                            <div class="page_header_people_detail_content_hint">mobile</div>
                                        </div>
                                        <div class="page_header_people_detail_content">
                                            <a class="page_header_people_detail_content_link" href="tel:4105555678">(410) 555-5678</a>
                                            <div class="page_header_people_detail_content_hint">office</div>
                                        </div>
                                        <div class="page_header_people_detail_content">
                                            <a class="page_header_people_detail_content_link" href="mailto:averylongemailaddress@university.edu">averylongemailaddress<wbr />@university.edu</a>
                                        </div>
                                    </div>

                                    <div class="page_header_people_detail page_header_people_detail_contact">
                                        <div class="page_header_people_detail_label">Location</div>
                                        <div class="page_header_people_detail_content">

                                            <a href="#" class="page_header_people_detail_content_link">
                                                <span class="page_header_people_detail_content_link_inner">
                                                    <span class="page_header_people_detail_content_link_label">Appleseed Library, Room 214</span>
                                                </span>
                                            </a>
                                            <div class="page_header_people_detail_content_hint">office</div>
                                        </div>
                                        <div class="page_header_people_detail_content">

                                            <a href="#" class="page_header_people_detail_content_link">
                                                <span class="page_header_people_detail_content_link_inner">
                                                    <span class="page_header_people_detail_content_link_label">1234 Maple Bacon Ln.<br>Baltimore, MD 21211</span>
                                                </span>
                                            </a>
                                            <div class="page_header_people_detail_content_hint">mailing address</div>
                                        </div>
                                    </div>

                                    <div class="page_header_people_detail page_header_people_detail_contact">
                                        <div class="page_header_people_detail_label">Office Hours</div>
                                        <div class="page_header_people_detail_content">
                                            <div class="page_header_people_detail_content_inner">
                                                <div class="page_header_people_detail_icon"><svg class="icon icon_clock">
                                                        <use href="/images/icons.svg#clock" />
                                                    </svg></div>
                                                <div class="page_header_people_detail_content_text">
                                                    2:00PM &ndash; 4:00PM
                                                    <div class="page_header_people_detail_content_hint">Monday</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page_header_people_detail_content">
                                            <div class="page_header_people_detail_content_inner">
                                                <div class="page_header_people_detail_icon"><svg class="icon icon_clock">
                                                        <use href="/images/icons.svg#clock" />
                                                    </svg></div>
                                                <div class="page_header_people_detail_content_text">
                                                    2:00PM &ndash; 4:00PM
                                                    <div class="page_header_people_detail_content_hint">Wednesday</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page_header_inner_image page_header_people_figure_lg">
                        <figure class="page_header_people_figure">

                            <img class="page_header_people_image" srcset="https://images.fastspot.com/generic/735x980/1 735w, https://images.fastspot.com/generic/555x740/1 555w, https://images.fastspot.com/generic/375x500/1 375w, https://images.fastspot.com/generic/225x300/1 225w" sizes="(min-width: 1400px) 457px, (min-width: 1220px) 399px, (min-width: 980px) 319px, 0px" src="https://images.fastspot.com/generic/225x300/1" alt="" loading="lazy" width="225" height="300">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include '@partial-page-header' with {
		page: page
	} %}
#}

<div class="page_header page_header_people theme_site_theme">
	<div class="page_header_inner">
		{% if page.background %}
			<img class="page_header_inner_background" src="{{ page.background }}">
		{% endif %}
		<div class="fs-row">
			<div class="fs-cell">
				<div class="page_header_people_inner">
					<div class="page_header_people_content">
						{# {% if page.breadcrumbNav != false  %} #}
							<div class="page_header_breadcrumb">
								<div class="page_header_breadcrumb_inner">
									{% render '@navigation-breadcrumb' with {
										page: page,
										modifier: '',
										links: page.breadcrumbNav,
										icon_home: 'home',
										icon_divider: 'caret_right',
										icon_end: 'angle_down'
									} %}
								</div>
							</div>
						{# {% endif %} #}

						{% if page.title %}
							<div class="page_header_intro">
								<div class="page_header_intro_inner">
									{% if page.title %}
										<h1 class="page_header_title" id="page_header_title" tabindex="-1">{{ page.title }}</h1>
									{% endif %}
									{% if page.job_title %}
										<p class="page_header_job_title">{{ page.job_title }}</p>
									{% endif %}

									<figure class="page_header_people_figure page_header_people_figure_sm">
										{% include "@partial-image" with {
											image: page.image,
											alt: page.alt,
											class: 'page_header_people',
											crop: 'portraitFull',
											max: 'med',
											sizes: [
												'(min-width: 980px) 0px',
												'(min-width: 780px) 691px',
												'(min-width: 380px) calc(96.05vw - 39px)',
												'calc(31.67vw + 193px)',
											]
										} %}
									</figure>

									<div class="page_header_people_details">
										{% if page.email or page.phone_numbers %}
											<div class="page_header_people_detail page_header_people_detail_contact">
												<div class="page_header_people_detail_label">Contact</div>
												{% for phone in page.phone_numbers %}
													<div class="page_header_people_detail_content">
														<a class="page_header_people_detail_content_link" href="tel:{{ tel(phone.number) }}">{{ phone.number }}</a>
														{% if phone.label %}
															<div class="page_header_people_detail_content_hint">{{ phone.label }}</div>
														{% endif %}
													</div>
												{% endfor %}
												{% if page.email %}
													<div class="page_header_people_detail_content">
														<a class="page_header_people_detail_content_link" href="mailto:{{ page.email.address }}">{{ format_email(page.email.address) }}</a>
													</div>
												{% endif %}
											</div>
										{% endif %}

										{% if page.locations %}
											<div class="page_header_people_detail page_header_people_detail_contact">
												<div class="page_header_people_detail_label">Location</div>
												{% for location in page.locations %}
													<div class="page_header_people_detail_content">
														{% if location.url %}
															{% include "@partial-link" with {
																class: 'page_header_people_detail_content',
																title: location.address,
																url: location.url,
															} %}
														{% else %}
															{{ location.address }}
														{% endif %}
														{% if location.label %}
															<div class="page_header_people_detail_content_hint">{{ location.label }}</div>
														{% endif %}
													</div>
												{% endfor %}
											</div>
										{% endif %}

										{% if page.office_hours %}
											<div class="page_header_people_detail page_header_people_detail_contact">
												<div class="page_header_people_detail_label">Office Hours</div>
												{% for hours in page.office_hours %}
													<div class="page_header_people_detail_content">
														<div class="page_header_people_detail_content_inner">
															<div class="page_header_people_detail_icon">{{ icon('clock') }}</div>
															<div class="page_header_people_detail_content_text">
																{{ hours.time }}
																<div class="page_header_people_detail_content_hint">{{ hours.label }}</div>
															</div>
														</div>
													</div>
												{% endfor %}
											</div>
										{% endif %}
									</div>
								</div>
							</div>
						{% endif %}
					</div>
					<div class="page_header_inner_image page_header_people_figure_lg">
						<figure class="page_header_people_figure">
							{% include "@partial-image" with {
								image: page.image,
								alt: page.alt,
								class: 'page_header_people',
								crop: 'portraitFull',
								max: 'med',
								sizes: [
									'(min-width: 1400px) 457px',
									'(min-width: 1220px) 399px',
									'(min-width: 980px) 319px',
									'0px',
								]
							} %}
						</figure>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.