MSMU Component Library

Contact Details: Contact Info 

<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>
 
{#
	{% 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 %}
</div>

No notes defined.