<div class="people_item has_social_links">
<div class="people_item_header">
<div class="people_item_info">
<h2 class="people_item_name">
Alex Smith
</h2>
<div class="people_item_extras">
<div class="people_item_title">Dean of Business</div>
<div class="people_item_division">Economic/Workforce Dev. & Adult Ed.</div>
</div>
</div>
<figure class="people_item_figure">
<img class="people_item_image" srcset="https://images.fastspot.com/merced/300x300/1 300w, https://images.fastspot.com/merced/100x100/1 100w" src="https://images.fastspot.com/merced/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">
<div class="people_item_detail_item">
<div class="people_item_detail_info people_item_detail_info_phone">
<a class="people_item_detail_info_link" href="tel:4105551234">
<div class="people_item_detail_icon">
<i class="fa-regular fa-phone"></i>
</div>
<span class="people_item_detail_info_label">(410) 555-1234</span>
</a>
</div>
</div>
<div class="people_item_detail_item">
<div class="people_item_detail_info people_item_detail_info_email">
<a class="people_item_detail_info_link" href="mailto:name@university.edu">
<div class="people_item_detail_icon">
<i class="fa-regular fa-envelope"></i>
</div>
<span class="people_item_detail_info_label">name@university.edu</span>
</a>
</div>
</div>
</div>
<div class="people_item_detail">
<div class="people_item_detail_item">
<div class="people_item_detail_info people_item_detail_info_location">
<a class="people_item_detail_info_link" href=#>
<div class="people_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</div>
<span class="people_item_detail_info_label">Merced Campus</span>
</a>
</div>
<div class="people_item_detail_info people_item_detail_info_room">
<span class="people_item_detail_info_label">Room 214</span>
</div>
<div class="people_item_detail_info people_item_detail_info_mailstop">
<span class="people_item_detail_info_label">Mailstop 10</span>
</div>
</div>
</div>
<div class="people_item_detail">
<ul class="people_item_social_list">
<li class="people_item_social_item">
<a class="people_item_social_link people_item_social_link_instagram" href="//www.instagram.com" target="_blank" rel="noopener">
<span class="people_item_social_icon">
<i class="fa-brands fa-instagram"></i>
</span>
<span class="people_item_social_label">Instagram</span>
</a>
</li>
<li class="people_item_social_item">
<a class="people_item_social_link people_item_social_link_facebook" href="//www.facebook.com" target="_blank" rel="noopener">
<span class="people_item_social_icon">
<i class="fa-brands fa-facebook"></i>
</span>
<span class="people_item_social_label">Facebook</span>
</a>
</li>
<li class="people_item_social_item">
<a class="people_item_social_link people_item_social_link_twitter" href="//www.twitter.com" target="_blank" rel="noopener">
<span class="people_item_social_icon">
<i class="fa-brands fa-twitter"></i>
</span>
<span class="people_item_social_label">Twitter</span>
</a>
</li>
<li class="people_item_social_item">
<a class="people_item_social_link people_item_social_link_linkedin" href="//www.linkedin.com" target="_blank" rel="noopener">
<span class="people_item_social_icon">
<i class="fa-brands fa-linkedin"></i>
</span>
<span class="people_item_social_label">Linkedin</span>
</a>
</li>
<li class="people_item_social_item">
<a class="people_item_social_link people_item_social_link_external" href="//www.external.com" target="_blank" rel="noopener">
<span class="people_item_social_icon">
<i class="fa-regular fa-link"></i>
</span>
<span class="people_item_social_label">External</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
{#
{% include '@component-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 {% if item.socials|length %}has_social_links{% endif %}">
<div class="people_item_header">
<div class="people_item_info">
<h2 class="people_item_name">
{{ item.name }}
</h2>
{% if item.title or item.division %}
<div class="people_item_extras">
{% if item.title %}
<div class="people_item_title">{{ item.title }}</div>
{% endif %}
{% if item.division %}
<div class="people_item_division">{{ item.division }}</div>
{% endif %}
</div>
{% endif %}
</div>
{% if item.image %}
<figure class="people_item_figure">
{% include '@component-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.contact %}
<div class="people_item_detail">
{% if item.contact.phone %}
<div class="people_item_detail_item">
<div class="people_item_detail_info people_item_detail_info_phone">
<a class="people_item_detail_info_link" href="tel:{{ tel(item.contact.phone) }}">
<div class="people_item_detail_icon">
<i class="fa-regular fa-phone"></i>
</div>
<span class="people_item_detail_info_label">{{ item.contact.phone }}</span>
</a>
</div>
</div>
{% endif %}
{% if item.contact.email %}
<div class="people_item_detail_item">
<div class="people_item_detail_info people_item_detail_info_email">
<a class="people_item_detail_info_link" href="mailto:{{ item.contact.email }}">
<div class="people_item_detail_icon">
<i class="fa-regular fa-envelope"></i>
</div>
<span class="people_item_detail_info_label">{{ item.contact.email }}</span>
</a>
</div>
</div>
{% endif %}
</div>
{% endif %}
{% if item.location.label %}
<div class="people_item_detail">
<div class="people_item_detail_item">
<div class="people_item_detail_info people_item_detail_info_location">
<a class="people_item_detail_info_link" href={{ item.location.url }}>
<div class="people_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</div>
<span class="people_item_detail_info_label">{{ item.location.label }}</span>
</a>
</div>
{% if item.room %}
<div class="people_item_detail_info people_item_detail_info_room">
<span class="people_item_detail_info_label">{{ item.room }}</span>
</div>
{% endif %}
{% if item.mailstop %}
<div class="people_item_detail_info people_item_detail_info_mailstop">
<span class="people_item_detail_info_label">{{ item.mailstop }}</span>
</div>
{% endif %}
</div>
{% if item.hours %}
<div class="people_item_detail_item">
<div class="people_item_detail_info people_item_detail_info_hours">
<span class="people_item_detail_info_header">
<div class="people_item_detail_icon">
<i class="fa-regular fa-clock"></i>
</div>
<span class="people_item_detail_info_label">Hours</span>
</span>
</div>
{% for hour in item.hours %}
<div class="people_item_detail_info people_item_detail_info_hour">
<span class="people_item_detail_info_label">{{ hour }}</span>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% if item.socials %}
<div class="people_item_detail">
<ul class="people_item_social_list">
{% for link in item.socials %}
<li class="people_item_social_item">
<a class="people_item_social_link people_item_social_link_{{ link.title|lower }}" href="{{ link.url }}" target="_blank" rel="noopener">
<span class="people_item_social_icon">
<i class="{% if link.icon %}{{ link.icon }}{% else %}fa-brands fa-{{ link.title|lower }}{% endif %}"></i>
</span>
<span class="people_item_social_label">{{ link.title }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
No notes defined.