<div class="news_related component_theme_blue_cloud component_alignment_right single_row">
<div class="news_related_header">
<div class="fs-row">
<div class="fs-cell">
<div class="news_related_header_inner">
<h2 class="news_related_title">Headline</h2>
<div class="news_related_header_action">
<a class="news_related_action_link" href="#">
<span class="news_related_action_link_label">All Category</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="news_related_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="news_related_items" aria-label="Related News">
<li class="news_related_item">
<div class="news_related_card">
<!-- News Card -->
<div class="card card_news card_type_contained card_category_plum_gem">
<div class="card_inner card_news_inner">
<div class="card_news_grid">
<div class="card_news_header">
<h2 class="card_news_title">
<a class="card_news_title_link" href="#"><span class="card_news_title_link_label">Neuro-Education Initiative Marks 15 Years at the Learning and the Brain Conference</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</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">Community</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
</li>
<li class="news_related_item">
<div class="news_related_card">
<!-- 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">
<h2 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">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/2 980w, https://images.fastspot.com/jhusoe/740x494/2 740w, https://images.fastspot.com/jhusoe/500x334/2 500w, https://images.fastspot.com/jhusoe/300x200/2 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/2" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">Research</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
</li>
<li class="news_related_item">
<div class="news_related_card">
<!-- News Card -->
<div class="card card_news card_type_contained card_category_orange_gem">
<div class="card_inner card_news_inner">
<div class="card_news_grid">
<div class="card_news_header">
<h2 class="card_news_title">
<a class="card_news_title_link" href="#"><span class="card_news_title_link_label">A Broken Pipeline: The Issues Contributing to the U.S. Teacher Shortage</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/3 980w, https://images.fastspot.com/jhusoe/740x494/3 740w, https://images.fastspot.com/jhusoe/500x334/3 500w, https://images.fastspot.com/jhusoe/300x200/3 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/3" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">Voices</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
</li>
<li class="news_related_item">
<div class="news_related_card">
<!-- News Card -->
<div class="card card_news card_type_contained card_category_blue_brand">
<div class="card_inner card_news_inner">
<div class="card_news_grid">
<div class="card_news_header">
<h2 class="card_news_title">
<a class="card_news_title_link" href="#"><span class="card_news_title_link_label">Johns Hopkins, National Partners Tackle Academic Success and Well-being for Students</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/4 980w, https://images.fastspot.com/jhusoe/740x494/4 740w, https://images.fastspot.com/jhusoe/500x334/4 500w, https://images.fastspot.com/jhusoe/300x200/4 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/4" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">School News</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="news_related_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "Headline", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
<div class="carousel_row_card">
<!-- News Card -->
<div class="card card_news card_type_contained card_category_plum_gem">
<div class="card_inner card_news_inner">
<div class="card_news_grid">
<div class="card_news_header">
<h2 class="card_news_title">
<a class="card_news_title_link" href="#"><span class="card_news_title_link_label">Neuro-Education Initiative Marks 15 Years at the Learning and the Brain Conference</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</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">Community</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
<div class="carousel_row_card">
<!-- 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">
<h2 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">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/2 980w, https://images.fastspot.com/jhusoe/740x494/2 740w, https://images.fastspot.com/jhusoe/500x334/2 500w, https://images.fastspot.com/jhusoe/300x200/2 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/2" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">Research</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
<div class="carousel_row_card">
<!-- News Card -->
<div class="card card_news card_type_contained card_category_orange_gem">
<div class="card_inner card_news_inner">
<div class="card_news_grid">
<div class="card_news_header">
<h2 class="card_news_title">
<a class="card_news_title_link" href="#"><span class="card_news_title_link_label">A Broken Pipeline: The Issues Contributing to the U.S. Teacher Shortage</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/3 980w, https://images.fastspot.com/jhusoe/740x494/3 740w, https://images.fastspot.com/jhusoe/500x334/3 500w, https://images.fastspot.com/jhusoe/300x200/3 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/3" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">Voices</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
<div class="carousel_row_card">
<!-- News Card -->
<div class="card card_news card_type_contained card_category_blue_brand">
<div class="card_inner card_news_inner">
<div class="card_news_grid">
<div class="card_news_header">
<h2 class="card_news_title">
<a class="card_news_title_link" href="#"><span class="card_news_title_link_label">Johns Hopkins, National Partners Tackle Academic Success and Well-being for Students</span><span class="icon_nowrap card_news_title_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_external">
<use href="/images/icons.svg#arrow_external" />
</svg>
</span></a>
</h2>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/4 980w, https://images.fastspot.com/jhusoe/740x494/4 740w, https://images.fastspot.com/jhusoe/500x334/4 500w, https://images.fastspot.com/jhusoe/300x200/4 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/4" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">School News</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination news_related_carousel_pagination"></div>
</div>
<div class="news_related_footer">
<div class="fs-row">
<div class="fs-cell">
<div class="news_related_footer_inner">
<div class="news_related_footer_action">
<a class="news_related_action_link" href="#">
<span class="news_related_action_link_label">All Category</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Related News -->
{#
{% include '@component-related-news' with {
theme: 'white',
card_alignment: 'right',
group_title: 'Title',
group_link: {
url: '#',
label: 'label'
},
featured: {
title: 'Title',
category: 'Category',
color: 'color',
image: '1',
alt: '',
url: '#'
},
cards: [
{
card_type: 'news',
item: {
type: 'default',
title: 'Title',
category: 'Category',
color: 'color',
image: '1',
alt: '',
url: '#'
}
}
]
} %}
#}
<div class="news_related component_theme_{{ theme ?: 'white' }} component_alignment_{{ card_alignment ?: 'right' }}{% if featured == "" or featured == null %} single_row{% endif %}">
<div class="news_related_header">
<div class="fs-row">
<div class="fs-cell">
<div class="news_related_header_inner">
<h2 class="news_related_title">{{ group_title ?: 'Related News' }}</h2>
{% if group_link %}
<div class="news_related_header_action">
<a class="news_related_action_link" href="{{ group_link.url }}">
<span class="news_related_action_link_label">{{ group_link.label }}</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="news_related_body">
<div class="fs-row">
<div class="fs-cell">
{% if featured %}
<div class="news_related_body_inner">
<div class="news_related_feature card_category_{{ featured.color }}">
<div class="news_related_feature_grid">
<div class="news_related_feature_header">
<h3 class="news_related_feature_title">
<a class="news_related_feature_title_link" href="{{ featured.url }}"><span class="news_related_feature_title_link_label">{{ featured.title }}</span><span class="icon_nowrap news_related_feature_title_link_icon" aria-hidden="true">{{ icon('arrow_external') }}</span></a>
</h3>
</div>
<div class="news_related_feature_body">
<figure class="news_related_feature_figure">
{% include '@partial-image' with {
class: 'news_related_feature',
alt: featured.alt,
image: featured.image,
loading: 'lazy',
sources: [
img.classic.lrg,
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
'(min-width: 1394px) 632px',
'(min-width: 1220px) 552px',
'(min-width: 980px) 442px',
'(min-width: 740px) 690px',
'90vw'
]
} %}
</figure>
<p class="news_related_feature_category">{{ featured.category }}</p>
</div>
</div>
</div>
{% endif %}
<ul class="news_related_items" aria-label="{{ title ?: 'Related News' }}">
{% for card in cards %}
<li class="news_related_item">
<div class="news_related_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
</li>
{% endfor %}
</ul>
{% if featured %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="news_related_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "{{ group_title }}", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
{% for card in cards %}
<div class="carousel_row_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
{% endfor %}
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination news_related_carousel_pagination"></div>
</div>
{% if group_link %}
<div class="news_related_footer">
<div class="fs-row">
<div class="fs-cell">
<div class="news_related_footer_inner">
<div class="news_related_footer_action">
<a class="news_related_action_link" href="{{ group_link.url }}">
<span class="news_related_action_link_label">{{ group_link.label }}</span>
</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
<!-- END: Related News -->
No notes defined.