JHU Sustainability Component Library

People Item 

<div class="people_item">
    <div class="people_item_bar">
        <div class="people_item_bar_content">
            <strong>Reasearch Ambassador</strong> - Contact the faculty or student ambassador with questions about research in this area.
        </div>
    </div>

    <div class="people_item_grid">
        <div class="people_item_header">
            <figure class="people_item_figure">

                <img class="people_item_image" srcset="https://images.fastspot.com/jhu-sustainability/300x300/1 300w, https://images.fastspot.com/jhu-sustainability/100x100/1 100w" src="https://images.fastspot.com/jhu-sustainability/100x100/1" alt="" loading="lazy" width="100" height="100">
            </figure>

            <div class="people_item_info">
                <h2 class="people_item_name">
                    <a class="people_item_name_link" href="page-people-detail.html">
                        <span class="people_item_name_link_inner">
                            <span class="people_item_name_label">Peter Winch</span><!--
							
							--><span class="people_item_name_icon icon_nowrap">
                                <svg class="icon icon_external">
                                    <use href="/images/icons.svg#external" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </h2>

                <div class="people_item_title">Subcommittee Co-Chair and Professor</div>

                <div class="people_item_desc">
                    Peter J. Winch, MD, MPH ’88, develops and evaluates interventions to promote health behaviors for water, sanitation, infectious diseases, and environmental sustainability.
                </div>

                <div class="people_item_specialities">
                    <div class="people_item_specialities_title">
                        Specialities:
                    </div>

                    <div class="people_item_specialities_list">
                        healthy air, water
                    </div>
                </div>
            </div>
        </div>
        <div class="people_item_body">
            <div class="people_item_details">
                <div class="people_item_detail contact">
                    <div class="people_item_detail_item">
                        <div class="people_item_detail_info">

                            <a href="#" class="basic_link ">
                                <span class="basic_link_inner">
                                    <span class="basic_link_label">International Health</span><span class="basic_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_external">
                                            <use href="/images/icons.svg#external" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>

                    <div class="people_item_detail_item">
                        <div class="people_item_detail_info">

                            <a href="mailto:pwinch@jhu.edu" class="basic_link ">
                                <span class="basic_link_inner">
                                    <span class="basic_link_label">pwinch@jhu.edu</span>
                                </span>
                            </a>
                        </div>
                    </div>

                    <div class="people_item_detail_item">
                        <div class="people_item_detail_info">

                            <a href="4109959854" class="basic_link ">
                                <span class="basic_link_inner">
                                    <span class="basic_link_label">(410) 995-9854</span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include '@partial-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.ambassador %}
		<div class="people_item_bar">
			<div class="people_item_bar_content">
				<strong>{{ item.ambassador.title }}</strong> - {{ item.ambassador.content }}
			</div>
		</div>
	{% endif %}

	<div class="people_item_grid">
		<div class="people_item_header">
			{% if item.image %}
				<figure class="people_item_figure">
					{% include '@partial-image' with {
						class: 'people_item',
						alt: '',
						image: item.image,
						loading: 'lazy',
						sources: [
							img.square.xxsml,
							img.square.thumb
						]
					} %}
				</figure>
			{% endif %}
			
			<div class="people_item_info">
				<h2 class="people_item_name">
					<a class="people_item_name_link" href="{{ item.url }}">
						<span class="people_item_name_link_inner">
							<span class="people_item_name_label">{{ item.name }}</span><!--
							
							--><span class="people_item_name_icon icon_nowrap">{{ icon("external") }}</span>
						</span>
					</a>
				</h2>

				{% if item.title %}
					<div class="people_item_title">{{ item.title }}</div>
				{% endif %}

				{% if item.description %}
					<div class="people_item_desc">
						{{ item.description }}
					</div>
				{% endif %}

				{% if item.specialities|length %}
					<div class="people_item_specialities">
						<div class="people_item_specialities_title">
							Specialities:
						</div>
						
						<div class="people_item_specialities_list">
							{{ item.specialities|join(', ') }}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
		<div class="people_item_body">
			<div class="people_item_details">
				<div class="people_item_detail contact">
					{% if item.department %}
						<div class="people_item_detail_item">
							<div class="people_item_detail_info">
								{% include "@partial-link" with {
									title: item.department.label,
									url: item.department.url,
									class: 'basic',
									icon: 'external',
									nowrap: true,
									theme: '',
								} %}
							</div>
						</div>
					{% endif %}

					{% if item.contact.email %}
						<div class="people_item_detail_item">
							<div class="people_item_detail_info">
								{% include "@partial-link" with {
									title: item.contact.email,
									url: "mailto:" ~ item.contact.email,
									class: 'basic',
									icon: '',
									nowrap: true,
									theme: '',
								} %}
							</div>
						</div>
					{% endif %}

					{% if item.contact.phone %}
						<div class="people_item_detail_item">
							<div class="people_item_detail_info">
								{% include "@partial-link" with {
									title: item.contact.phone,
									url: tel(item.contact.phone),
									class: 'basic',
									icon: '',
									nowrap: true,
									theme: '',
								} %}
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.