<div class="page_header_event">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_event_inner">
<div class="page_header_event_breadcrumb">
<div class="page_breadcrumb">
<div class="page_breadcrumb_inner">
<div class="breadcrumb">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Events & Tickets</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Events Calendar</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Community Programs</span>
</span>
</span>
<span class="breadcrumb_end" aria-hidden="true">
<svg class="icon icon_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<div class="page_header_event_body">
<div class="event_feature_row">
<div class="event_feature_item">
<div class="event_feature_item_media">
<figure class="event_feature_item_figure">
<picture class="event_feature_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x555/1" width="740" height="555">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/740x416/1" width="740" height="416">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x416/1" width="740" height="416">
<img class="event_feature_item_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_feature_item_share">
<div class="js-share-tools share_tools direction_right">
<div class="share_tools_header">
<h2 class="share_tools_title">Share Options</h2>
<button class="js-share-tools-toggle share_tools_toggle" data-swap-target=".js-share-tools">
<span class="share_tools_toggle_inner">
<span class="share_tools_toggle_icon">
<svg class="icon icon_share">
<use href="/images/icons.svg#share" />
</svg>
</span>
<span class="share_tools_toggle_label">Share Event</span>
</span>
</button>
</div>
<ul class="js-share-tools-list share_tools_list" aria-label="Share Options">
<li class="js-share-tool-item share_tool_item">
<a class="js-share-tool js-share-facebook share_tool" href="#" target="_blank" rel="noopener">
<span class="share_tool_icon">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
<span class="share_tool_label">Share to Facebook</span>
</a>
</li>
<li class="js-share-tool-item share_tool_item">
<a class="js-share-tool js-share-twitter share_tool" href="#" target="_blank" rel="noopener">
<span class="share_tool_icon">
<svg class="icon icon_twitter">
<use href="/images/icons.svg#twitter" />
</svg>
</span>
<span class="share_tool_label">Share to Twitter</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="event_feature_item_wrapper">
<div class="event_feature_item_header">
<div class="event_feature_item_program">FIM Presents</div>
<h1 class="event_feature_item_title">
Event Title Lorem
</h1>
<div class="event_feature_item_time_wrapper">
<time class="event_feature_item_date" datetime="2023-05-31 17:00:00">
<span class="event_feature_item_date_start">May 31</span>
<span class="event_feature_item_date_end"> - June 13</span>
</time>
</div>
<div class="event_feature_item_fee">
<div class="event_feature_item_registration">
<span class="event_feature_item_registration_hint">Free to Attend</span>
<span class="event_feature_item_registration_label">Registration is required</span>
</div>
</div>
</div>
<div class="event_feature_item_body">
<div class="event_feature_item_details">
<div class="event_feature_item_detail">
<span class="event_feature_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_feature_item_detail_hint">Location: </span>
<span class="event_feature_item_detail_label">Whiting Auditorium</span>
</div>
<ul class="event_feature_item_category_list" aria-label="Categories">
<li class="event_feature_item_category">
<a class="event_feature_item_category_link" href="#">Category One</a>
</li>
<li class="event_feature_item_category">
<a class="event_feature_item_category_link" href="#">Category Two</a>
</li>
</ul>
</div>
</div>
<div class="event_feature_item_footer">
<div class="event_feature_item_footer_action">
<a href="#" class="event_feature_item_footer_link">
<span class="event_feature_item_footer_link_inner">
<span class="event_feature_item_footer_link_label">Get Tickets</span>
<span class="event_feature_item_footer_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
<div class="event_feature_item_policies">
<a class="event_feature_item_policies_label" href="#event_policies">Event Policies</a>
<ul class="event_feature_item_policies_list">
<li class="event_feature_item_policies_item">
<span class="event_feature_item_policies_item_label">People Allowed</span>
<span>
<svg class="icon icon_users">
<use href="/images/icons.svg#users" />
</svg>
</span>
</li>
<li class="event_feature_item_policies_item event_feature_item_policies_item_restricted">
<span class="event_feature_item_policies_item_label">No Talking</span>
<span>
<svg class="icon icon_comment">
<use href="/images/icons.svg#comment" />
</svg>
</span>
</li>
<li class="event_feature_item_policies_item">
<span class="event_feature_item_policies_item_label">Masks Required</span>
<span>
<svg class="icon icon_mask">
<use href="/images/icons.svg#mask" />
</svg>
</span>
</li>
<li class="event_feature_item_policies_item">
<span class="event_feature_item_policies_item_label">The circle thing Jemal does is allowed</span>
<span>
<svg class="icon icon_hands">
<use href="/images/icons.svg#hands" />
</svg>
</span>
</li>
<li class="event_feature_item_policies_item event_feature_item_policies_item_restricted">
<span class="event_feature_item_policies_item_label">No Pictures</span>
<span>
<svg class="icon icon_camera">
<use href="/images/icons.svg#camera" />
</svg>
</span>
</li>
<li class="event_feature_item_policies_item">
<span class="event_feature_item_policies_item_label">No Hearing</span>
<span>
<svg class="icon icon_hearing_aid">
<use href="/images/icons.svg#hearing_aid" />
</svg>
</span>
</li>
<li class="event_feature_item_policies_item">
<span class="event_feature_item_policies_item_label">Very Expensive</span>
<span>
<svg class="icon icon_dollar">
<use href="/images/icons.svg#dollar" />
</svg>
</span>
</li>
<li class="event_feature_item_policies_item">
<span class="event_feature_item_policies_item_label">Riders Welcome</span>
<span>
<svg class="icon icon_wheelchair">
<use href="/images/icons.svg#wheelchair" />
</svg>
</span>
</li>
</ul>
</div>
</div>
<div class="alert_inner alert_inner_inline">
<div class="alert_header">
<h2 class="alert_title" id="alert_title" tabindex="-1">
<span class="alert_title_icon">
<svg class="icon icon_info">
<use href="/images/icons.svg#info" />
</svg>
</span>
<span class="alert_title_label">This is an event-specific alert</span>
</h2>
</div>
<div class="alert_body">
<div class="alert_description typography">
This event has been postponed from its original date of September 23, 2023. The new event date is Lorem 21, 2024.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{#
{% include '@partial-page-header' with {
page: page
} %}
#}
<div class="page_header_event">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_event_inner">
<div class="page_header_event_breadcrumb">
<div class="page_breadcrumb">
<div class="page_breadcrumb_inner">
{% render '@navigation-breadcrumb' with {
page: page,
modifier: '',
links: page.breadcrumbNav,
icon_home: '',
icon_divider: 'forward_slash',
icon_end: 'forward_slash'
} %}
</div>
</div>
</div>
<div class="page_header_event_body">
<div class="event_feature_row">
<div class="event_feature_item">
<div class="event_feature_item_media">
{% if event.image %}
<figure class="event_feature_item_figure">
{% include '@partial-picture' with {
class: 'event_feature_item',
alt: '',
image: event.image,
loading: 'lazy',
sources: {
'980px': img.full.sml,
'360px': img.wide.sml,
'0px': img.wide.sml,
}
} %}
</figure>
{% endif %}
<div class="event_feature_item_share">
{% render '@partial-share' %}
</div>
</div>
<div class="event_feature_item_wrapper">
<div class="event_feature_item_header">
<div class="event_feature_item_program">{{ event.program }}</div>
<h1 class="event_feature_item_title">
{{ event.title }}
</h1>
<div class="event_feature_item_time_wrapper">
<time class="event_feature_item_date" datetime="{{ event.date.from }}">
<span class="event_feature_item_date_start">{{ event.date.from|date('F d') }}</span>
{% if event.date.same_day == false %}
<span class="event_feature_item_date_end"> - {{ event.date.to|date('F d') }}</span>
{% endif %}
</time>
{% if event.date.same_day %}
<span class="event_feature_item_time">
<span> • </span>
<span class="event_feature_item_time_start">{{ event.date.from|date('g:i A') }}</span>
{% if event.date.to %}
<span class="event_feature_item_time_start"> - {{ event.date.to|date('g:i A') }}</span>
{% endif %}
</span>
{% endif %}
</div>
<div class="event_feature_item_fee">
{% if event.tickets %}
<div class="event_feature_item_tickets">
<span class="event_feature_item_tickets_icon">{{ icon('ticket') }}</span>
<span class="event_feature_item_tickets_label">Ticketed</span>
</div>
{% endif %}
{% if event.registration %}
<div class="event_feature_item_registration">
<span class="event_feature_item_registration_hint">Free to Attend</span>
<span class="event_feature_item_registration_label">Registration is required</span>
</div>
{% endif %}
</div>
</div>
<div class="event_feature_item_body">
<div class="event_feature_item_details">
{% if event.location %}
<div class="event_feature_item_detail">
<span class="event_feature_item_detail_icon">{{ icon('location') }}</span>
<span class="event_feature_item_detail_hint">Location: </span>
<span class="event_feature_item_detail_label">{{ event.location }}</span>
</div>
{% endif %}
<ul class="event_feature_item_category_list" aria-label="Categories">
{% for category in event.categories %}
<li class="event_feature_item_category">
<a class="event_feature_item_category_link" href="{{ category.url }}">{{ category.label }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="event_feature_item_footer">
<div class="event_feature_item_footer_action">
{% include '@partial-link' with {
class: 'event_feature_item_footer',
title: 'Get Tickets',
url: '#',
icon: 'chevron_right',
} %}
</div>
<div class="event_feature_item_policies">
<a class="event_feature_item_policies_label" href="#event_policies">Event Policies</a>
<ul class="event_feature_item_policies_list">
{% for policy in event.policies %}
<li class="event_feature_item_policies_item{% if policy.restricted %} event_feature_item_policies_item_restricted{% endif %}">
<span class="event_feature_item_policies_item_label">{{ policy.label }}</span>
<span>{{ icon(policy.icon) }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="alert_inner alert_inner_inline">
<div class="alert_header">
<h2 class="alert_title" id="alert_title" tabindex="-1">
<span class="alert_title_icon">{{ icon('info') }}</span>
<span class="alert_title_label">This is an event-specific alert</span>
</h2>
</div>
<div class="alert_body">
<div class="alert_description typography">
This event has been postponed from its original date of September 23, 2023. The new event date is Lorem 21, 2024.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.