<!-- 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-1234, (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">
<address class="contact-info__detail 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?1.0.0#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?1.0.0#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?1.0.0#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>
</address>
<div class="contact-info__detail 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?1.0.0#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 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 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?1.0.0#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?1.0.0#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 contact-info__detail--social">
<div class="contact-info__detail-label" id="contact-info-1__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__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?1.0.0#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?1.0.0#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?1.0.0#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?1.0.0#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')|join(', '),
'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'
} only %}
</figure>
{% endif %}
</div>
<div class="contact-info__body">
<div class="contact-info__details">
{% if item.phone_numbers or item.email %}
<address class="contact-info__detail 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'
},
title: phone.number,
url: 'tel:' ~ tel(phone.number)
} only %}
</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'
},
title: format_email(item.email),
url: 'mailto:' ~ item.email
} only %}
</div>
</div>
</div>
{% endif %}
</div>
</address>
{% endif %}
{% if item.location %}
<div class="contact-info__detail 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 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'
},
title: department.title,
url: department.url
} only %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% if item.office_hours %}
<div class="contact-info__detail 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 contact-info__detail--social">
<div
class="contact-info__detail-label"
id="{{ id ~ '__detail-label--social' }}"
>
Social
</div>
<div class="contact-info__detail-items">
<ul
class="contact-info__socials"
aria-labelledby="{{ id ~ '__name' }} {{ id ~ '__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'
},
title: social.title,
url: social.url,
icon: social.title|lower,
attributes: {
'aria-labelledby': id ~ '__name ' ~ id ~ '__social-' ~ loop.index,
'target': '_blank'
}
} only %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END: Contact Info -->
No notes defined.