<!-- Featured News & Events -->
<div class="featured_content">
<div class="featured_content_large">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_content_inner">
<div class="featured_content_news">
<div class="featured_content_news_header">
<h2 class="featured_content_news_title">Featured News</h2>
</div>
<div class="featured_content_news_body">
<ul class="featured_content_news_items" aria-label="Featured News">
<li class="featured_content_news_item">
<!-- News Card -->
<div class="card card_news card_type_default 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">
<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/10 980w, https://images.fastspot.com/jhusoe/740x494/10 740w, https://images.fastspot.com/jhusoe/500x334/10 500w, https://images.fastspot.com/jhusoe/300x200/10 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/10" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">Reaserch</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</li>
<li class="featured_content_news_item">
<!-- News Card -->
<div class="card card_news card_type_default card_category_blue_brand">
<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">Amy Shelton named next director of Johns Hopkins Center for Talented Youth</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>
</h3>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/11 980w, https://images.fastspot.com/jhusoe/740x494/11 740w, https://images.fastspot.com/jhusoe/500x334/11 500w, https://images.fastspot.com/jhusoe/300x200/11 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/11" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">School News</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</li>
</ul>
</div>
</div>
<div class="featured_content_events">
<div class="featured_content_events_header">
<h2 class="featured_content_events_title">Featured Events</h2>
</div>
<div class="featured_content_events_body">
<ul class="featured_content_events_items" aria-label="Featured Events">
<li class="featured_content_events_item">
<!-- Event Card -->
<div class="card card_event card_type_default">
<div class="card_inner card_event_inner">
<div class="card_event_grid">
<div class="card_event_group">
<div class="card_event_header">
<h3 class="card_event_title">
<a class="card_event_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</h3>
<time class="card_event_date" datetime="2023-05-31 16:00:00">
<span class="card_event_date_label">
May 31, 2023
</span>
</time>
</div>
<p class="card_event_time">Time: 4-5 pm UTC</p>
</div>
<figure class="card_event_figure">
<a class="card_event_figure_link" href="#" aria-label="Read more about Name of an Upcoming Admission Q&A Session" tabindex="-1">
<img class="card_event_image" srcset="https://images.fastspot.com/jhusoe/980x654/12 980w, https://images.fastspot.com/jhusoe/740x494/12 740w, https://images.fastspot.com/jhusoe/500x334/12 500w, https://images.fastspot.com/jhusoe/300x200/12 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/12" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
</div>
</div>
<!-- END: Event Card -->
</li>
<li class="featured_content_events_item">
<!-- Event List Card -->
<div class="card card_events card_type_default">
<div class="card_inner card_events_inner">
<div class="card_events_grid">
<div class="card_events_item">
<p class="card_events_item_title">
<a class="card_events_item_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</p>
<time class="card_events_item_date" datetime="2023-02-12 17:00:00">
<span class="card_events_item_date_label">
February 12-13, 2023
</span>
</time>
</div>
<div class="card_events_item">
<p class="card_events_item_title">
<a class="card_events_item_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</p>
<time class="card_events_item_date" datetime="2023-02-12 17:00:00">
<span class="card_events_item_date_label">
February 12, 2023
</span>
</time>
</div>
<div class="card_events_item">
<p class="card_events_item_title">
<a class="card_events_item_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</p>
<time class="card_events_item_date" datetime="2023-02-12 17:00:00">
<span class="card_events_item_date_label">
February 12, 2023
</span>
</time>
</div>
</div>
</div>
</div>
<!-- END: Event List Card -->
</li>
</ul>
</div>
<div class="featured_content_events_footer">
<div class="featured_content_events_footer_action">
<a class="featured_content_events_action_link" href="#">
<span class="featured_content_events_action_link_label">More Events</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="featured_content_small">
<div class="featured_content_small_header">
<div class="fs-row">
<div class="fs-cell">
<h2 class="featured_content_small_title">Featured News & Events</h2>
</div>
</div>
</div>
<div class="featured_content_small_body">
<div class="featured_content_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "Featured News & Events", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
<div class="carousel_row_card">
<!-- News Card -->
<div class="card card_news card_type_default 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">
<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/10 980w, https://images.fastspot.com/jhusoe/740x494/10 740w, https://images.fastspot.com/jhusoe/500x334/10 500w, https://images.fastspot.com/jhusoe/300x200/10 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/10" alt="" loading="lazy" width="300" height="200">
</figure>
<p class="card_news_category">Reaserch</p>
</div>
</div>
</div>
</div>
<!-- END: News Card -->
</div>
<div class="carousel_row_card">
<!-- News Card -->
<div class="card card_news card_type_default card_category_blue_brand">
<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">Amy Shelton named next director of Johns Hopkins Center for Talented Youth</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>
</h3>
</div>
<div class="card_news_body">
<figure class="card_news_figure">
<img class="card_news_image" srcset="https://images.fastspot.com/jhusoe/980x654/11 980w, https://images.fastspot.com/jhusoe/740x494/11 740w, https://images.fastspot.com/jhusoe/500x334/11 500w, https://images.fastspot.com/jhusoe/300x200/11 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/11" 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 class="carousel_row_card">
<!-- Event Card -->
<div class="card card_event card_type_default">
<div class="card_inner card_event_inner">
<div class="card_event_grid">
<div class="card_event_group">
<div class="card_event_header">
<h3 class="card_event_title">
<a class="card_event_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</h3>
<time class="card_event_date" datetime="2023-05-31 16:00:00">
<span class="card_event_date_label">
May 31, 2023
</span>
</time>
</div>
<p class="card_event_time">Time: 4-5 pm UTC</p>
</div>
<figure class="card_event_figure">
<a class="card_event_figure_link" href="#" aria-label="Read more about Name of an Upcoming Admission Q&A Session" tabindex="-1">
<img class="card_event_image" srcset="https://images.fastspot.com/jhusoe/980x654/12 980w, https://images.fastspot.com/jhusoe/740x494/12 740w, https://images.fastspot.com/jhusoe/500x334/12 500w, https://images.fastspot.com/jhusoe/300x200/12 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/12" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
</div>
</div>
<!-- END: Event Card -->
</div>
<div class="carousel_row_card">
<!-- Event List Card -->
<div class="card card_events card_type_default">
<div class="card_inner card_events_inner">
<div class="card_events_grid">
<div class="card_events_item">
<p class="card_events_item_title">
<a class="card_events_item_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</p>
<time class="card_events_item_date" datetime="2023-02-12 17:00:00">
<span class="card_events_item_date_label">
February 12-13, 2023
</span>
</time>
</div>
<div class="card_events_item">
<p class="card_events_item_title">
<a class="card_events_item_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</p>
<time class="card_events_item_date" datetime="2023-02-12 17:00:00">
<span class="card_events_item_date_label">
February 12, 2023
</span>
</time>
</div>
<div class="card_events_item">
<p class="card_events_item_title">
<a class="card_events_item_title_link" href="#">Name of an Upcoming Admission Q&A Session</a>
</p>
<time class="card_events_item_date" datetime="2023-02-12 17:00:00">
<span class="card_events_item_date_label">
February 12, 2023
</span>
</time>
</div>
</div>
</div>
</div>
<!-- END: Event List Card -->
</div>
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination featured_content_carousel_pagination"></div>
</div>
</div>
<div class="featured_content_small_footer">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_content_small_footer_action">
<a class="featured_content_events_action_link" href="#">
<span class="featured_content_events_action_link_label">More Events</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Featured News & Events -->
{#
{% include '@component-featured-news-events' with {
news: [
{
item: {
type: 'default',
title: 'title',
category: 'category',
color: 'color',
image: '1',
alt: '',
url: '#'
}
}
],
event: {
item: {
type: 'default',
title: 'title',
category: 'category',
color: 'color',
image: '1',
alt: '',
url: '#'
}
},
events: {
item: {
title: 'Title',
url: '#',
date: {
same_day: true,
all_day: false,
from: '2023-05-31 17:00:00',
to: '2023-05-31 19:00:00'
}
}
}
} %}
#}
<!-- Featured News & Events -->
<div class="featured_content">
<div class="featured_content_large">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_content_inner">
<div class="featured_content_news">
<div class="featured_content_news_header">
<h2 class="featured_content_news_title">Featured News</h2>
</div>
<div class="featured_content_news_body">
<ul class="featured_content_news_items" aria-label="Featured News">
{% for item in news %}
<li class="featured_content_news_item">
{% include '@partial-news-card' with {
item: item.item
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="featured_content_events">
<div class="featured_content_events_header">
<h2 class="featured_content_events_title">Featured Events</h2>
</div>
<div class="featured_content_events_body">
<ul class="featured_content_events_items" aria-label="Featured Events">
<li class="featured_content_events_item">
{% include '@partial-event-card' with {
item: event.item
} %}
</li>
<li class="featured_content_events_item">
{% include '@partial-event-list-card' with {
item: events.item
} %}
</li>
</ul>
</div>
<div class="featured_content_events_footer">
<div class="featured_content_events_footer_action">
<a class="featured_content_events_action_link" href="#">
<span class="featured_content_events_action_link_label">More Events</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="featured_content_small">
<div class="featured_content_small_header">
<div class="fs-row">
<div class="fs-cell">
<h2 class="featured_content_small_title">Featured News & Events</h2>
</div>
</div>
</div>
<div class="featured_content_small_body">
<div class="featured_content_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "Featured News & Events", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
{% for item in news %}
<div class="carousel_row_card">
{% include '@partial-news-card' with {
item: item.item
} %}
</div>
{% endfor %}
<div class="carousel_row_card">
{% include '@partial-event-card' with {
item: event.item
} %}
</div>
<div class="carousel_row_card">
{% include '@partial-event-list-card' with {
item: events.item
} %}
</div>
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination featured_content_carousel_pagination"></div>
</div>
</div>
<div class="featured_content_small_footer">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_content_small_footer_action">
<a class="featured_content_events_action_link" href="#">
<span class="featured_content_events_action_link_label">More Events</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Featured News & Events -->
No notes defined.