Paul Smith's College Component Library

Card Carousel Item: Topic 

<div class="card_carousel_item_topic">
    <div class="card_carousel_item_topic_grid">
        <div class="card_carousel_item_topic_grid_item is_media">
            <figure class="card_carousel_item_topic_figure">

                <img class="card_carousel_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x980/ 980w, 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: 980px) 466px, (min-width: 740px) 350px, 95vw" src="https://images.fastspot.com/paul-smiths-college/100x100/" alt="" loading="lazy" width="100" height="100">
            </figure>
        </div>

        <div class="card_carousel_item_topic_grid_item is_content">
            <div class="card_carousel_item_topic_content">
                <h3 class="card_carousel_item_topic_title">

                </h3>

                <div class="card_carousel_item_topic_desc">
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="card_carousel_item_topic">
	<div class="card_carousel_item_topic_grid">
		<div class="card_carousel_item_topic_grid_item is_media">
			<figure class="card_carousel_item_topic_figure">
				{% include '@partial-image' with {
					class: 'card_carousel_item',
					alt: '',
					image: item.image,
					loading: 'lazy',
					sources: [
						img.square.med,
						img.square.sml,
						img.square.xsml,
						img.square.xxsml,
						img.square.thumb
					],
					sizes: [
						'(min-width: 980px) 466px',
						'(min-width: 740px) 350px',
						'95vw'
					]
				} %}
			</figure>
		</div>

		<div class="card_carousel_item_topic_grid_item is_content">
			<div class="card_carousel_item_topic_content">
				<h3 class="card_carousel_item_topic_title">
					{% if item.link %}
						<a href="{{ item.link }}" class="card_carousel_item_topic_link">
							{{ item.title }}
						</a>
					{% else %}
						{{ item.title }}
					{% endif %}
				</h3>

				<div class="card_carousel_item_topic_desc">
					<p>{{ item.description }}</p>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.