<!-- Related People -->
<section class="related_people" id="related_people_1" aria-labelledby="related_people_1_title" aria-describedby="related_people_1_description">
    <div class="related_people_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="related_people_header_inner">
                    <h2 class="related_people_title" id="related_people_1_title">
                        Related People
                    </h2>
                    <div class="related_people_description" id="related_people_1_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="related_people_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="related_people_items" aria-labelledby="related_people_1_title">
                    <li class="related_people_item" id="related_people_1_item_1">
                        <div class="related_people_item_header">
                            <div class="related_people_item_info">
                                <h2 class="related_people_item_name">

                                    <a class="
		related_people_item_name_link
				
	" href="#">
                                        <span class="related_people_item_name_link_inner">
                                            <span class="related_people_item_name_link_label">
                                                Cum sociis natoque penatibus
                                            </span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="related_people_item_title">
                                    Consectetuer adipiscing elit
                                </div>
                            </div>
                            <figure class="related_people_item_figure">

                                <img class="related_people_item_image" srcset="https://images.fastspot.com/framework/300x300/2 300w, https://images.fastspot.com/framework/100x100/2 100w" src="https://images.fastspot.com/framework/100x100/2" alt="" loading="lazy" width="100" height="100">
                            </figure>
                        </div>
                        <div class="related_people_item_body">
                            <div class="related_people_item_details">
                                <div class="related_people_item_detail contact">
                                    <div class="related_people_item_detail_label">
                                        Contact
                                    </div>
                                    <div class="related_people_item_detail_items">
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_header">
                                                <div class="related_people_item_detail_item_header_icon" aria-hidden="true">
                                                    <svg class="icon icon_phone">
                                                        <use href="/images/icons.svg#phone" />
                                                    </svg>
                                                </div>
                                                <div class="related_people_item_detail_item_header_label">
                                                    Phone
                                                </div>
                                            </div>
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="tel:4105551234">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                (410) 555-1234
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_header">
                                                <div class="related_people_item_detail_item_header_icon" aria-hidden="true">
                                                    <svg class="icon icon_mail">
                                                        <use href="/images/icons.svg#mail" />
                                                    </svg>
                                                </div>
                                                <div class="related_people_item_detail_item_header_label">
                                                    Email Address
                                                </div>
                                            </div>
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="mailto:npenatibus@university.edu">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                npenatibus<wbr>@university.edu
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="related_people_item_detail location">
                                    <div class="related_people_item_detail_label">
                                        Location
                                    </div>
                                    <div class="related_people_item_detail_items">
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_header">
                                                <div class="related_people_item_detail_item_header_icon" aria-hidden="true">
                                                    <svg class="icon icon_place">
                                                        <use href="/images/icons.svg#place" />
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">
                                                    2980 Falls Road,<br> Baltimore, MD 21211
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="related_people_item_detail department">
                                    <div class="related_people_item_detail_label">
                                        Department
                                    </div>
                                    <div class="related_people_item_detail_items">
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="#">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                Maecenas nec odio et ante tincidunt tempus
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="related_people_item" id="related_people_1_item_2">
                        <div class="related_people_item_header">
                            <div class="related_people_item_info">
                                <h2 class="related_people_item_name">

                                    <a class="
		related_people_item_name_link
				
	" href="#">
                                        <span class="related_people_item_name_link_inner">
                                            <span class="related_people_item_name_link_label">
                                                Vivamus elementum semper nisi
                                            </span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="related_people_item_title">
                                    Maecenas malesuada
                                </div>
                            </div>
                        </div>
                        <div class="related_people_item_body">
                            <div class="related_people_item_details">
                                <div class="related_people_item_detail department">
                                    <div class="related_people_item_detail_label">
                                        Department
                                    </div>
                                    <div class="related_people_item_detail_items">
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="#">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                Tincidunt
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="related_people_item" id="related_people_1_item_3">
                        <div class="related_people_item_header">
                            <div class="related_people_item_info">
                                <h2 class="related_people_item_name">

                                    <a class="
		related_people_item_name_link
				
	" href="#">
                                        <span class="related_people_item_name_link_inner">
                                            <span class="related_people_item_name_link_label">
                                                Phasellus viverra nulla ut metus varius laoreet.
                                            </span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="related_people_item_title">
                                    Etiam rhoncus
                                </div>
                            </div>
                            <figure class="related_people_item_figure">

                                <img class="related_people_item_image" srcset="https://images.fastspot.com/framework/300x300/4 300w, https://images.fastspot.com/framework/100x100/4 100w" src="https://images.fastspot.com/framework/100x100/4" alt="" loading="lazy" width="100" height="100">
                            </figure>
                        </div>
                        <div class="related_people_item_body">
                            <div class="related_people_item_details">
                                <div class="related_people_item_detail contact">
                                    <div class="related_people_item_detail_label">
                                        Contact
                                    </div>
                                    <div class="related_people_item_detail_items">
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_header">
                                                <div class="related_people_item_detail_item_header_icon" aria-hidden="true">
                                                    <svg class="icon icon_phone">
                                                        <use href="/images/icons.svg#phone" />
                                                    </svg>
                                                </div>
                                                <div class="related_people_item_detail_item_header_label">
                                                    Phone
                                                </div>
                                            </div>
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="tel:4105551234">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                (410) 555-1234
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_header">
                                                <div class="related_people_item_detail_item_header_icon" aria-hidden="true">
                                                    <svg class="icon icon_mail">
                                                        <use href="/images/icons.svg#mail" />
                                                    </svg>
                                                </div>
                                                <div class="related_people_item_detail_item_header_label">
                                                    Email Address
                                                </div>
                                            </div>
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="mailto:pretium@university.edu">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                pretium<wbr>@university.edu
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="related_people_item_detail location">
                                    <div class="related_people_item_detail_label">
                                        Location
                                    </div>
                                    <div class="related_people_item_detail_items">
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_header">
                                                <div class="related_people_item_detail_item_header_icon" aria-hidden="true">
                                                    <svg class="icon icon_place">
                                                        <use href="/images/icons.svg#place" />
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">
                                                    Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="related_people_item_detail department">
                                    <div class="related_people_item_detail_label">
                                        Department
                                    </div>
                                    <div class="related_people_item_detail_items">
                                        <div class="related_people_item_detail_item">
                                            <div class="related_people_item_detail_item_body">
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="#">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                Donec vitae sapien
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                                <div class="related_people_item_detail_item_body_label">

                                                    <a class="
		button_text
				
	" href="#">
                                                        <span class="button_text_inner">
                                                            <span class="button_text_label">
                                                                Libero venenatis faucibus
                                                            </span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- END: Related People -->
{#
	{% include '@component-people-related' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				name: 'Name',
				job_title: 'Job Title',
				url: '#',
				image: '1',
				alt: '',
				contact: {
					email: 'email',
					phone: 'phone'
				},
				location: 'Location',
				departments: [
					{
						url: '#',
						title: 'Department'
					}
				]
			}
		]
	} %}
