JHU Carey Centers Component Library

Contact Info 

<!-- Contact Info -->
<div class="contact_block">
    <script type="application/ld+json">
        {
            '@context': 'http://schema.org',
            '@type': 'Person',
            'email': 'mailto:averylongemailaddress@university.edu',
            'image': '1',
            'jobTitle': 'Director of Department, Johns Hopkins Bloomberg School of Public Health',
            'name': 'Geraldine Trent',
            'telephone': '(410) 555-1234',
            'url': '#'
        }
    </script>
    <div class="fs-row">
        <div class="fs-cell">
            <div class="contact_block_inner">
                <figure class="contact_figure">

                    <img class="contact_image" srcset="https://images.fastspot.com/generic/500x500/1 500w, https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" sizes="(min-width: 1220px) 252px, (min-width: 1040px) 203px, (min-width: 540px) calc(19.38vw + 5px), calc(1.82vw + 97px)" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
                </figure>

                <div class="contact">
                    <div class="contact_header">
                        <ul class="contact_socials" aria-label="Social Links for Geraldine Trent">
                            <li class="contact_social">
                                <a class="contact_social_link" href="#" aria-label="Geraldine Trent 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>
                            </li>
                            <li class="contact_social">
                                <a class="contact_social_link" href="#" aria-label="Geraldine Trent X" target="_blank" rel="noopener"><span class="contact_social_link_icon"><svg class="icon icon_x">
                                            <use href="/images/icons.svg#x" />
                                        </svg></span><span class="contact_social_link_label">X</span></a>
                            </li>
                            <li class="contact_social">
                                <a class="contact_social_link" href="#" aria-label="Geraldine Trent 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>
                            </li>
                            <li class="contact_social">
                                <a class="contact_social_link" href="#" aria-label="Geraldine Trent 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 class="contact_info">
                            <h2 class="contact_name">

                                <a href="#" class="contact_name_link">
                                    <span class="contact_name_link_inner">
                                        <span class="contact_name_link_label">Geraldine Trent</span><span class="icon_nowrap contact_name_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg></span>
                                    </span>
                                </a>
                            </h2>
                            <div class="contact_title">Director of Department<br>Johns Hopkins Bloomberg School of Public Health</div>
                        </div>
                    </div>
                    <div class="contact_body">
                        <div class="contact_details">
                            <div class="contact_detail phone">
                                <div class="contact_detail_label">Phone</div>
                                <div class="contact_detail_items">
                                    <div class="contact_detail_item">
                                        <div class="contact_detail_item_header">
                                            <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_hint">office</div>
                                        </div>
                                        <div class="contact_detail_info">
                                            <a class="contact_detail_info_link" href="tel:4105555678">(410) 555-5678</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contact_detail location">
                                <div class="contact_detail_label">Location</div>
                                <div class="contact_detail_items">
                                    <div class="contact_detail_item">
                                        <div class="contact_detail_item_header">
                                            <div class="contact_detail_hint">office</div>
                                        </div>
                                        <div class="contact_detail_info">

                                            <a href="#" class="contact_detail_info_link">
                                                <span class="contact_detail_info_link_inner">
                                                    <span class="contact_detail_info_link_label">Appleseed Library, Room 214</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="contact_detail_item">
                                        <div class="contact_detail_item_header">
                                            <div class="contact_detail_hint">mailing address</div>
                                        </div>
                                        <div class="contact_detail_info">

                                            <a href="#" class="contact_detail_info_link">
                                                <span class="contact_detail_info_link_inner">
                                                    <span class="contact_detail_info_link_label">1234 Maple Bacon Ln.<br>Baltimore, MD 21211</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contact_detail email">
                                <div class="contact_detail_label">Email</div>
                                <div class="contact_detail_item">
                                    <div class="contact_detail_item_header">
                                        <div class="contact_detail_hint">office</div>
                                    </div>
                                    <div class="contact_detail_info">
                                        <a class="contact_detail_info_link" href="mailto:averylongemailaddress@university.edu">averylongemailaddress<wbr />@university.edu</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Contact Info -->
 
