Washington National Cathedral Component Library

Department Item 

<div class="department_item">
    <figure class="department_item_figure">

        <img class="department_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>
    <h2 class="department_item_name">
        <a class="department_item_name_link" href="page-directory-detail.html">Department or Office Name</a>
    </h2>
    <div class="department_item_title">Title</div>
</div>
 
{#
	{% include '@partial-department-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="department_item">
	{% if item.image %}
		<figure class="department_item_figure">
			{% include '@partial-image' with {
				class: 'department_item',
				alt: '',
				image: item.image,
				loading: 'lazy',
				sources: [
					img.square.xxsml,
					img.square.thumb
				]
			} %}
		</figure>
	{% endif %}
	<h2 class="department_item_name">
		<a class="department_item_name_link" href="{{ item.url }}">{{ item.name }}</a>
	</h2>
	{% if item.title %}
		<div class="department_item_title">{{ item.title }}</div>
	{% endif %}
</div>

No notes defined.