#}

{% set id = uniqid('related_people') %}

<!-- Related People -->
<section
	class="related_people"
	id="{{ id }}"
	aria-labelledby="{{ id }}_title"
	{% if description %}aria-describedby="{{ id }}_description"{% endif %}
>
	<div class="related_people_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="related_people_header_inner">
					<h2 class="related_people_title" id="{{ id }}_title">
						{{ title }}
					</h2>
					{% if description %}
						<div class="related_people_description" id="{{ id }}_description">
							<p>{{ description }}</p>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="related_people_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="related_people_items" aria-labelledby="{{ id }}_title">
					{% for item in items %}
						<li class="related_people_item" id="{{ id ~ '_item_' ~ loop.index }}">
							<div class="related_people_item_header">
								<div class="related_people_item_info">
									<h2 class="related_people_item_name">
										{% include '@partial-link' with {
											classes: {
												base: 'related_people_item_name_link'
											},
											id: null,
											title: item.name,
											url: item.url
										} %}
									</h2>
									<div class="related_people_item_title">
										{{ item.job_title }}
									</div>
								</div>
								{% if item.image %}
									<figure class="related_people_item_figure">
										{% include '@partial-image' with {
											class: 'related_people_item_image',
											image: item.image,
											alt: item.alt,
											loading: 'lazy',
											crop: 'square',
											max: 'xxsml'
										} %}
									</figure>
								{% endif %}
							</div>
							<div class="related_people_item_body">
								<div class="related_people_item_details">
									{% if item.contact.phone or item.contact.email %}
										<div class="related_people_item_detail contact">
											<div class="related_people_item_detail_label">
												Contact
											</div>
											<div class="related_people_item_detail_items">
												{% if item.contact.phone %}
													<div class="related_people_item_detail_item">
														<div class="related_people_item_detail_item_header">
															<div class="related_people_item_detail_item_header_icon" aria-hidden="true">
																{{ icon('phone') }}
															</div>
															<div class="related_people_item_detail_item_header_label">
																Phone
															</div>
														</div>
														<div class="related_people_item_detail_item_body">
															<div class="related_people_item_detail_item_body_label">
																{% include '@partial-link' with {
																	classes: {
																		base: 'button_text'
																	},
																	id: null,
																	title: item.contact.phone,
																	url: 'tel:' ~ tel(item.contact.phone)
																} %}
															</div>
														</div>
													</div>
												{% endif %}
												{% if item.contact.email %}
													<div class="related_people_item_detail_item">
														<div class="related_people_item_detail_item_header">
															<div class="related_people_item_detail_item_header_icon" aria-hidden="true">
																{{ icon('mail') }}
															</div>
															<div class="related_people_item_detail_item_header_label">
																Email Address
															</div>
														</div>
														<div class="related_people_item_detail_item_body">
															<div class="related_people_item_detail_item_body_label">
																{% include '@partial-link' with {
																	classes: {
																		base: 'button_text'
																	},
																	id: null,
																	title: format_email(item.contact.email),
																	url: 'mailto:' ~ item.contact.email
																} %}
															</div>
														</div>
													</div>
												{% endif %}
											</div>
										</div>
									{% endif %}
									{% if item.location %}
										<div class="related_people_item_detail location">
											<div class="related_people_item_detail_label">
												Location
											</div>
											<div class="related_people_item_detail_items">
												<div class="related_people_item_detail_item">
													<div class="related_people_item_detail_item_header">
														<div class="related_people_item_detail_item_header_icon" aria-hidden="true">
															{{ icon('place') }}
														</div>
													</div>
													<div class="related_people_item_detail_item_body">
														<div class="related_people_item_detail_item_body_label">
															{{ item.location }}
														</div>
													</div>
												</div>
											</div>
										</div>
									{% endif %}
									<div class="related_people_item_detail department">
										<div class="related_people_item_detail_label">
											Department
										</div>
										<div class="related_people_item_detail_items">
											<div class="related_people_item_detail_item">
												<div class="related_people_item_detail_item_body">
													{% for department in item.departments %}
														<div class="related_people_item_detail_item_body_label">
															{% include '@partial-link' with {
																classes: {
																	base: 'button_text'
																},
																id: null,
																title: department.title,
																url: department.url
															} %}
														</div>
													{% endfor %}
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- END: Related People -->

No notes defined.