JHU SOE Component Library

Featured News 

<div class="news_featured">
    <div class="news_featured_inner">
        <div class="news_featured_main">
            <div class="news_featured_primary">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="news_featured_primary_inner">
                            <div class="news_featured_primary_grid">
                                <div class="news_featured_primary_grid_item is_content">
                                    <h2 class="news_featured_title">Featured News</h2>
                                    <div class="news_featured_primary_group">
                                        <div class="news_featured_primary_header">
                                            <h3 class="news_featured_primary_title">
                                                <a class="news_featured_primary_title_link" href="#">Bringing “People Power” to Academic Success</a>
                                            </h3>
                                            <p class="news_featured_primary_category">
                                                <span class="news_featured_primary_category_label">Research</span>
                                            </p>
                                        </div>
                                        <div class="news_featured_primary_description">
                                            <p>The National Partnership for Student Success, with U.S. Department of Education and AmeriCorps, will help students recover from impact of COVID-19 pandemic</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="news_featured_primary_grid_item is_media">
                                    <figure class="news_featured_primary_figure">

                                        <img class="news_featured_primary_image" srcset="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: 1400px) 527px, (min-width: 1220px) 460px, (min-width: 980px) 368px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/jhusoe/300x200/1" alt="" loading="lazy" width="300" height="200">
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news_featured_secondary">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="news_featured_secondary_inner">
                            <ul class="news_featured_secondary_list" aria-label="Featured News">
                                <li class="news_featured_secondary_item theme_blue_brand">
                                    <div class="news_featured_secondary_item_inner">
                                        <h3 class="news_featured_secondary_title">
                                            <a class="news_featured_secondary_title_link" href="#">When School Feels 'Like Prison,' Test Scores, College Attendance Drop</a>
                                        </h3>
                                        <div class="news_featured_secondary_media">
                                            <figure class="news_featured_secondary_figure">

                                                <img class="news_featured_secondary_image" srcset="https://images.fastspot.com/jhusoe/740x416/2 740w, https://images.fastspot.com/jhusoe/500x282/2 500w, https://images.fastspot.com/jhusoe/300x169/2 300w" sizes="(min-width: 1400px) 289px, (min-width: 1220px) 252px, (min-width: 740px) calc(-1.96vw + 225px), (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/jhusoe/300x169/2" alt="" loading="lazy" width="300" height="169">
                                            </figure>
                                            <p class="news_featured_secondary_category">Research</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="news_featured_secondary_item theme_blue_brand">
                                    <div class="news_featured_secondary_item_inner">
                                        <h3 class="news_featured_secondary_title">
                                            <a class="news_featured_secondary_title_link" href="#">A Broken Pipeline: The Issues Contributing to the U.S. Teacher Shortage</a>
                                        </h3>
                                        <div class="news_featured_secondary_media">
                                            <figure class="news_featured_secondary_figure">

                                                <img class="news_featured_secondary_image" srcset="https://images.fastspot.com/jhusoe/740x416/3 740w, https://images.fastspot.com/jhusoe/500x282/3 500w, https://images.fastspot.com/jhusoe/300x169/3 300w" sizes="(min-width: 1400px) 289px, (min-width: 1220px) 252px, (min-width: 740px) calc(-1.96vw + 225px), (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/jhusoe/300x169/3" alt="" loading="lazy" width="300" height="169">
                                            </figure>
                                            <p class="news_featured_secondary_category">Research</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="news_featured_secondary_item theme_orange_gem">
                                    <div class="news_featured_secondary_item_inner">
                                        <h3 class="news_featured_secondary_title">
                                            <a class="news_featured_secondary_title_link" href="#">Can We Stop Gun Violence in America?</a>
                                        </h3>
                                        <div class="news_featured_secondary_media">
                                            <figure class="news_featured_secondary_figure">

                                                <img class="news_featured_secondary_image" srcset="https://images.fastspot.com/jhusoe/740x416/4 740w, https://images.fastspot.com/jhusoe/500x282/4 500w, https://images.fastspot.com/jhusoe/300x169/4 300w" sizes="(min-width: 1400px) 289px, (min-width: 1220px) 252px, (min-width: 740px) calc(-1.96vw + 225px), (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/jhusoe/300x169/4" alt="" loading="lazy" width="300" height="169">
                                            </figure>
                                            <p class="news_featured_secondary_category">Voices</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="news_featured_secondary_item theme_blue_brand">
                                    <div class="news_featured_secondary_item_inner">
                                        <h3 class="news_featured_secondary_title">
                                            <a class="news_featured_secondary_title_link" href="#">A Broken Pipeline: The Issues Contributing to the U.S. Teacher Shortage</a>
                                        </h3>
                                        <div class="news_featured_secondary_media">
                                            <figure class="news_featured_secondary_figure">

                                                <img class="news_featured_secondary_image" srcset="https://images.fastspot.com/jhusoe/740x416/3 740w, https://images.fastspot.com/jhusoe/500x282/3 500w, https://images.fastspot.com/jhusoe/300x169/3 300w" sizes="(min-width: 1400px) 289px, (min-width: 1220px) 252px, (min-width: 740px) calc(-1.96vw + 225px), (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/jhusoe/300x169/3" alt="" loading="lazy" width="300" height="169">
                                            </figure>
                                            <p class="news_featured_secondary_category">Research</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="news_featured_more">
                                <a class="news_featured_more_link" href="#">
                                    <span class="news_featured_more_link_label">View all News</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->
 
