JHU SOE Component Library

News Card: Contained 

<!-- News Card -->
<div class="card card_news card_type_contained card_category_green_gem">
    <div class="card_inner card_news_inner">
        <div class="card_news_grid">
            <div class="card_news_header">
                <h3 class="card_news_title">
                    <a class="card_news_title_link" href="#"><span class="card_news_title_link_label">When School Feels 'Like Prison,' Test Scores, College Attendance Drop</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">&#xfeff;
                            <svg class="icon icon_arrow_external">
                                <use href="/images/icons.svg#arrow_external" />
                            </svg>
                        </span></a>
                </h3>
            </div>
            <div class="card_news_body">
                <figure class="card_news_figure">

                    <img class="card_news_image" srcset="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) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/1" alt="" loading="lazy" width="300" height="200">
                </figure>
                <p class="card_news_category">Research</p>
            </div>
        </div>
    </div>
</div>
<!-- END: News Card -->
 
{#
	{% include '@partial-news-card' with {
		item: {
			type: 'default',
			title: 'Title',
			category: 'Category',
			color: 'colot',
			image: '1',
			alt: 'alt',
			url: 'url'
		}
	} %}
#}

<!-- News Card -->
<div class="card card_news card_type_{{ item.type ?: 'default' }} card_category_{{ item.color }}">
	<div class="card_inner card_news_inner">
		<div class="card_news_grid">
			<div class="card_news_header">
				{% if group_title %}
					<h2 class="card_news_title">
						<a class="card_news_title_link" href="{{ item.url }}"><span class="card_news_title_link_label">{{ item.title }}</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">&#xfeff;{{ icon('arrow_external') }}</span></a>
					</h2>
				{% else %}
					<h3 class="card_news_title">
						<a class="card_news_title_link" href="{{ item.url }}"><span class="card_news_title_link_label">{{ item.title }}</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">&#xfeff;{{ icon('arrow_external') }}</span></a>
					</h3>
				{% endif %}
			</div>
			<div class="card_news_body">
				<figure class="card_news_figure">
					{% include '@partial-image' with {
						class: 'card_news',
						alt: item.alt,
						image: item.image,
						loading: 'lazy',
						sources: [
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						],
						sizes: [
							'(min-width: 1394px) 290px',
							'(min-width: 1220px) 265px',
							'(min-width: 980px) 250px',
							'(min-width: 600px) 332px',
							'90vw'
						]
					} %}
				</figure>
				<p class="card_news_category">{{ item.category }}</p>
			</div>
		</div>
	</div>
</div>
<!-- END: News Card -->

No notes defined.