Johns Hopkins Data Science and AI Institute Component Library

News Feature 

<!-- News Feature -->
<div class="news_feature_block">
    <div class="fs-row fs-lg-justify-end">
        <div class="fs-cell fs-lg-10">
            <div class="news_feature_block_inner">
                <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>
        </div>
    </div>
</div>
<!-- END: News Feature -->
 
{#
	{% include '@partial-news-feature' with {
		item: {
			image: '1',
			categories: [
				{
					label: 'Category',
					url: '#'
				}
			],
			title: 'Title',
			url: '#',
			date: '2019-01-01 17:00:00',
			author: 'Author',
			description: 'Description'
		}
	} %}
#}
<!-- News Feature -->
<div class="news_feature_block">
	<div class="fs-row fs-lg-justify-end">
		<div class="fs-cell fs-lg-10">
			<div class="news_feature_block_inner">
				{% render "@partial-news-card--featured" %}
			</div>
		</div>
	</div>
</div>
<!-- END: News Feature -->

No notes defined.