<!-- 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__row" id="related-people-1__row-1">
<article class="related-people__item" aria-labelledby="related-people-1__item-1-name">
<div class="related-people__item-header">
<div class="related-people__item-info">
<h3 class="related-people__item-name" id="related-people-1__item-1-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>
</h3>
<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">
<address class="related-people__item-detail 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?1.0.0#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?1.0.0#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>
</address>
<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 class="related-people__item-detail 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?1.0.0#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 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>
</article>
</li>
<li class="related-people__row" id="related-people-1__row-2">
<article class="related-people__item" aria-labelledby="related-people-1__item-2-name">
<div class="related-people__item-header">
<div class="related-people__item-info">
<h3 class="related-people__item-name" id="related-people-1__item-2-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>
</h3>
<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 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>
</article>
</li>
<li class="related-people__row" id="related-people-1__row-3">
<article class="related-people__item" aria-labelledby="related-people-1__item-3-name">
<div class="related-people__item-header">
<div class="related-people__item-info">
<h3 class="related-people__item-name" id="related-people-1__item-3-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>
</h3>
<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">
<address class="related-people__item-detail 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?1.0.0#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?1.0.0#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>
</address>
<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 class="related-people__item-detail 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?1.0.0#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 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>
</article>
</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 %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<li class="related-people__row" id="{{ id ~ '__row-' ~ loop.index }}">
<article class="related-people__item" aria-labelledby="{{ item_id ~ '-name' }}">
<div class="related-people__item-header">
<div class="related-people__item-info">
<h3 class="related-people__item-name" id="{{ item_id ~ '-name' }}">
{% include '@partial-link' with {
classes: {
base: 'related-people__item-name-link'
},
title: item.name,
url: item.url
} only %}
</h3>
<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'
} only %}
</figure>
{% endif %}
</div>
<div class="related-people__item-body">
<div class="related-people__item-details">
{% if item.contact.phone or item.contact.email %}
<address class="related-people__item-detail 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'
},
title: item.contact.phone,
url: 'tel:' ~ tel(item.contact.phone)
} only %}
</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'
},
title: format_email(item.contact.email),
url: 'mailto:' ~ item.contact.email
} only %}
</div>
</div>
</div>
{% endif %}
</div>
</address>
{% endif %}
{% 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'
} only %}
</figure>
{% endif %}
{% if item.location %}
<div class="related-people__item-detail 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 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'
},
title: department.title,
url: department.url
} only %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section>
<!-- END: Related People -->
No notes defined.