Office of Diversity and Inclusion Component Library

People Meta 

<!-- Person Meta -->
<div class="people_meta" id="meta" data-type="entity" data-category="">
    <div class="fs-row">
        <div class="fs-cell fs-xl-7 fs-lg-8">
            <div class="people_meta_inner">
                <div class="people_list_item_details">
                    <div class="people_list_item_basic_link_wrapper">

                        <a href="#" class="basic_link">
                            <span class="basic_link_inner">
                                <span class="basic_link_label">View Page</span><span class="icon_nowrap basic_link_icon" 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 class="fs-cell fs-xl-push-2 fs-xl-2 fs-lg-4">
            <div class="people_meta_inner">
            </div>
        </div>
    </div>
</div>
<!-- END: Person Meta -->
 
{#
	{% include '@partial-people-meta' with {
		item: {
			phone_numbers: [
				{
					label: 'Phone Label',
					type: 'Phone Type',
					number: '(410) 555-1234'
				}
			],
			office_hours: [
				{
					label: 'Monday',
					hours: '9am - 5pm'
				}
			],
			email: 'email@address.com',
			location: 'Location',
			social_links: [
				{
					title: 'Linkedin',
					url: '#'
				}
			]
		}
	} %}
#}

<!-- Person Meta -->
<div class="people_meta" id="meta" data-type="entity" data-category="{% for item in item.departments %}{{ item.name }}{% if not loop.last %}, {% endif %}{% endfor %}">
	<div class="fs-row">
		<div class="fs-cell fs-xl-7 fs-lg-8">
			<div class="people_meta_inner">
				<div class="people_list_item_details">
					{% if item.job_title %}
						<div class="people_list_item_title">{{ item.job_title }}</div>
					{% endif %}
					{% if item.description %}
						<div class="people_list_item_description">{{ item.description }}</div>
					{% endif %}
					<div class="people_list_item_basic_link_wrapper">
						{% include '@partial-link' with {
							title: 'View Page',
							url: '#',
							class: 'basic',
							theme: '',
							js: false,
							icon: 'arrow_right',
							aria: '',
							nowrap: true
						} %}
					</div>
				</div>
			</div>
		</div>
		<div class="fs-cell fs-xl-push-2 fs-xl-2 fs-lg-4">
			<div class="people_meta_inner">
				{% if item.contact %}
					<div class="people_list_item_detail contact">
						{% if item.contact.phone %}
							<div class="people_list_item_detail_item">
								<div class="people_list_item_detail_info">
									{% include '@partial-link' with {
										title: item.contact.phone,
										url: 'tel:{{ tel(item.contact.phone) }}',
										class: 'basic',
										theme: '',
										js: false,
										icon: '',
										aria: '',
										nowrap: false
									} %}
								</div>
							</div>
						{% endif %}
						{% if item.contact.email %}
							<div class="people_list_item_detail_item">
								<div class="people_list_item_detail_info">
									{% include '@partial-link' with {
										title: item.contact.email,
										url: 'mailto:{{ item.contact.email }}',
										class: 'basic',
										theme: '',
										js: false,
										icon: '',
										aria: '',
										nowrap: false
									} %}
								</div>
							</div>
						{% endif %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Person Meta -->

No notes defined.