MSMU Component Library

Contact Details 

<div class="contact_details">
    <div class="contact_detail department">
        <div class="contact_detail_label">Department</div>
        <div class="contact_detail_item">
            <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">Department Name</span><span class="contact_detail_info_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div class="contact_detail contact child">
        <div class="contact_detail_label">Contact</div>
        <div class="contact_detail_item">
            <div class="contact_detail_info">

                <a href="tel:4105551234" class="contact_detail_info_link">
                    <span class="contact_detail_info_link_inner">
                        <span class="contact_detail_info_link_label">(410) 555-1234</span><span class="contact_detail_info_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </div>
        <div class="contact_detail_item">
            <div class="contact_detail_info">

                <a href="mailto:name@university.edu" class="contact_detail_info_link">
                    <span class="contact_detail_info_link_inner">
                        <span class="contact_detail_info_link_label">name@university.edu</span><span class="contact_detail_info_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                            <svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div class="contact_detail location">
        <div class="contact_detail_label">Location</div>
        <div class="contact_detail_item">

            <a href="#" class="contact_detail_info_link">
                <span class="contact_detail_info_link_inner">
                    <span class="contact_detail_info_link_label"></span><span class="contact_detail_info_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                        <svg class="icon icon_arrow_right">
                            <use href="/images/icons.svg#arrow_right" />
                        </svg>
                    </span>
                </span>
            </a>
            <div class="contact_detail_info"></div>
        </div>
    </div>
    <div class="contact_detail social">
        <div class="contact_detail_label">Connect</div>
        <ul class="contact_socials" aria-label="Social Links for Name">
            <li class="contact_social">
                <a class="contact_social_link" href="#" aria-label="Name Linkedin" target="_blank" rel="noopener"><span class="contact_social_link_label">Linkedin</span><span class="contact_social_link_icon">
                        <svg class="icon icon_arrow_right">
                            <use href="/images/icons.svg#arrow_right" />
                        </svg>
                    </span></a>
            </li>
        </ul>
    </div>
</div>
 
{#
	{% include '@partial-contact-details' with {
		item: {
			name: 'Name',
			phone_numbers: [
				{
					label: 'mobile',
					type: 'telephone',
					number: '(410) 555-1234'
				}
			],
			email: 'email@address.com',
			location: 'Location',
			departments: [
				{
					url: '#',
					name: 'Department'
				}
			],
			office_hours: [
				{
					label: 'Hours Label',
					hours: 'Time'
				}
			],
			social_links: [
				{
					title: 'Linkedin',
					url: '#'
				}
			]
		}
	} %}
#}
<div class="contact_details">
	{% if item.departments %}
	<div class="contact_detail department">
		<div class="contact_detail_label">Department</div>
		{% for department in item.departments %}
		<div class="contact_detail_item">
			<div class="contact_detail_info">
				{% include '@partial-link' with {
					title: department.name,
					url: department.url,
					class: 'contact_detail_info',
					icon: 'arrow_right',
					nowrap: true
				} %}
			</div>
		</div>
		{% endfor %}
	</div>
	{% endif %}
	{% if item.phone_numbers or item.email %}
	<div class="contact_detail contact child">
		<div class="contact_detail_label">Contact</div>
		{% for phone in item.phone_numbers %}
		<div class="contact_detail_item">
			<div class="contact_detail_info">
				{% include '@partial-link' with {
					title: phone.number,
					url: 'tel:' ~ tel(phone.number),
					class: 'contact_detail_info',
					icon: 'arrow_right',
					nowrap: true
				} %}
			</div>
		</div>
		{% endfor %}
		{% if item.email %}
		<div class="contact_detail_item">
			<div class="contact_detail_info">
				{% include '@partial-link' with {
					title: item.email,
					url: 'mailto:' ~ item.email,
					class: 'contact_detail_info',
					icon: 'arrow_right',
					nowrap: true
				} %}
			</div>
		</div>
		{% endif %}
	</div>
	{% endif %}
	{% if item.location %}
		<div class="contact_detail location">
			<div class="contact_detail_label">Location</div>
			<div class="contact_detail_item">
				{% include '@partial-link' with {
					title: item.location.campus.label,
					url: item.location.campus.url,
					class: 'contact_detail_info',
					icon: 'arrow_right',
					nowrap: true
				} %}
				<div class="contact_detail_info">{{ item.location.room }}</div>
			</div>
		</div>
	{% endif %}
	{% if item.social_links %}
		<div class="contact_detail social">
			<div class="contact_detail_label">Connect</div>
			<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_label">{{ social.title }}</span><span class="contact_social_link_icon">{{ icon("arrow_right") }}</span></a>{% if not loop.last %}<span class="contact_social_punctuation">, </span>{% endif %}
					</li>
				{% endfor %}
			</ul>
		</div>
	{% endif %}
</div>

No notes defined.