<div class="featured_events">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_events_inner">
<div class="featured_events_header">
<h2 class="featured_events_title">Upcoming Events</h2>
<a href="#" class="featured_events_details_link">
<span class="featured_events_details_link_inner">
<span class="featured_events_details_link_label">View all News & Stories</span>
<span class="featured_events_details_link_icon" aria-hidden="true">
<span class="featured_events_details_link_icon_inner">
<span class="featured_events_details_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</div>
<div class="featured_events_body">
<div class="js-carousel featured_events_items" data-carousel-options='{
"theme": "theme_dark",
"controls": false,
"contained": false,
"maxWidth": "979px",
"show": {
"500px": 2,
"740px": 3
}
}'>
<div class="featured_events_item">
<time class="featured_events_item_date" datetime="2020-05-31 17:00:00">
<span class="featured_events_item_date_flag featured_events_item_date_flag_from">
<span class="featured_events_item_date_start_month">May</span>
<span class="featured_events_item_date_start_day">31</span>
</span>
<span class="featured_events_item_date_flag featured_events_item_date_flag_to">
<span class="featured_events_item_date_start_month">Jun</span>
<span class="featured_events_item_date_start_day">13</span>
</span>
</time>
<div class="featured_events_item_body">
<h3 class="featured_events_item_title">
<a class="featured_events_item_title_link" href="#">Maker Space: Duct Tape Wallets & Low-Cost Crafts</a>
</h3>
<div class="featured_events_item_details">
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</span>
<span class="featured_events_item_detail_label">Midlothian Library</span>
</div>
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<time class="featured_events_item_detail_label" datetime="">12:00 pm – 4:00 pm</time>
</div>
</div>
</div>
</div>
<div class="featured_events_item">
<time class="featured_events_item_date" datetime="2020-05-31 17:00:00">
<span class="featured_events_item_date_flag featured_events_item_date_flag_from">
<span class="featured_events_item_date_start_month">May</span>
<span class="featured_events_item_date_start_day">31</span>
</span>
</time>
<div class="featured_events_item_body">
<h3 class="featured_events_item_title">
<a class="featured_events_item_title_link" href="#">Graduation Celebration Events</a>
</h3>
<div class="featured_events_item_details">
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</span>
<span class="featured_events_item_detail_label">Chester Campus</span>
</div>
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<time class="featured_events_item_detail_label" datetime="">10:00 pm – 5:00 pm</time>
</div>
</div>
</div>
</div>
<div class="featured_events_item">
<time class="featured_events_item_date" datetime="2020-05-31 17:00:00">
<span class="featured_events_item_date_flag featured_events_item_date_flag_from">
<span class="featured_events_item_date_start_month">May</span>
<span class="featured_events_item_date_start_day">31</span>
</span>
</time>
<div class="featured_events_item_body">
<h3 class="featured_events_item_title">
<a class="featured_events_item_title_link" href="#">Earth Day Celebration: Plant Seeds and See the Power of the Sun</a>
</h3>
<div class="featured_events_item_details">
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</span>
<span class="featured_events_item_detail_label">Chester Campus, Library</span>
</div>
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<time class="featured_events_item_detail_label" datetime="">2:00 pm – 3:00 pm</time>
</div>
</div>
</div>
</div>
<div class="featured_events_item">
<time class="featured_events_item_date" datetime="2020-05-31 17:00:00">
<span class="featured_events_item_date_flag featured_events_item_date_flag_from">
<span class="featured_events_item_date_start_month">May</span>
<span class="featured_events_item_date_start_day">31</span>
</span>
<span class="featured_events_item_date_flag featured_events_item_date_flag_to">
<span class="featured_events_item_date_start_month">Jun</span>
<span class="featured_events_item_date_start_day">13</span>
</span>
</time>
<div class="featured_events_item_body">
<h3 class="featured_events_item_title">
<a class="featured_events_item_title_link" href="#">15-Week Session: Final Exams</a>
</h3>
<div class="featured_events_item_details">
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_place">
<use href="/images/icons.svg#place" />
</svg>
</span>
<span class="featured_events_item_detail_label">Online</span>
</div>
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">
<svg class="icon icon_clock">
<use href="/images/icons.svg#clock" />
</svg>
</span>
<time class="featured_events_item_detail_label" datetime="">All Day</time>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="featured_events_discovery_link">
<span class="featured_events_discovery_link_inner">
<span class="featured_events_discovery_link_label">View all Events</span>
<span class="featured_events_discovery_link_icon" aria-hidden="true">
<span class="featured_events_discovery_link_icon_inner">
<span class="featured_events_discovery_link_icon_space"></span>
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="featured_events">
<div class="fs-row">
<div class="fs-cell">
<div class="featured_events_inner">
<div class="featured_events_header">
<h2 class="featured_events_title">{{ title }}</h2>
{% render '@partial-link' with {
title: "View all News & Stories",
url: "#",
class: "featured_events_details",
icon: "caret_right"
} %}
</div>
<div class="featured_events_body">
<div class="js-carousel featured_events_items" data-carousel-options='{
"theme": "theme_dark",
"controls": false,
"contained": false,
"maxWidth": "979px",
"show": {
"500px": 2,
"740px": 3
}
}'>
{% for item in items %}
<div class="featured_events_item">
<time class="featured_events_item_date" datetime="{{ item.date.from.begin }}">
<span class="featured_events_item_date_flag featured_events_item_date_flag_from">
<span class="featured_events_item_date_start_month">{{ item.date.from.begin|date("M") }}</span>
<span class="featured_events_item_date_start_day">{{ item.date.from.begin|date("d") }}</span>
</span>
{% if item.date.to %}
<span class="featured_events_item_date_flag featured_events_item_date_flag_to">
<span class="featured_events_item_date_start_month">{{ item.date.to.begin|date("M") }}</span>
<span class="featured_events_item_date_start_day">{{ item.date.to.begin|date("d") }}</span>
</span>
{% endif %}
</time>
<div class="featured_events_item_body">
<h3 class="featured_events_item_title">
<a class="featured_events_item_title_link" href="#">{{ item.title }}</a>
</h3>
<div class="featured_events_item_details">
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">{{ icon("place") }}</span>
<span class="featured_events_item_detail_label">{{ item.location }}</span>
</div>
<div class="featured_events_item_detail">
<span class="featured_events_item_detail_icon">{{ icon("clock") }}</span>
<time class="featured_events_item_detail_label" datetime="">{{ item.time }}</time>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% render '@partial-link' with {
title: "View all Events",
url: "#",
class: "featured_events_discovery",
icon: "caret_right"
} %}
</div>
</div>
</div>
</div>
No notes defined.