<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"email": "vulputate-eget@university.edu",
"image": "https://images.fastspot.com/framework/500x500/1",
"jobTitle": null,
"name": "Jane Smith",
"telephone": "(410) 555-1234",
"url": "#"
}
</script>
<!-- Person Meta -->
<div class="people_meta" id="people_meta_1">
<div class="fs-row">
<div class="fs-cell">
<div class="people_meta_inner">
<div class="people_meta_body">
<figure class="people_meta_figure">
<img class="people_meta_image" srcset="https://images.fastspot.com/framework/500x500/undefined 500w, https://images.fastspot.com/framework/300x300/undefined 300w, https://images.fastspot.com/framework/100x100/undefined 100w" src="https://images.fastspot.com/framework/100x100/undefined" alt="" loading="lazy" width="100" height="100">
</figure>
<div class="people_meta_details">
<div class="people_meta_detail contact">
<div class="people_meta_detail_label">
Contact
</div>
<div class="people_meta_detail_items">
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_phone">
<use href="/images/icons.svg#phone" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
mobile
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_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="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_phone">
<use href="/images/icons.svg#phone" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
office
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_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="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_mail">
<use href="/images/icons.svg#mail" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
Email Address
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
<a class="
button_text
" href="mailto:vulputate-eget@university.edu">
<span class="button_text_inner">
<span class="button_text_label">
vulputate-eget<wbr>@university.edu
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="people_meta_detail location">
<div class="people_meta_detail_label">
Location
</div>
<div class="people_meta_detail_items">
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
Appleseed Library<br>Room 214<br>Curabitur ullamcorper ultricies
</div>
</div>
</div>
</div>
</div>
<div class="people_meta_detail department">
<div class="people_meta_detail_label">
Department
</div>
<div class="people_meta_detail_items">
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Phasellus leo dolor
</span>
</span>
</a>
</div>
<div class="people_meta_detail_item_body_label">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Ut varius tincidunt libero
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="people_meta_detail hours">
<div class="people_meta_detail_label">
Office Hours
</div>
<div class="people_meta_detail_items">
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
Monday
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
9am - 5pm
</div>
</div>
</div>
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
Tuesday
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
11am-12pm
</div>
</div>
</div>
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
Wednesday
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
9am - 5pm
</div>
</div>
</div>
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
Thursday
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
11am-12pm
</div>
</div>
</div>
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="people_meta_detail_item_header_label">
Friday
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
9am - 5pm
</div>
</div>
</div>
</div>
</div>
<div class="people_meta_detail social">
<div class="people_meta_detail_label" id="people_meta_1_detail_label_social">
Social
</div>
<div class="people_meta_detail_items">
<ul class="people_meta_socials" aria-labelledby="page_header_title people_meta_1_detail_label_social">
<li class="people_meta_social" id="people_meta_1_social_1">
<a class="
people_meta_social_link
" aria-labelledby=" people_meta_1_social_1" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="people_meta_social_link_inner">
<span class="people_meta_social_link_label">
Linkedin
</span>
<span class="people_meta_social_link_icon" aria-hidden="true">
<svg class="icon icon_linkedin">
<use href="/images/icons.svg#linkedin" />
</svg>
</span>
</span>
</a>
</li>
<li class="people_meta_social" id="people_meta_1_social_2">
<a class="
people_meta_social_link
" aria-labelledby=" people_meta_1_social_2" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="people_meta_social_link_inner">
<span class="people_meta_social_link_label">
X
</span>
<span class="people_meta_social_link_icon" aria-hidden="true">
<svg class="icon icon_x">
<use href="/images/icons.svg#x" />
</svg>
</span>
</span>
</a>
</li>
<li class="people_meta_social" id="people_meta_1_social_3">
<a class="
people_meta_social_link
" aria-labelledby=" people_meta_1_social_3" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="people_meta_social_link_inner">
<span class="people_meta_social_link_label">
Facebook
</span>
<span class="people_meta_social_link_icon" aria-hidden="true">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
</span>
</a>
</li>
<li class="people_meta_social" id="people_meta_1_social_4">
<a class="
people_meta_social_link
" aria-labelledby=" people_meta_1_social_4" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="people_meta_social_link_inner">
<span class="people_meta_social_link_label">
Instagram
</span>
<span class="people_meta_social_link_icon" aria-hidden="true">
<svg class="icon icon_instagram">
<use href="/images/icons.svg#instagram" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Person Meta -->
{#
{% include '@component-people-meta' with {
item: {
image: '1',
alt: '',
phone_numbers: [
{
title: 'Phone Label',
type: 'Phone Type',
number: '(410) 555-1234'
}
],
office_hours: [
{
title: 'Monday',
hours: '9am - 5pm'
}
],
email: 'email@address.com',
location: 'Location',
departments: [
{
url: '#',
title: 'department'
}
],
social_links: [
{
title: 'Linkedin',
url: '#'
}
]
}
} %}
#}
{% set id = uniqid('people_meta') %}
<script type="application/ld+json">
{{
{
'@context': 'http://schema.org',
'@type': 'Person',
'email': item.email,
'image': 'https://images.fastspot.com/' ~ config.images ~ '/' ~ img.square.xsml.width ~ 'x' ~ img.square.xsml.width ~ '/' ~ item.image,
'jobTitle': item.job_title,
'name': item.name,
'telephone': item.phone_numbers|column('number')[1],
'url': '#'
}|json_encode
}}
</script>
<!-- Person Meta -->
<div class="people_meta" id="{{ id }}">
<div class="fs-row">
<div class="fs-cell">
<div class="people_meta_inner">
<div class="people_meta_body">
{% if item.image %}
<figure class="people_meta_figure">
{% include '@partial-image' with {
class: 'people_meta_image',
alt: alt,
image: image,
crop: 'square',
max: 'xsml'
} %}
</figure>
{% endif %}
<div class="people_meta_details">
{% if item.phone_numbers or item.email %}
<div class="people_meta_detail contact">
<div class="people_meta_detail_label">
Contact
</div>
<div class="people_meta_detail_items">
{% for phone in item.phone_numbers %}
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('phone') }}
</div>
<div class="people_meta_detail_item_header_label">
{{ phone.title }}
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
{% include '@partial-link' with {
classes: {
base: 'button_text'
},
id: null,
title: phone.number,
url: 'tel:' ~ tel(phone.number)
} %}
</div>
</div>
</div>
{% endfor %}
{% if item.email %}
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('mail') }}
</div>
<div class="people_meta_detail_item_header_label">
Email Address
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
{% include '@partial-link' with {
classes: {
base: 'button_text'
},
id: null,
title: format_email(item.email),
url: 'mailto:' ~ item.email
} %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if item.location %}
<div class="people_meta_detail location">
<div class="people_meta_detail_label">
Location
</div>
<div class="people_meta_detail_items">
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('place') }}
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
{{ item.location }}
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="people_meta_detail department">
<div class="people_meta_detail_label">
Department
</div>
<div class="people_meta_detail_items">
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_body">
{% for department in item.departments %}
<div class="people_meta_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>
{% if item.office_hours %}
<div class="people_meta_detail hours">
<div class="people_meta_detail_label">
Office Hours
</div>
<div class="people_meta_detail_items">
{% for office_hours in item.office_hours %}
<div class="people_meta_detail_item">
<div class="people_meta_detail_item_header">
<div class="people_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('clock') }}
</div>
<div class="people_meta_detail_item_header_label">
{{ office_hours.title }}
</div>
</div>
<div class="people_meta_detail_item_body">
<div class="people_meta_detail_item_body_label">
{{ office_hours.hours }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if item.social_links %}
<div class="people_meta_detail social">
<div class="people_meta_detail_label" id="{{ id }}_detail_label_social">
Social
</div>
<div class="people_meta_detail_items">
<ul
class="people_meta_socials"
aria-labelledby="page_header_title {{ id }}_detail_label_social"
>
{% for social in item.social_links %}
<li class="people_meta_social" id="{{ id }}_social_{{ loop.index }}">
{% include '@partial-link' with {
classes: {
base: 'people_meta_social_link'
},
id: null,
title: social.title,
url: social.url,
icon: social.title|lower,
attributes: {
'aria-labelledby': page_header_title ~ ' ' ~ id ~ '_social_' ~ loop.index,
'target': '_blank'
}
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Person Meta -->
No notes defined.