Children and Screens Component Library

People Card 

<a class="people_list_link" href="#">

	    <div class="people_list_item">
	        <figure class="people_list_item_figure">

	            <img class="people_list_item_figure_image" srcset="https://images.fastspot.com/framework/735x980/1 735w, https://images.fastspot.com/framework/555x740/1 555w, https://images.fastspot.com/framework/375x500/1 375w, https://images.fastspot.com/framework/225x300/1 225w" sizes="(min-width: 1220px) 403px, (min-width: 980px) 441px, (min-width: 740px) 690px, 90vw" src="https://images.fastspot.com/framework/225x300/1" alt="" loading="lazy" width="225" height="300">
	        </figure>

	        <div class="people_list_item_content">
	            <h3 class="people_list_item_name">Jane Doe</h3>
	            <div class="people_list_item_title">Position</div>
	        </div>

	    </div>

	</a>
 
{% if item.bio|length > 0 %}
	<a class="people_list_link" href="{{ item.url }}">
	{% endif %}


	<div class="people_list_item">
		{% if item.image %}
			<figure class="people_list_item_figure">
				{% include "@partial-image" with {
				class: "people_list_item_figure",
				image: item.image,
				loading: "lazy",
				sources: [
					img.portraitFull.med,
					img.portraitFull.sml,
					img.portraitFull.xsml,
					img.portraitFull.xxsml
				],
				sizes: [
					'(min-width: 1220px) 403px',
					'(min-width: 980px) 441px',
					'(min-width: 740px) 690px',
					'90vw'
				]
			} %}
			</figure>
		{% endif %}

		<div class="people_list_item_content">
			<h3 class="people_list_item_name">{{ item.name }}</h3>
			<div class="people_list_item_title">{{ item.title }}</div>
		</div>

	</div>


	{% if item.bio|length > 0 %}
	</a>
{% endif %}

No notes defined.