JHU SOE Component Library

Expressive Wide Card: Contained 

<!-- Topic Card -->
<div class="card card_expressive_wide card_type_contained theme_">
    <div class="card_inner card_expressive_wide_inner">
        <div class="card_expressive_wide_grid">
            <div class="card_expressive_wide_media">
                <figure class="card_expressive_wide_figure">

                    <img class="card_expressive_wide_image" srcset="https://images.fastspot.com/jhusoe/1220x814/1 1220w, https://images.fastspot.com/jhusoe/980x654/1 980w, https://images.fastspot.com/jhusoe/740x494/1 740w, https://images.fastspot.com/jhusoe/500x334/1 500w, https://images.fastspot.com/jhusoe/300x200/1 300w" sizes="(min-width: 1394px) 648px, (min-width: 1220px) 568px, (min-width: 980px) 454px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/1" alt="" loading="lazy" width="300" height="200">
                </figure>
                <div class="card_expressive_wide_body">
                    <p class="card_expressive_wide_caption">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Topic Card -->
 
{#
	{% include '@partial-expressive-wide-card' with {
		item: {
			type: 'default',
			image: '1',
			alt: 'alt',
			title: 'Title',
			description: 'Description',
			link: {
				url: '#',
				label: 'Link Label'
			}
		}
	} %}
#}

<!-- Topic Card -->
<div class="card card_expressive_wide card_type_{{ item.type ?: 'default' }} theme_{{ item.theme ?: '' }}">
	<div class="card_inner card_expressive_wide_inner">
		<div class="card_expressive_wide_grid">
			<div class="card_expressive_wide_media">
				<figure class="card_expressive_wide_figure">
					{% include '@partial-image' with {
						class: 'card_expressive_wide',
						alt: item.alt,
						image: item.image,
						loading: 'lazy',
						sources: [
							img.classic.lrg,
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						],
						sizes: [
							'(min-width: 1394px) 648px',
							'(min-width: 1220px) 568px',
							'(min-width: 980px) 454px',
							'(min-width: 740px) 640px',
							'90vw'
						]
					} %}
				</figure>
				<div class="card_expressive_wide_body">
					<p class="card_expressive_wide_caption">{{ item.caption }}</p>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Card -->

No notes defined.