Johns Hopkins Data Science and AI Institute Component Library

People Meta 

<!-- Person Meta -->
<div class="people_meta" id="meta" data-type="entity">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="people_meta_inner">
                <div class="people_meta_grid has_no_image">
                    <div class="people_meta_grid_item is_header">
                        <header class="people_meta_header">
                            <h1 id="page_title" class="people_meta_title">
                                Adam Charles
                            </h1>

                            <ul class="people_meta_positions_wrap" aria-label="Adam Charles titles / positions">
                                <li class="people_meta_position">
                                    Associate Professor
                                </li>
                                <li class="people_meta_position">
                                    International Teaching and Global Leadership
                                </li>
                            </ul>
                        </header>
                    </div>

                    <div class="people_meta_grid_item is_meta">
                        <table class="people_meta_table">
                            <thead>
                                <tr>
                                    <th>Label</th>
                                    <th>Value</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <th>Primary School</th>
                                    <td>
                                        <a href="#">Whiting School of Engineering</a>
                                    </td>
                                </tr>

                                <tr>
                                    <th>Department</th>
                                    <td>
                                        Biomedical Engineering
                                    </td>
                                </tr>

                                <tr>
                                    <th>Focus Area</th>
                                    <td>
                                        <ul>
                                            <li>
                                                <a href="Machine Learning">Machine Learning</a><!--
														--><span>,</span>
                                            </li>
                                            <li>
                                                <a href="Application">Application</a><!--
														--><span>,</span>
                                            </li>
                                            <li>
                                                <a href="Ethics">Ethics</a><!--
														-->
                                            </li>
                                        </ul>
                                    </td>
                                </tr>

                                <tr>
                                    <th>Contact</th>
                                    <td>
                                        <a href="mailto:name@university.edu">name@university.edu</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="person_meta_links_wrap">
                            <div class="person_meta_link_item">

                                <a href="#" class="person_meta_personal_link">
                                    <span class="person_meta_personal_link_inner">
                                        <span class="person_meta_personal_link_label">Research Lab</span><span class="icon_nowrap person_meta_personal_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_chevron_right">
                                                <use href="/images/icons.svg#chevron_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </div>
                            <div class="person_meta_link_item">

                                <a href="#" class="person_meta_personal_link">
                                    <span class="person_meta_personal_link_inner">
                                        <span class="person_meta_personal_link_label">Website</span><span class="icon_nowrap person_meta_personal_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_chevron_right">
                                                <use href="/images/icons.svg#chevron_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </div>
                            <div class="person_meta_link_item">

                                <a href="#" class="person_meta_personal_link">
                                    <span class="person_meta_personal_link_inner">
                                        <span class="person_meta_personal_link_label">Get In Touch</span><span class="icon_nowrap person_meta_personal_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_chevron_right">
                                                <use href="/images/icons.svg#chevron_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="people_meta_grid_item is_media">

                        <div class="people_meta_social_wrap is_desktop">
                            <div class="people_meta_detail social">
                                <div class="people_meta_detail_label">Social</div>
                                <ul class="people_meta_socials" aria-label="Social Links for Adam Charles">
                                    <li class="people_meta_social">
                                        <a class="people_meta_social_link" href="#" aria-label="Adam Charles 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>
                                    </li>
                                    <li class="people_meta_social">
                                        <a class="people_meta_social_link" href="#" aria-label="Adam Charles X" target="_blank" rel="noopener"><span class="people_meta_social_link_icon">
                                                <svg class="icon icon_x">
                                                    <use href="/images/icons.svg#x" />
                                                </svg>
                                            </span><span class="people_meta_social_link_label">X</span></a>
                                    </li>
                                    <li class="people_meta_social">
                                        <a class="people_meta_social_link" href="#" aria-label="Adam Charles 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>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="people_meta_grid_item is_social">
                        <div class="people_meta_social_wrap">
                            <div class="people_meta_detail social">
                                <div class="people_meta_detail_label">Social</div>
                                <ul class="people_meta_socials" aria-label="Social Links for Adam Charles">
                                    <li class="people_meta_social">
                                        <a class="people_meta_social_link" href="#" aria-label="Adam Charles 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>
                                    </li>
                                    <li class="people_meta_social">
                                        <a class="people_meta_social_link" href="#" aria-label="Adam Charles X" target="_blank" rel="noopener"><span class="people_meta_social_link_icon">
                                                <svg class="icon icon_x">
                                                    <use href="/images/icons.svg#x" />
                                                </svg>
                                            </span><span class="people_meta_social_link_label">X</span></a>
                                    </li>
                                    <li class="people_meta_social">
                                        <a class="people_meta_social_link" href="#" aria-label="Adam Charles 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>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </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">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="people_meta_inner">
				<div class="people_meta_grid {% if not page.image %}has_no_image{% endif %}">
					<div class="people_meta_grid_item is_header">
						<header class="people_meta_header">
							<h1 id="page_title" class="people_meta_title">
								{{ item.name }}
							</h1>

							{% if item.titles|length %}
								<ul class="people_meta_positions_wrap" aria-label="{{ item.name }} titles / positions">
									{% for position in item.titles %}
										<li class="people_meta_position">
											{{ position }}
										</li>
									{% endfor %}
								</ul>
							{% endif %}
						</header>
					</div>
					
					<div class="people_meta_grid_item is_meta">
						<table class="people_meta_table">
							<thead>
								<tr>
									<th>Label</th>
									<th>Value</th>
								</tr>
							</thead>
							
							<tbody>
								{% if item.primary_school %}
									<tr>
										<th>Primary School</th>
										<td>
											<a href="#">{{ item.primary_school }}</a>
										</td>
									</tr>
								{% endif %}

								{% if item.department %}
									<tr>
										<th>Department</th>
										<td>
											{{ item.department }}
										</td>
									</tr>
								{% endif %}

								{% if item.focus_areas|length %}
									<tr>
										<th>Focus Area</th>
										<td>
											<ul>
												{% for focus_area in item.focus_areas %}
													<li>
														<a href="{{ focus_area.title }}">{{ focus_area.title }}</a><!--
														-->{% if not loop.last%}<span>,</span>{% endif %}
													</li>
												{% endfor %}
											</ul>
										</td>
									</tr>
								{% endif %}

								{% if item.email %}
									<tr>
										<th>Contact</th>
										<td>
											<a href="mailto:{{ item.email }}">{{ item.email }}</a>
										</td>
									</tr>
								{% endif %}
							</tbody>
						</table>

						{% if item.personal_links|length %}
							<div class="person_meta_links_wrap">
								{% for personal_link in item.personal_links %}
									<div class="person_meta_link_item">
										{% include '@partial-link' with {
											title: personal_link.title,
											url: personal_link.url,
											class: 'person_meta_personal',
											js: false,
											icon: 'chevron_right',
											aria: '',
											nowrap: true
										} %}
									</div>
								{% endfor %}
							</div>
						{% endif %}
					</div>

					<div class="people_meta_grid_item is_media">
						{% if page.image %}
							<figure class="people_meta_figure">
								{% include '@partial-image' with {
									class: 'people_meta',
									alt: '',
									image: page.image,
									loading: 'lazy',
									sources: [
										img.square.sml,
										img.square.xsml,
										img.square.xxsml,
										img.square.thumb
									],
									sizes: [
										'(min-width: 1220px) 420px',
										'(min-width: 980px) 150px',
										'75px'
									]
								} %}
							</figure>
						{% endif %}

						{% if item.social_links %}
							<div class="people_meta_social_wrap is_desktop">
								<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>
											</li>
										{% endfor %}
									</ul>
								</div>
							</div>
						{% endif %}
					</div>

					<div class="people_meta_grid_item is_social">
						{% if item.social_links %}
							<div class="people_meta_social_wrap">
								<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>
											</li>
										{% endfor %}
									</ul>
								</div>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Person Meta -->

No notes defined.