<!-- Contact Info -->
<section class="contact_info" id="contact_info_1" aria-labelledby="contact_info_1_name">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"email": "mailto:vestibulum.ante.ipsum@university.edu",
"image": "https://images.fastspot.com/framework/500x500/1",
"jobTitle": "Director of Department",
"name": "Contact Information",
"telephone": "(410) 555-5678",
"url": "#"
}
</script>
<div class="fs-row">
<div class="fs-cell">
<div class="contact_info_inner">
<div class="contact_info_header">
<div class="contact_info_header_group">
<h2 class="contact_info_name" id="contact_info_1_name">
Contact Information
</h2>
<div class="contact_info_title">
Director of Department
</div>
</div>
<figure class="contact_info_figure">
<img class="contact_info_image" srcset="https://images.fastspot.com/framework/300x300/1 300w, https://images.fastspot.com/framework/100x100/1 100w" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="contact_info_body">
<div class="contact_info_details">
<div class="contact_info_detail contact">
<div class="contact_info_detail_label">Contact</div>
<div class="contact_info_detail_items">
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_phone">
<use href="/images/icons.svg#phone" />
</svg>
</div>
<div class="contact_info_detail_item_header_label">
mobile
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_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="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_phone">
<use href="/images/icons.svg#phone" />
</svg>
</div>
<div class="contact_info_detail_item_header_label">
office
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_detail_item_body_label">
<a class="
button_text
" href="tel:4105555678">
<span class="button_text_inner">
<span class="button_text_label">
(410) 555-5678
</span>
</span>
</a>
</div>
</div>
</div>
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_mail">
<use href="/images/icons.svg#mail" />
</svg>
</div>
<div class="contact_info_detail_item_header_label">
Email Address
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_detail_item_body_label">
<a class="
button_text
" href="mailto:vestibulum.ante.ipsum@university.edu">
<span class="button_text_inner">
<span class="button_text_label">
vestibulum.ante.ipsum<wbr>@university.edu
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="contact_info_detail location">
<div class="contact_info_detail_label">
Location
</div>
<div class="contact_info_detail_items">
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_detail_item_body_label">
1234 Maple Bacon Ln.<br>Baltimore, MD 21211
</div>
</div>
</div>
</div>
</div>
<div class="contact_info_detail department">
<div class="contact_info_detail_label">
Department
</div>
<div class="contact_info_detail_items">
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_body">
<div class="contact_info_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="contact_info_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="contact_info_detail hours">
<div class="contact_info_detail_label">
Office Hours
</div>
<div class="contact_info_detail_items">
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="contact_info_detail_item_header_label">
Monday
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_detail_item_body_label">
9am - 5pm
</div>
</div>
</div>
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</div>
<div class="contact_info_detail_item_header_label">
Wednesday
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_detail_item_body_label">
11am-12pm
</div>
</div>
</div>
</div>
</div>
<div class="contact_info_detail social">
<div class="contact_info_detail_label" id="contact_info_1_name_detail_label_social">
Social
</div>
<div class="contact_info_detail_items">
<ul class="contact_info_socials" aria-labelledby="contact_info_1_name contact_info_1_name_detail_label_social">
<li class="contact_info_social" id="contact_info_1_social_1">
<a class="
contact_info_social_link
" aria-labelledby="contact_info_1_name contact_info_1_social_1" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="contact_info_social_link_inner">
<span class="contact_info_social_link_label">
LinkedIn
</span>
<span class="contact_info_social_link_icon" aria-hidden="true">
<svg class="icon icon_linkedin">
<use href="/images/icons.svg#linkedin" />
</svg>
</span>
</span>
</a>
</li>
<li class="contact_info_social" id="contact_info_1_social_2">
<a class="
contact_info_social_link
" aria-labelledby="contact_info_1_name contact_info_1_social_2" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="contact_info_social_link_inner">
<span class="contact_info_social_link_label">
X
</span>
<span class="contact_info_social_link_icon" aria-hidden="true">
<svg class="icon icon_x">
<use href="/images/icons.svg#x" />
</svg>
</span>
</span>
</a>
</li>
<li class="contact_info_social" id="contact_info_1_social_3">
<a class="
contact_info_social_link
" aria-labelledby="contact_info_1_name contact_info_1_social_3" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="contact_info_social_link_inner">
<span class="contact_info_social_link_label">
Facebook
</span>
<span class="contact_info_social_link_icon" aria-hidden="true">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
</span>
</a>
</li>
<li class="contact_info_social" id="contact_info_1_social_4">
<a class="
contact_info_social_link
" aria-labelledby="contact_info_1_name contact_info_1_social_4" target="_blank" rel="noopener" title="opens in a new window" href="#">
<span class="contact_info_social_link_inner">
<span class="contact_info_social_link_label">
Instagram
</span>
<span class="contact_info_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>
</section>
<!-- END: Contact Info -->
{#
{% include '@component-contact-info' with {
item: {
name: 'Full Name',
job_title: 'Director of Department',
image: '1',
alt: '',
phone_numbers: [
{
title: 'mobile',
number: '(410) 555-1234'
}
],
email: 'name@university.edu',
location: '1234 Maple Bacon Ln.<br>Baltimore, MD 21211',
office_hours: [
{
title: 'Monday',
hours: '9am - 5pm'
}
],
social_links: [
{
title: 'LinkedIn',
url: '#'
}
]
}
} %}
#}
{% set id = uniqid('contact_info') %}
<!-- Contact Info -->
<section
class="contact_info"
id="{{ id }}" aria-labelledby="{{ id }}_name"
>
<script type="application/ld+json">
{{
{
'@context': 'http://schema.org',
'@type': 'Person',
'email': 'mailto:' ~ 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>
<div class="fs-row">
<div class="fs-cell">
<div class="contact_info_inner">
<div class="contact_info_header">
<div class="contact_info_header_group">
<h2 class="contact_info_name" id="{{ id }}_name">
{{ item.name }}
</h2>
{% if item.job_title %}
<div class="contact_info_title">
{{ item.job_title }}
</div>
{% endif %}
</div>
{% if item.image %}
<figure class="contact_info_figure">
{% include '@partial-image' with {
class: 'contact_info_image',
alt: item.alt,
image: item.image,
loading: 'lazy',
crop: 'square',
max: 'xxsml'
} %}
</figure>
{% endif %}
</div>
<div class="contact_info_body">
<div class="contact_info_details">
{% if item.phone_numbers or item.email %}
<div class="contact_info_detail contact">
<div class="contact_info_detail_label">Contact</div>
<div class="contact_info_detail_items">
{% for phone in item.phone_numbers %}
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
{{ icon('phone') }}
</div>
<div class="contact_info_detail_item_header_label">
{{ phone.title }}
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_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="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
{{ icon('mail') }}
</div>
<div class="contact_info_detail_item_header_label">
Email Address
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_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="contact_info_detail location">
<div class="contact_info_detail_label">
Location
</div>
<div class="contact_info_detail_items">
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
{{ icon('place') }}
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_detail_item_body_label">
{{ item.location }}
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="contact_info_detail department">
<div class="contact_info_detail_label">
Department
</div>
<div class="contact_info_detail_items">
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_body">
{% for department in item.departments %}
<div class="contact_info_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="contact_info_detail hours">
<div class="contact_info_detail_label">
Office Hours
</div>
<div class="contact_info_detail_items">
{% for office_hours in item.office_hours %}
<div class="contact_info_detail_item">
<div class="contact_info_detail_item_header">
<div class="contact_info_detail_item_header_icon" aria-hidden="true">
{{ icon('clock') }}
</div>
<div class="contact_info_detail_item_header_label">
{{ office_hours.title }}
</div>
</div>
<div class="contact_info_detail_item_body">
<div class="contact_info_detail_item_body_label">
{{ office_hours.hours }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if item.social_links %}
<div class="contact_info_detail social">
<div
class="contact_info_detail_label"
id="{{ id }}_name_detail_label_social"
>
Social
</div>
<div class="contact_info_detail_items">
<ul
class="contact_info_socials"
aria-labelledby="{{ id }}_name {{ id }}_name_detail_label_social"
>
{% for social in item.social_links %}
<li class="contact_info_social" id="{{ id }}_social_{{ loop.index }}">
{% include '@partial-link' with {
classes: {
base: 'contact_info_social_link'
},
id: null,
title: social.title,
url: social.url,
icon: social.title|lower,
attributes: {
'aria-labelledby': id ~ '_name ' ~ id ~ '_social_' ~ loop.index,
'target': '_blank'
}
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END: Contact Info -->
No notes defined.