Hilbert 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">
            <div class="people_meta_inner">
                <div class="people_meta_body">
                    <div class="people_meta_details">
                        <div class="people_meta_detail location">
                            <div class="people_meta_detail_label">Education</div>
                            <div class="people_meta_detail_items">
                                <div class="people_meta_detail_item">
                                    <div class="people_meta_detail_info">J.D., Western Michigan University Cooley Law School</div>
                                </div>
                                <div class="people_meta_detail_item">
                                    <div class="people_meta_detail_info">M.A., Bowling Green State University</div>
                                </div>
                                <div class="people_meta_detail_item">
                                    <div class="people_meta_detail_info">B.S., Newman University</div>
                                </div>
                            </div>
                        </div>

                        <div class="people_meta_detail location">
                            <div class="people_meta_detail_label">Department</div>
                            <div class="people_meta_detail_items">
                                <div class="people_meta_detail_item">
                                    <a class="people_meta_detail_info_link" href="#">
                                        <div class="people_meta_detail_info">Criminal Justice</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="people_meta_detail contact">
                            <div class="people_meta_detail_label">Contact</div>
                            <div class="people_meta_detail_items">
                                <div class="people_meta_detail_item">
                                    <div class="people_meta_detail_item_header">
                                        <div class="people_meta_detail_hint">(410) 555-1234</div>
                                    </div>
                                    <div class="people_meta_detail_info">
                                        <a class="people_meta_detail_info_link" href="tel:4105551234">
                                            (410) 555-1234
                                        </a>
                                    </div>
                                </div>

                                <div class="people_meta_detail_item">
                                    <div class="people_meta_detail_item_header">
                                        <div class="people_meta_detail_hint">Email Address</div>
                                    </div>
                                    <div class="people_meta_detail_info">
                                        <a class="people_meta_detail_info_link" href="mailto:name@university.edu">
                                            name@university.edu
                                        </a>
                                    </div>
                                </div>

                                <div class="people_meta_detail_item">
                                    <div class="people_meta_detail_item_header">
                                        <div class="people_meta_detail_hint">Location</div>
                                    </div>
                                    <div class="people_meta_detail_info">
                                        Bogel Hall 412
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="people_meta_detail social">
                            <div class="people_meta_detail_label">Social</div>
                            <ul class="people_meta_socials" aria-label="Social Links for Laura DannenbohmName">
                                <li class="people_meta_social">
                                    <a class="people_meta_social_link" href="#" aria-label="Laura DannenbohmName Linkedin" target="_blank" rel="noopener">
                                        <span class="people_meta_social_link_icon"><svg class="icon icon_linkedin">
                                                <use href="/images/icons.svg#linkedin" />
                                            </svg></span>
                                        <span class="people_meta_social_link_label">Linkedin</span>
                                    </a><span class="people_meta_social_punctuation">, </span>
                                </li>
                                <li class="people_meta_social">
                                    <a class="people_meta_social_link" href="#" aria-label="Laura DannenbohmName Twitter" target="_blank" rel="noopener">
                                        <span class="people_meta_social_link_icon"><svg class="icon icon_twitter">
                                                <use href="/images/icons.svg#twitter" />
                                            </svg></span>
                                        <span class="people_meta_social_link_label">Twitter</span>
                                    </a><span class="people_meta_social_punctuation">, </span>
                                </li>
                                <li class="people_meta_social">
                                    <a class="people_meta_social_link" href="#" aria-label="Laura DannenbohmName Facebook" target="_blank" rel="noopener">
                                        <span class="people_meta_social_link_icon"><svg class="icon icon_facebook">
                                                <use href="/images/icons.svg#facebook" />
                                            </svg></span>
                                        <span class="people_meta_social_link_label">Facebook</span>
                                    </a><span class="people_meta_social_punctuation">, </span>
                                </li>
                                <li class="people_meta_social">
                                    <a class="people_meta_social_link" href="#" aria-label="Laura DannenbohmName Instagram" target="_blank" rel="noopener">
                                        <span class="people_meta_social_link_icon"><svg class="icon icon_instagram">
                                                <use href="/images/icons.svg#instagram" />
                                            </svg></span>
                                        <span class="people_meta_social_link_label">Instagram</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Person Meta -->
 
<!-- 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">
			<div class="people_meta_inner">
				<div class="people_meta_body">
					<div class="people_meta_details">
						{% if item.education|length %}
							<div class="people_meta_detail location">
								<div class="people_meta_detail_label">Education</div>
								<div class="people_meta_detail_items">
									{% for education in item.education %}
										<div class="people_meta_detail_item">
											<div class="people_meta_detail_info">{{ education }}</div>
										</div>
									{% endfor %}
								</div>
							</div>
						{% endif %}

						{% if item.departments|length %}
							<div class="people_meta_detail location">
								<div class="people_meta_detail_label">Department</div>
								<div class="people_meta_detail_items">
									{% for department in item.departments %}
										<div class="people_meta_detail_item">
											<a class="people_meta_detail_info_link" href="{{ department.url }}">
												<div class="people_meta_detail_info">{{ department.label }}</div>
											</a>
										</div>
									{% endfor %}
								</div>
							</div>
						{% endif %}

						{% if item.content.email or item.contact.phone %}
							<div class="people_meta_detail contact">
								<div class="people_meta_detail_label">Contact</div>
								<div class="people_meta_detail_items">
									<div class="people_meta_detail_item">
										<div class="people_meta_detail_item_header">
											<div class="people_meta_detail_hint">{{ item.contact.phone }}</div>
										</div>
										<div class="people_meta_detail_info">
											<a class="people_meta_detail_info_link" href="tel:{{ tel(item.contact.phone) }}">
												{{ item.contact.phone }}
											</a>
										</div>
									</div>

									{% if item.contact.email %}
										<div class="people_meta_detail_item">
											<div class="people_meta_detail_item_header">
												<div class="people_meta_detail_hint">Email Address</div>
											</div>
											<div class="people_meta_detail_info">
												<a class="people_meta_detail_info_link" href="mailto:{{ item.contact.email }}">
													{{ item.contact.email }}
												</a>
											</div>
										</div>
									{% endif %}

									{% if item.location %}
										<div class="people_meta_detail_item">
											<div class="people_meta_detail_item_header">
												<div class="people_meta_detail_hint">Location</div>
											</div>
											<div class="people_meta_detail_info">
												{{ item.location }}
											</div>
										</div>
									{% endif %}
								</div>
							</div>
						{% endif %}

						{% if item.social_links %}
							<div class="people_meta_detail social">
								<div class="people_meta_detail_label">Social</div>
								<ul class="people_meta_socials" aria-label="Social Links for {{ item.name }}">
									{% for social in item.social_links %}
										<li class="people_meta_social">
											<a class="people_meta_social_link" href="{{ social.url }}" aria-label="{{ item.name }} {{ social.title }}" target="_blank" rel="noopener">
												<span class="people_meta_social_link_icon">{{ icon(social.title|lower) }}</span>
												<span class="people_meta_social_link_label">{{ social.title }}</span>
											</a>{% if not loop.last %}<span class="people_meta_social_punctuation">, </span>{% endif %}
										</li>
									{% endfor %}
								</ul>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Person Meta -->

No notes defined.