Paul Smith's College Component Library

Related People Item 

<div class="people_related_item">
    <figure class="people_related_item_figure">

        <img class="card_carousel_item_image" srcset="https://images.fastspot.com/paul-smiths-college/740x740/ 740w, https://images.fastspot.com/paul-smiths-college/500x500/ 500w, https://images.fastspot.com/paul-smiths-college/300x300/ 300w, https://images.fastspot.com/paul-smiths-college/100x100/ 100w" sizes="(min-width: 1440px) 330px, (min-width: 1220px) 281px, (min-width: 980px) 463px, (min-width: 740px) 345px, calc(87.86vw - 32px)" src="https://images.fastspot.com/paul-smiths-college/100x100/" alt="Headshot for " loading="lazy" width="100" height="100">
    </figure>

    <div class="people_related_item_body">
        <h3 class="people_related_item_name">

            <a href="#" class="people_related_item_name_link">
                <span class="people_related_item_name_link_inner">
                    <span class="people_related_item_name_link_label"></span><span class="icon_nowrap people_related_item_name_link_icon" aria-hidden="true">&#xfeff;
                        <svg class="icon icon_chevron_right">
                            <use href="/images/icons.svg#chevron_right" />
                        </svg>
                    </span>
                </span>
            </a>
        </h3>

        <div class="people_related_item_title_wrap">

        </div>
    </div>
</div>
 
<div class="people_related_item">
	<figure class="people_related_item_figure">
		{% include "@partial-image" with {
			class: "card_carousel_item",
			alt: "Headshot for " ~ item.name,
			image: item.headshot,
			loading: "lazy",
			sources: [
				img.square.sml,
				img.square.xsml,
				img.square.xxsml,
				img.square.thumb
			],
			sizes: [
				"(min-width: 1440px) 330px",
				"(min-width: 1220px) 281px",
				"(min-width: 980px) 463px",
				"(min-width: 740px) 345px",
				"calc(87.86vw - 32px)"
			]
		} %}
	</figure>

	<div class="people_related_item_body">
		<h3 class="people_related_item_name">
			{% include "@partial-link" with {
				title: item.name,
				url: '#',
				class: 'people_related_item_name',
				icon: 'chevron_right',
				nowrap: true
			} %}
		</h3>

		<div class="people_related_item_title_wrap">
			{{ item.titles|join(", ") }}
		</div>
	</div>
</div>

No notes defined.