<!-- Contact Info -->
<div class="contact_block">
    <script type="application/ld+json">
        {
            '@context': 'http://schema.org',
            '@type': 'Person',
            'email': 'mailto:name@university.edu',
            'image': '1',
            'jobTitle': 'Director of Department',
            'name': 'Full Name',
            'telephone': '(410) 555-1234',
            'url': '#'
        }
    </script>
    <div class="fs-row">
        <div class="fs-cell">
            <div class="contact_block_inner">
                <div class="contact">
                    <div class="contact_header">
                        <div class="contact_info">
                            <h2 class="contact_name">Full Name</h2>
                            <div class="contact_title">Director of Department</div>
                        </div>
                        <figure class="contact_figure">

                            <img class="contact_image" srcset="https://images.fastspot.com/hamilton/300x300/1 300w, https://images.fastspot.com/hamilton/100x100/1 100w" src="https://images.fastspot.com/hamilton/100x100/1" alt="" loading="lazy" width="100" height="100">
                        </figure>
                    </div>
                    <div class="contact_body">

                        <div class="contact_details">
                            <div class="contact_detail contact">
                                <div class="contact_detail_label">Contact</div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_icon">
                                            <svg class="icon icon_phone">
                                                <use href="/images/icons.svg#phone" />
                                            </svg>
                                        </div>
                                        <div class="contact_detail_hint">mobile</div>
                                    </div>
                                    <div class="contact_detail_info">
                                        <a class="contact_detail_info_link" href="tel:4105551234">(410) 555-1234</a>
                                    </div>
                                </div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_icon">
                                            <svg class="icon icon_phone">
                                                <use href="/images/icons.svg#phone" />
                                            </svg>
                                        </div>
                                        <div class="contact_detail_hint">office</div>
                                    </div>
                                    <div class="contact_detail_info">
                                        <a class="contact_detail_info_link" href="tel:4105551234">(410) 555-1234</a>
                                    </div>
                                </div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_icon">
                                            <svg class="icon icon_mail">
                                                <use href="/images/icons.svg#mail" />
                                            </svg>
                                        </div>
                                        <div class="contact_detail_hint">Email Address</div>
                                    </div>
                                    <div class="contact_detail_info">
                                        <a class="contact_detail_info_link" href="mailto:name@university.edu">name@university.edu</a>
                                    </div>
                                </div>
                            </div>
                            <div class="contact_detail location">
                                <div class="contact_detail_label">Location</div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_icon">
                                            <svg class="icon icon_place">
                                                <use href="/images/icons.svg#place" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="contact_detail_info">1234 Maple Bacon Ln.<br>Baltimore, MD 21211</div>
                                </div>
                            </div>
                            <div class="contact_detail department">
                                <div class="contact_detail_label">Department</div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_icon">
                                            <svg class="icon icon_building">
                                                <use href="/images/icons.svg#building" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="contact_detail_info">
                                        <a class="contact_detail_info_link" href="#">Department Name</a>
                                    </div>
                                </div>
                            </div>
                            <div class="contact_detail hours">
                                <div class="contact_detail_label">Office Hours</div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_icon">
                                            <svg class="icon icon_clock">
                                                <use href="/images/icons.svg#clock" />
                                            </svg>
                                        </div>
                                        <div class="contact_detail_hint">Monday</div>
                                    </div>
                                    <div class="contact_detail_info">9am - 5pm</div>
                                </div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_icon">
                                            <svg class="icon icon_clock">
                                                <use href="/images/icons.svg#clock" />
                                            </svg>
                                        </div>
                                        <div class="contact_detail_hint">Wednesday</div>
                                    </div>
                                    <div class="contact_detail_info">11am-12pm</div>
                                </div>
                            </div>
                            <div class="contact_detail social">
                                <div class="contact_detail_label">Social</div>
                                <ul class="contact_socials" aria-label="Social Links for Full Name">
                                    <li class="contact_social">
                                        <a class="contact_social_link" href="#" aria-label="Full Name LinkedIn" target="_blank" rel="noopener"><span class="contact_social_link_icon">
                                                <svg class="icon icon_linkedin">
                                                    <use href="/images/icons.svg#linkedin" />
                                                </svg>
                                            </span><span class="contact_social_link_label">LinkedIn</span></a><span class="contact_social_punctuation">, </span>
                                    </li>
                                    <li class="contact_social">
                                        <a class="contact_social_link" href="#" aria-label="Full Name Twitter" target="_blank" rel="noopener"><span class="contact_social_link_icon">
                                                <svg class="icon icon_twitter">
                                                    <use href="/images/icons.svg#twitter" />
                                                </svg>
                                            </span><span class="contact_social_link_label">Twitter</span></a><span class="contact_social_punctuation">, </span>
                                    </li>
                                    <li class="contact_social">
                                        <a class="contact_social_link" href="#" aria-label="Full Name Facebook" target="_blank" rel="noopener"><span class="contact_social_link_icon">
                                                <svg class="icon icon_facebook">
                                                    <use href="/images/icons.svg#facebook" />
                                                </svg>
                                            </span><span class="contact_social_link_label">Facebook</span></a><span class="contact_social_punctuation">, </span>
                                    </li>
                                    <li class="contact_social">
                                        <a class="contact_social_link" href="#" aria-label="Full Name Instagram" target="_blank" rel="noopener"><span class="contact_social_link_icon">
                                                <svg class="icon icon_instagram">
                                                    <use href="/images/icons.svg#instagram" />
                                                </svg>
                                            </span><span class="contact_social_link_label">Instagram</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Contact Info -->
{#
	{% include '@component-contact-info' with {
		item: {
			name: 'Full Name',
			title: 'Director of Department',
			image: '1',
			phone_numbers: [
				{
					label: 'mobile',
					type: 'telephone',
					number: '(410) 555-1234'
				}
			],
			email: 'name@university.edu',
			location: '1234 Maple Bacon Ln.<br>Baltimore, MD 21211',
			office_hours: [
				{
					label: 'Monday',
					hours: '9am - 5pm'
				}
			],
			social_links: [
				{
					title: 'LinkedIn',
					url: '#'
				}
			]
		}
	} %}
#}

<!-- Contact Info -->
<div class="contact_block">
	<script type="application/ld+json">
		{
			'@context': 'http://schema.org',
			'@type': 'Person',
			'email': 'mailto:{{ item.email }}',
			'image': '{{ item.image }}',
			'jobTitle': '{{ item.title }}',
			'name': '{{ item.name }}',
			'telephone': '{{ item.phone_numbers[0].number }}',
			'url': '#'
		}
	</script>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="contact_block_inner">
				<div class="contact">
					<div class="contact_header">
						<div class="contact_info">
							<h2 class="contact_name">{{ item.name }}</h2>
							{% if item.title %}
								<div class="contact_title">{{ item.title }}</div>
							{% endif %}
						</div>
						{% if item.image %}
							<figure class="contact_figure">
								{% include '@partial-image' with {
									class: 'contact',
									alt: '',
									image: item.image,
									loading: 'lazy',
									sources: [
										img.square.xxsml,
										img.square.thumb
									]
								} %}
							</figure>
						{% endif %}
					</div>
					<div class="contact_body">
						{% render '@partial-contact-details' with {
							item: item
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Contact Info -->

No notes defined.