MSMU Component Library

People Item 

<div class="people_item">
    <div class="people_item_header">
        <div class="people_item_info">
            <h2 class="people_item_name">

                <a href="page-directory-detail.html" class="people_item_name_link">
                    <span class="people_item_name_link_inner">
                        <span class="people_item_name_link_label">Department or Office Name</span><span class="people_item_name_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>
            </h2>
            <div class="people_item_title">Title</div>
        </div>
        <figure class="people_item_figure">

            <img class="people_item_image" srcset="https://images.fastspot.com/mount-saint-marys-university/300x300/1 300w, https://images.fastspot.com/mount-saint-marys-university/100x100/1 100w" src="https://images.fastspot.com/mount-saint-marys-university/100x100/1" alt="" loading="lazy" width="100" height="100">
        </figure>
    </div>
    <div class="people_item_body">
        <div class="people_item_details">
            <div class="people_item_detail department">
                <div class="people_item_detail_label">Department</div>
                <div class="people_item_detail_item">
                    <div class="people_item_detail_info">

                        <a href="#" class="people_item_detail_info_link">
                            <span class="people_item_detail_info_link_inner">
                                <span class="people_item_detail_info_link_label">Department</span><span class="people_item_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="people_item_detail contact">
                <div class="people_item_detail_label">Contact</div>
                <div class="people_item_detail_item">
                    <div class="people_item_detail_item_header">
                        <div class="people_item_detail_hint">Email: </div>
                    </div>
                    <div class="people_item_detail_info">

                        <a href="mailto:name@university.edu" class="people_item_detail_info_link">
                            <span class="people_item_detail_info_link_inner">
                                <span class="people_item_detail_info_link_label">name@university.edu</span><span class="people_item_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="people_item_detail_item">
                    <div class="people_item_detail_item_header">
                        <div class="people_item_detail_hint">Phone: </div>
                    </div>
                    <div class="people_item_detail_info">

                        <a href="tel:4105551234" class="people_item_detail_info_link">
                            <span class="people_item_detail_info_link_inner">
                                <span class="people_item_detail_info_link_label">(410) 555-1234</span><span class="people_item_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>
    </div>
</div>
 
{#
	{% include '@partial-people-item' with {
		item: {
			name: 'Name',
			title: 'Title',
			url: '#',
			image: '1',
			contact: {
				email: 'email@address.com',
				phone: '(410) 555-1234'
			},
			location: 'Location',
			department: {
				url: '#',
				label: 'Department'
			}
		}
	} %}
#}
<div class="people_item">
	<div class="people_item_header">
		<div class="people_item_info">
			<h2 class="people_item_name">
				{% if item.url %}
					{% include '@partial-link' with {
						title: item.name,
						url: item.url,
						class: 'people_item_name',
						js: false,
						icon: 'arrow_right',
						aria: '',
						nowrap: true
					} %}
				{% else %}
					<span class="people_item_name_label">{{ item.name }}</span>
				{% endif %}
			</h2>
			{% if item.title %}
			<div class="people_item_title">{{ item.title }}</div>
			{% endif %}
		</div>
		{% if item.image %}
		<figure class="people_item_figure">
			{% include '@partial-image' with {
				class: 'people_item',
				alt: '',
				image: item.image,
				loading: 'lazy',
				sources: [
					img.square.xxsml,
					img.square.thumb
				]
			} %}
		</figure>
		{% endif %}
	</div>
	<div class="people_item_body">
		<div class="people_item_details">
			{% if item.department %}
			<div class="people_item_detail department">
				<div class="people_item_detail_label">Department</div>
				<div class="people_item_detail_item">
					<div class="people_item_detail_info">
						{% include '@partial-link' with {
							title: item.department.label,
							url: item.department.url,
							class: 'people_item_detail_info',
							js: false,
							icon: 'arrow_right',
							aria: '',
							nowrap: true
						} %}
					</div>
				</div>
			</div>
			{% else %}
			<div class="people_item_detail department empty"></div>
			{% endif %}
			{% if item.contact %}
			<div class="people_item_detail contact">
				{% if item.contact.phone or item.contact.email %}
				<div class="people_item_detail_label">Contact</div>
				{% endif %}
				{% if item.contact.email %}
				<div class="people_item_detail_item">
					<div class="people_item_detail_item_header">
						<div class="people_item_detail_hint">Email: </div>
					</div>
					<div class="people_item_detail_info">
						{% include '@partial-link' with {
							title: item.contact.email,
							url: 'mailto:' ~ item.contact.email,
							class: 'people_item_detail_info',
							js: false,
							icon: 'arrow_right',
							aria: '',
							nowrap: true
						} %}
					</div>
				</div>
				{% endif %}
				{% if item.contact.phone %}
				<div class="people_item_detail_item">
					<div class="people_item_detail_item_header">
						<div class="people_item_detail_hint">Phone: </div>
					</div>
					<div class="people_item_detail_info">
						{% include '@partial-link' with {
							title: item.contact.phone,
							url: 'tel:' ~ tel(item.contact.phone),
							class: 'people_item_detail_info',
							js: false,
							icon: 'arrow_right',
							aria: '',
							nowrap: true
						} %}
					</div>
				</div>
				{% endif %}
			</div>
			{% else %}
			<div class="people_item_detail contact empty"></div>
			{% endif %}
		</div>
	</div>
</div>

No notes defined.