JHU SOE Component Library

Image Card: Contained 

<!-- Image Card -->
<div class="card card_image card_type_contained">
    <div class="card_inner card_image_inner">
        <figure class="card_image_figure">

            <img class="card_image_image" srcset="https://images.fastspot.com/jhusoe/735x980/1 735w, https://images.fastspot.com/jhusoe/555x740/1 555w, https://images.fastspot.com/jhusoe/375x500/1 375w, https://images.fastspot.com/jhusoe/225x300/1 225w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 290px" src="https://images.fastspot.com/jhusoe/225x300/1" alt="alt" loading="lazy" width="225" height="300">
        </figure>
    </div>
</div>
<!-- END: Image Card -->
 
{#
	{% include '@partial-image-card' with {
		item: {
			full_bleed: true,
			image: '1',
			alt: 'alt',
		}
	} %}
#}

<!-- Image Card -->
<div class="card card_image card_type_{{ item.type ?: 'default' }}">
	<div class="card_inner card_image_inner">
		<figure class="card_image_figure">
			{% include '@partial-image' with {
				class: 'card_image',
				alt: item.alt,
				image: item.image,
				loading: 'lazy',
				sources: [
					img.portraitFull.med,
					img.portraitFull.sml,
					img.portraitFull.xsml,
					img.portraitFull.xxsml
				],
				sizes: [
					'(min-width: 1394px) 290px',
					'(min-width: 1220px) 265px',
					'(min-width: 980px) 250px',
					'(min-width: 600px) 332px',
					'290px'
				]
			} %}
		</figure>
	</div>
</div>
<!-- END: Image Card -->

No notes defined.