Framework Component Library

Contact Info 

<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>

<!-- Contact Info -->
<section class="contact-info" id="contact-info-1" aria-labelledby="contact-info-1__name">
    <div class="fw-container">
        <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>
</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') %}
{% set has_group_title = item.name is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set base_tag = has_group_title ? 'section' : 'div' %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_tag = has_group_title ? 'h' ~ (heading_level + 1) : 'h' ~ (heading_level) %}

<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>

<!-- Contact Info -->
<{{ base_tag }}
	class="contact-info"
	id="{{ id }}"
	aria-labelledby="{{ id ~ '__name' }}"
>
	<div class="fw-container">
		<div class="contact-info__inner">
			<div class="contact-info__header">
				<div class="contact-info__header-group">
					<{{ group_heading_tag }} class="contact-info__name" id="{{ id ~ '__name' }}">
						{{- item.name -}}
					</{{ group_heading_tag }}>
					{% 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>
</{{ base_tag }}>
<!-- END: Contact Info -->

No notes defined.