Washington National Cathedral Component Library

People Item 

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

            <img class="people_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/300x300/1 300w, https://images.fastspot.com/washington-national-cathedral/100x100/1 100w" src="https://images.fastspot.com/washington-national-cathedral/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="#">Department or Office Name</a>
            </h2>
            <div class="people_item_title">Title</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'
			}
		}
	} %}
#}
{% set image = (item.image) ? item.image : '1' %}
<div class="people_item">
	<div class="people_item_header">
		<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>
		<div class="people_item_info">
			<h2 class="people_item_name">
				<a class="people_item_name_link" href="#">{{ item.name }}</a>
			</h2>
			{% if item.title %}
				<div class="people_item_title">{{ item.title }}</div>
			{% endif %}
		</div>
	</div>
</div>

No notes defined.