{#
	{% include '@component-featured-news' with {
		title: 'Title',
		primary: {
			title: 'Main Title',
			category: 'Main Category',
			description: 'Main Description',
			url: '#'
		},
		secondary: [
			{
				theme: 'color',
				title: 'Secondary Title',
				category: 'Secondary Category',
				image: '1',
				alt: '',
				url: ''
			}
		],
		sidebar: [
			{
				title: 'Sidebar Title',
				source: {
					url: 'Sidebar Category',
					label: 'Sidebar Category'
				},
				date: '2019-01-01 17:00:00'
			}
		]
	} %}
#}

<div class="news_featured">
	<div class="news_featured_inner">
		<div class="news_featured_main">
			<div class="news_featured_primary">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="news_featured_primary_inner">
							<div class="news_featured_primary_grid">
								<div class="news_featured_primary_grid_item is_content">
									<h2 class="news_featured_title">{{ title ?: "Featured News" }}</h2>
									<div class="news_featured_primary_group">
										<div class="news_featured_primary_header">
											<h3 class="news_featured_primary_title">
												<a class="news_featured_primary_title_link" href="{{ primary.url }}">{{ primary.title }}</a>
											</h3>
											<p class="news_featured_primary_category">
												<span class="news_featured_primary_category_label">{{ primary.category }}</span>
											</p>
										</div>
										<div class="news_featured_primary_description">
											<p>{{ primary.description }}</p>
										</div>
									</div>
								</div>

								{% if primary.image %}
									<div class="news_featured_primary_grid_item is_media">
										<figure class="news_featured_primary_figure">
											{% include '@partial-image' with {
												class: 'news_featured_primary',
												alt: primary.alt,
												image: primary.image,
												loading: 'lazy',
												sources: [
													img.classic.sml,
													img.classic.xsml,
													img.classic.xxsml
												],
												sizes: [
													"(min-width: 1400px) 527px",
													"(min-width: 1220px) 460px",
													"(min-width: 980px) 368px",
													"(min-width: 780px) 691px",
													"(min-width: 380px) calc(96.05vw - 39px)",
													"calc(31.67vw + 193px)"
												]
											} %}
										</figure>
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="news_featured_secondary">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="news_featured_secondary_inner">
							<ul class="news_featured_secondary_list" aria-label="{{ title ?: "Featured News" }}">
								{% for item in secondary %}
									<li class="news_featured_secondary_item theme_{{ item.theme }}">
										<div class="news_featured_secondary_item_inner">
											<h3 class="news_featured_secondary_title">
												<a class="news_featured_secondary_title_link" href="{{ item.url }}">{{ item.title }}</a>
											</h3>
											<div class="news_featured_secondary_media">
												<figure class="news_featured_secondary_figure">
													{% include '@partial-image' with {
														class: 'news_featured_secondary',
														alt: item.alt,
														image: item.image,
														loading: 'lazy',
														sources: [
															img.wide.sml,
															img.wide.xsml,
															img.wide.xxsml
														],
														sizes: [
															"(min-width: 1400px) 289px",
															"(min-width: 1220px) 252px",
															"(min-width: 740px) calc(-1.96vw + 225px)",
															"(min-width: 380px) calc(95.88vw - 38px)",
															"calc(31.67vw + 193px)"
														]
													} %}
												</figure>
												<p class="news_featured_secondary_category">{{ item.category }}</p>
											</div>
										</div>
									</li>
								{% endfor %}
							</ul>
							<div class="news_featured_more">
								<a class="news_featured_more_link" href="#">
									<span class="news_featured_more_link_label">View all News</span>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.