<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Place",
"name": null,
"telephone": "(410) 555-1234",
"url": "#",
"address": "2980 Falls Road Baltimore, MD 21211"
}
</script>
<!-- Person Meta -->
<div class="department_meta" id="department_meta_1">
<div class="fs-row">
<div class="fs-cell">
<div class="department_meta_inner">
<div class="department_meta_details">
<div class="department_meta_detail contact">
<div class="department_meta_detail_label">
Contact
</div>
<div class="department_meta_detail_items">
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_phone">
<use href="/images/icons.svg#phone" />
</svg>
</div>
<div class="department_meta_detail_item_header_label">
mobile
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_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="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_phone">
<use href="/images/icons.svg#phone" />
</svg>
</div>
<div class="department_meta_detail_item_header_label">
office
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_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="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_mail">
<use href="/images/icons.svg#mail" />
</svg>
</div>
<div class="department_meta_detail_item_header_label">
Email Address
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_meta_detail_item_body_label">
<a class="
button_text
" href="mailto:nascetur.ridiculus@university.edu">
<span class="button_text_inner">
<span class="button_text_label">
nascetur.ridiculus<wbr>@university.edu
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="department_meta_detail location">
<div class="department_meta_detail_label">
Location
</div>
<div class="department_meta_detail_items">
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_meta_detail_item_body_label">
Appleseed Library<br>Room 214<br>Curabitur ullamcorper ultricies
</div>
</div>
</div>
</div>
</div>
<div class="department_meta_detail department">
<div class="department_meta_detail_label">
Department
</div>
<div class="department_meta_detail_items">
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_body">
<div class="department_meta_detail_item_body_label">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Vivamus elementum semper
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="department_meta_detail hours">
<div class="department_meta_detail_label">
Office Hours
</div>
<div class="department_meta_detail_items">
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="department_meta_detail_item_header_label">
Monday
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_meta_detail_item_body_label">
9am - 5pm
</div>
</div>
</div>
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="department_meta_detail_item_header_label">
Wednesday
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_meta_detail_item_body_label">
11am-12pm
</div>
</div>
</div>
</div>
</div>
<div class="department_meta_detail social">
<div class="department_meta_detail_label" id="department_meta_1_detail_label_social">
Social
</div>
<div class="department_meta_detail_items">
<ul class="department_meta_socials" aria-labelledby="page_header_title department_meta_1_detail_label_social">
<li class="department_meta_social" id="department_meta_1_social_1">
<a class="
department_meta_social_link
" aria-labelledby=" department_meta_1_social_1" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="department_meta_social_link_inner">
<span class="department_meta_social_link_label">
Linkedin
</span>
<span class="department_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="department_meta_social" id="department_meta_1_social_2">
<a class="
department_meta_social_link
" aria-labelledby=" department_meta_1_social_2" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="department_meta_social_link_inner">
<span class="department_meta_social_link_label">
X
</span>
<span class="department_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="department_meta_social" id="department_meta_1_social_3">
<a class="
department_meta_social_link
" aria-labelledby=" department_meta_1_social_3" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="department_meta_social_link_inner">
<span class="department_meta_social_link_label">
Facebook
</span>
<span class="department_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="department_meta_social" id="department_meta_1_social_4">
<a class="
department_meta_social_link
" aria-labelledby=" department_meta_1_social_4" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="department_meta_social_link_inner">
<span class="department_meta_social_link_label">
Instagram
</span>
<span class="department_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>
<!-- END: Person Meta -->
{#
{% include '@component-department-meta' with {
item: {
phone_numbers: [
{
title: 'Phone Label',
type: 'Phone Type',
number: '(410) 555-1234'
}
],
departments: [
{
title: 'Department',
url: '#'
}
],
office_hours: [
{
title: 'Monday',
hours: '9am - 5pm'
}
],
email: 'email@address.com',
location: 'Location',
social_links: [
{
title: 'Linkedin',
url: '#'
}
]
}
} %}
#}
{% set id = uniqid('department_meta') %}
<script type="application/ld+json">
{{
{
'@context': 'http://schema.org',
'@type': 'Place',
'name': item.name,
'telephone': item.phone_numbers|column('number')[1],
'url': '#',
'address': config.street ~ ' ' ~ config.city ~ ', ' ~ config.state ~ ' ' ~ config.zip
}|json_encode
}}
</script>
<!-- Person Meta -->
<div class="department_meta" id="{{ id }}">
<div class="fs-row">
<div class="fs-cell">
<div class="department_meta_inner">
<div class="department_meta_details">
{% if item.phone_numbers or item.email %}
<div class="department_meta_detail contact">
<div class="department_meta_detail_label">
Contact
</div>
<div class="department_meta_detail_items">
{% for phone in item.phone_numbers %}
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('phone') }}
</div>
<div class="department_meta_detail_item_header_label">
{{ phone.title }}
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_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="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('mail') }}
</div>
<div class="department_meta_detail_item_header_label">
Email Address
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_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="department_meta_detail location">
<div class="department_meta_detail_label">
Location
</div>
<div class="department_meta_detail_items">
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('place') }}
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_meta_detail_item_body_label">
{{ item.location }}
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="department_meta_detail department">
<div class="department_meta_detail_label">
Department
</div>
<div class="department_meta_detail_items">
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_body">
{% for department in item.departments %}
<div class="department_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="department_meta_detail hours">
<div class="department_meta_detail_label">
Office Hours
</div>
<div class="department_meta_detail_items">
{% for office_hours in item.office_hours %}
<div class="department_meta_detail_item">
<div class="department_meta_detail_item_header">
<div class="department_meta_detail_item_header_icon" aria-hidden="true">
{{ icon('clock') }}
</div>
<div class="department_meta_detail_item_header_label">
{{ office_hours.title }}
</div>
</div>
<div class="department_meta_detail_item_body">
<div class="department_meta_detail_item_body_label">
{{ office_hours.hours }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if item.social_links %}
<div class="department_meta_detail social">
<div
class="department_meta_detail_label"
id="{{ id }}_detail_label_social"
>
Social
</div>
<div class="department_meta_detail_items">
<ul
class="department_meta_socials"
aria-labelledby="page_header_title {{ id }}_detail_label_social"
>
{% for social in item.social_links %}
<li class="department_meta_social" id="{{ id }}_social_{{ loop.index }}">
{% include '@partial-link' with {
classes: {
base: 'department_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>
<!-- END: Person Meta -->
No notes defined.