Methodist University Component Library

Contact Details 

<div class="contact_details_block">
    <div class="contact_details">
        <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_icon">
                        <svg class="icon icon_mail">
                            <use href="/images/icons.svg#mail" />
                        </svg>
                    </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>
        <div class="contact_detail phone">
            <div class="contact_detail_label">Phone</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_info">
                        <a class="contact_detail_info_link" href="tel:4105551234">(410) 555-1234</a>
                    </div>
                </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_pin">
                            <use href="/images/icons.svg#pin" />
                        </svg>
                    </div>
                    <div class="contact_detail_info">Clark 117</div>
                </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_landmark">
                            <use href="/images/icons.svg#landmark" />
                        </svg>
                    </div>
                    <div class="contact_detail_info">
                        <a class="contact_detail_info_link" href="#">Business</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <figure class="contact_details_figure">

        <img class="contact_details_image" srcset="https://images.fastspot.com/methodist-university/300x300/1 300w, https://images.fastspot.com/methodist-university/100x100/1 100w" src="https://images.fastspot.com/methodist-university/100x100/1" alt="" loading="lazy" width="100" height="100">
    </figure>
</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_block">
	<div class="contact_details">
		{% 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_icon">{{ icon('mail') }}</div>
						<div class="contact_detail_info">
							<a class="contact_detail_info_link" href="mailto:{{ item.email }}">{{ item.email }}</a>
						</div>
					</div>
				</div>
			</div>
		{% endif %}
		{% if item.phone %}
			<div class="contact_detail phone">
				<div class="contact_detail_label">Phone</div>
				<div class="contact_detail_item">
					<div class="contact_detail_item_header">
						<div class="contact_detail_icon">{{ icon('phone') }}</div>
						<div class="contact_detail_info">
							<a class="contact_detail_info_link" href="tel:{{ tel(item.phone.number) }}">{{ item.phone.number }}</a>
						</div>
					</div>
				</div>
			</div>
		{% endif %}
		{% if item.location %}
			<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">{{ icon('pin') }}</div>
						<div class="contact_detail_info">{{ item.location }}</div>
					</div>
				</div>
			</div>
		{% endif %}
		{% if item.department %}
			<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">{{ icon('landmark') }}</div>
						<div class="contact_detail_info">
							<a class="contact_detail_info_link" href="{{ item.department.url }}">{{ item.department.name }}</a>
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	</div>
	{% if item.image %}
		<figure class="contact_details_figure">
			{% include '@partial-image' with {
				class: 'contact_details',
				alt: '',
				image: item.image,
				loading: 'lazy',
				sources: [
					img.square.xxsml,
					img.square.thumb
				]
			} %}
		</figure>
	{% endif %}
</div>

No notes defined.