{#
	{% include '@component-contact-info' with {
		item: {
			name: 'Full Name',
			job_title: 'Job Title',
			image: '1',
			alt: '',
			phone_numbers: [
				{
					label: 'mobile',
					type: 'telephone',
					number: '(410) 555-1234'
				},
				{
					label: 'office',
					type: 'telephone',
					number: '(410) 555-5678'
				}
			],
			email: {label: 'office', address: 'email@university.edu'},
			locations: [
				{
					label: 'office',
					address: 'Appleseed Library, Room 214',
					url: '#'
				},
				{
					label: 'mailing address',
					address: '1234 Maple Bacon Ln.<br>Baltimore, MD 21211',
					url: '#'
				},
			],
			social_links: [
				{
					title: 'LinkedIn',
					url: '#'
				},
				{
					title: 'X',
					url: '#'
				},
				{
					title: 'Facebook',
					url: '#'
				},
				{
					title: 'Instagram',
					url: '#'
				}
			]
		}
	} %}
#}

<!-- Contact Info -->
<div class="contact_block">
	<script type="application/ld+json">
		{
			'@context': 'http://schema.org',
			'@type': 'Person',
			'email': 'mailto:{{ item.email.address }}',
			'image': '{{ item.image }}',
			'jobTitle': '{{ item.job_title|replace({"<br>": ", "}) }}',
			'name': '{{ item.name }}',
			'telephone': '{{ item.phone_numbers[0].number }}',
			'url': '#'
		}
	</script>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="contact_block_inner">
				{% if item.image %}
					<figure class="contact_figure">
						{% include '@partial-image' with {
							class: 'contact',
							alt: item.alt,
							image: item.image,
							loading: 'lazy',
							crop: 'square',
							max: 'xsml',
							sizes: [
								'(min-width: 1220px) 252px',
								'(min-width: 1040px) 203px',
								'(min-width: 540px) calc(19.38vw + 5px)',
								'calc(1.82vw + 97px)',
							]
						} %}
					</figure>
				{% endif %}

				<div class="contact">
					<div class="contact_header">
						{% if item.social_links %}
							<ul class="contact_socials" aria-label="Social Links for {{ item.name }}">
								{% for social in item.social_links %}
									<li class="contact_social">
										<a class="contact_social_link" href="{{ social.url }}" aria-label="{{ item.name }} {{ social.title }}" target="_blank" rel="noopener"><span class="contact_social_link_icon">{{ icon(social.title|lower) }}</span><span class="contact_social_link_label">{{ social.title }}</span></a>
									</li>
								{% endfor %}
							</ul>
						{% endif %}

						<div class="contact_info">
							<h2 class="contact_name">
								{% if item.url %}
									{% include "@partial-link" with {
										class: 'contact_name',
										title: item.name,
										url: item.url,
										icon: 'caret_right',
										nowrap: true,
									} %}
								{% else %}
									{{ item.name }}
								{% endif %}
							</h2>
							{% if item.job_title %}
								<div class="contact_title">{{ item.job_title }}</div>
							{% endif %}
						</div>
					</div>
					<div class="contact_body">
						<div class="contact_details">
							{% if item.phone_numbers %}
								<div class="contact_detail phone">
									<div class="contact_detail_label">Phone</div>
									<div class="contact_detail_items">
										{% for phone in item.phone_numbers %}
											<div class="contact_detail_item">
												<div class="contact_detail_item_header">
													<div class="contact_detail_hint">{{ phone.label }}</div>
												</div>
												<div class="contact_detail_info">
													<a class="contact_detail_info_link" href="tel:{{ tel(phone.number) }}">{{ phone.number }}</a>
												</div>
											</div>
										{% endfor %}
									</div>
								</div>
							{% endif %}
							{% if item.locations %}
								<div class="contact_detail location">
									<div class="contact_detail_label">Location</div>
									<div class="contact_detail_items">
										{% for location in item.locations %}
											<div class="contact_detail_item">
												<div class="contact_detail_item_header">
													<div class="contact_detail_hint">{{ location.label }}</div>
												</div>
												<div class="contact_detail_info">
													{% if location.url %}
														{% include "@partial-link" with {
															class: 'contact_detail_info',
															title: location.address,
															url: location.url,
														} %}
													{% else %}
														{{ location.address }}
													{% endif %}
												</div>
											</div>
										{% endfor %}
									</div>
								</div>
							{% endif %}
							{% if item.email %}
								<div class="contact_detail email">
									<div class="contact_detail_label">Email</div>
									<div class="contact_detail_item">
										<div class="contact_detail_item_header">
											<div class="contact_detail_hint">{{ item.email.label }}</div>
										</div>
										<div class="contact_detail_info">
											<a class="contact_detail_info_link" href="mailto:{{ item.email.address }}">{{ format_email(item.email.address) }}</a>
										</div>
									</div>
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Contact Info -->

No notes defined.