<div class="entity">
    <div class="entity_header">
        <div class="entity_info">
            <h2 class="entity_name">
                <a class="entity_name_link" href="page-directory-detail.html">Department or Office Name</a>
            </h2>
            <div class="entity_title">Title</div>
        </div>
        <figure class="entity_figure">

            <img class="entity_image" srcset="https://images.fastspot.com/hamilton/300x300/1 300w, https://images.fastspot.com/hamilton/100x100/1 100w" src="https://images.fastspot.com/hamilton/100x100/1" alt="" loading="lazy" width="100" height="100">
        </figure>
    </div>
    <div class="entity_body">
        <div class="entity_details">
            <div class="entity_detail contact">
                <div class="entity_detail_label">Contact</div>
                <div class="entity_detail_item">
                    <div class="entity_detail_item_header">
                        <div class="entity_detail_icon">
                            <svg class="icon icon_phone">
                                <use href="/images/icons.svg#phone" />
                            </svg>
                        </div>
                        <div class="entity_detail_hint">Phone: </div>
                    </div>
                    <div class="entity_detail_info">
                        <a class="entity_detail_info_link" href="tel:4105551234">
                            <span class="entity_detail_info_label">(410) 555-1234</span>
                        </a>
                    </div>
                </div>
                <div class="entity_detail_item">
                    <div class="entity_detail_item_header">
                        <div class="entity_detail_icon">
                            <svg class="icon icon_mail">
                                <use href="/images/icons.svg#mail" />
                            </svg>
                        </div>
                        <div class="entity_detail_hint">Email: </div>
                    </div>
                    <div class="entity_detail_info">
                        <a class="entity_detail_info_link" href="mailto:name@university.edu">
                            <span class="entity_detail_info_label">name@university.edu</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="entity_detail department">
                <div class="entity_detail_label">Department</div>
                <div class="entity_detail_item">
                    <div class="entity_detail_item_header">
                        <div class="entity_detail_icon">
                            <svg class="icon icon_building">
                                <use href="/images/icons.svg#building" />
                            </svg>
                        </div>
                    </div>
                    <div class="entity_detail_info">
                        <a class="entity_detail_info_link" href="#">
                            <span class="entity_detail_info_label">Department</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="entity_detail location">
                <div class="entity_detail_item_header">
                    <div class="entity_detail_label">Location</div>
                </div>
                <div class="entity_detail_item">
                    <div class="entity_detail_item_header">
                        <div class="entity_detail_icon">
                            <svg class="icon icon_place">
                                <use href="/images/icons.svg#place" />
                            </svg>
                        </div>
                    </div>
                    <div class="entity_detail_info">
                        <span class="entity_detail_info_label">Location</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{#
	{% include '@partial-entity-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="entity">
	<div class="entity_header">
		<div class="entity_info">
			<h2 class="entity_name">
				<a class="entity_name_link" href="{{ item.url }}">{{ item.name }}</a>
			</h2>
			{% if item.title %}
				<div class="entity_title">{{ item.title }}</div>
			{% endif %}
		</div>
		{% if item.image %}
			<figure class="entity_figure">
				{% include '@partial-image' with {
					class: 'entity',
					alt: '',
					image: item.image,
					loading: 'lazy',
					sources: [
						img.square.xxsml,
						img.square.thumb
					]
				} %}
			</figure>
		{% endif %}
	</div>
	<div class="entity_body">
		<div class="entity_details">
			{% if item.contact %}
				<div class="entity_detail contact">
					{% if item.contact.phone or item.contact.email %}
						<div class="entity_detail_label">Contact</div>
					{% endif %}
					{% if item.contact.phone %}
						<div class="entity_detail_item">
							<div class="entity_detail_item_header">
								<div class="entity_detail_icon">{{ icon('phone') }}</div>
								<div class="entity_detail_hint">Phone: </div>
							</div>
							<div class="entity_detail_info">
								<a class="entity_detail_info_link" href="tel:{{ tel(item.contact.phone) }}">
									<span class="entity_detail_info_label">{{ item.contact.phone }}</span>
								</a>
							</div>
						</div>
					{% endif %}
					{% if item.contact.email %}
						<div class="entity_detail_item">
							<div class="entity_detail_item_header">
								<div class="entity_detail_icon">{{ icon('mail') }}</div>
								<div class="entity_detail_hint">Email: </div>
							</div>
							<div class="entity_detail_info">
								<a class="entity_detail_info_link" href="mailto:{{ item.contact.email }}">
									<span class="entity_detail_info_label">{{ item.contact.email }}</span>
								</a>
							</div>
						</div>
					{% endif %}
				</div>
			{% endif %}
			{% if item.department %}
				<div class="entity_detail department">
					<div class="entity_detail_label">Department</div>
					<div class="entity_detail_item">
						<div class="entity_detail_item_header">
							<div class="entity_detail_icon">{{ icon('building') }}</div>
						</div>
						<div class="entity_detail_info">
							<a class="entity_detail_info_link" href="{{ item.department.url }}">
								<span class="entity_detail_info_label">{{ item.department.label }}</span>
							</a>
						</div>
					</div>
				</div>
			{% endif %}
			{% if item.location %}
				<div class="entity_detail location">
					<div class="entity_detail_item_header">
						<div class="entity_detail_label">Location</div>
					</div>
					<div class="entity_detail_item">
						<div class="entity_detail_item_header">
							<div class="entity_detail_icon">{{ icon('place') }}</div>
						</div>
						<div class="entity_detail_info">
							<span class="entity_detail_info_label">{{ item.location }}</span>
						</div>
					</div>
				</div>
			{% endif %}
		</div>
	</div>
</div>

No notes defined.