Johns Hopkins Data Science and AI Institute Component Library

News Card: Featured 

<div class="news_card is_featured">
    <div class="news_card_grid">
        <div class="news_card_grid_item is_media">
            <a href="#" aria-label="Q&A: How AI can help mitigate climate change">
                <figure class="news_card_figure">
                    <div class="news_card_figure_pill_wrap">
                        <div class="news_card_figure_pill">
                            Media Mention
                        </div>
                    </div>

                    <img class="news_card_image" srcset="https://images.fastspot.com/framework/1440x617/1 1440w, https://images.fastspot.com/framework/1220x523/1 1220w, https://images.fastspot.com/framework/980x420/1 980w, https://images.fastspot.com/framework/740x317/1 740w, https://images.fastspot.com/framework/500x214/1 500w, https://images.fastspot.com/framework/300x129/1 300w" sizes="(min-width: 1220px) 1315px, (min-width: 982px) 960px, 90vw" src="https://images.fastspot.com/framework/300x129/1" alt="" loading="lazy" width="300" height="129">
                </figure>
            </a>
        </div>

        <div class="news_card_grid_item is_body">
            <div class="news_card_body">
                <div class="news_card_meta">
                    <div class="news_card_meta_item">
                        <a href="#">Data Science</a>
                    </div>

                    <div class="news_card_meta_item">&bull;</div>

                    <div class="news_card_meta_item">
                        January 23rd, 2024
                    </div>
                </div>

                <div class="news_card_title_wrap">
                    <h2 class="news_card_title">

                        <a href="#" class="news_card_title_featured_link">
                            <span class="news_card_title_featured_link_inner">
                                <span class="news_card_title_featured_link_label">Q&A: How AI can help mitigate climate change</span>
                                <span class="news_card_title_featured_link_icon" aria-hidden="true">

                                    <svg class="icon icon_chevron_right">
                                        <use href="/images/icons.svg#chevron_right" />
                                    </svg>

                                </span>
                            </span>
                        </a>
                    </h2>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="news_card {% if item.featured %}is_featured{% endif %}">
	<div class="news_card_grid">
		{% if item.image %}
			<div class="news_card_grid_item is_media">
				<a href="#" aria-label="{{ item.title }}">
					<figure class="news_card_figure">
						{% if item.media_mention %}
							<div class="news_card_figure_pill_wrap">
								<div class="news_card_figure_pill">
									Media Mention
								</div>
							</div>
						{% endif %}

						{% if item.featured %}
							{% include '@partial-image' with {
								class: 'news_card',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.ultrawide.xlrg,
									img.ultrawide.lrg,
									img.ultrawide.med,
									img.ultrawide.sml,
									img.ultrawide.xsml,
									img.ultrawide.xxsml
								],
								sizes: [
									'(min-width: 1220px) 1315px',
									'(min-width: 982px) 960px',
									'90vw'
								]
							} %}
						{% else %}
							{% include '@partial-image' with {
								class: 'news_card',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.classic.sml,
									img.classic.xsml,
									img.classic.xxsml
								],
								sizes: [
									'(min-width: 1220px) 402px',
									'(min-width: 740px) 445px',
									'90vw'
								]
							} %}
						{% endif %}
					</figure>
				</a>
			</div>
		{% endif %}

		<div class="news_card_grid_item is_body">
			<div class="news_card_body">
				{% if item.topic or item.date %}
					<div class="news_card_meta">
						{% if item.topic %}
							<div class="news_card_meta_item">
								<a href="#">{{ item.topic }}</a>
							</div>
						{% endif %}

						{% if item.topic and item.date %}
							<div class="news_card_meta_item">&bull;</div>
						{% endif %}

						{% if item.date %}
							<div class="news_card_meta_item">
								{{ item.date }}
							</div>
						{% endif %}
					</div>
				{% endif %}

				<div class="news_card_title_wrap">
					<h2 class="news_card_title">
						{% if item.featured %}
							{% include '@partial-link' with {
								title: item.title,
								url: item.url,
								class: 'news_card_title_featured',
								js: false,
								icon: item.external_url ? 'external' : 'chevron_right',
								aria: '',
								nowrap: item.external_url
							} %}
						{% else %}
							{% include '@partial-link' with {
								title: item.title,
								url: item.url,
								class: 'news_card_title',
								js: false,
								icon: item.external_url ? 'external' : false,
								aria: '',
								nowrap: item.external_url
							} %}
						{% endif %}
					</h2>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.