<!-- Testimonial -->
<div class="events_listing theme_default">
<div class="fs-row">
<div class="fs-cell">
<div class="events_listing_inner">
<div class="events_listing_filter">
<button class="js-events-listing-filter-toggle js-swap events_listing_filter_toggle button_toggle" data-swap-target=".events_listing_filter" data-swap-linked="events_listing_filter">
<span class="events_listing_filter_toggle_inner_default events_listing_filter_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="events_listing_filter_toggle_label_default events_listing_filter_toggle_label button_toggle_label_default button_toggle_label">Filter Events</span>
<span class="events_listing_filter_toggle_icon_default events_listing_filter_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="events_listing_filter_toggle_inner_active events_listing_filter_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="events_listing_filter_toggle_label_active events_listing_filter_toggle_label button_toggle_label_active button_toggle_label">Close</span>
<span class="events_listing_filter_toggle_icon_active events_listing_filter_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</span>
</button>
<div class="events_listing_filter_container">
<!-- Filter -->
<div class="filter">
<div class="filter_inner">
<div class="filter_panels">
<form class="filter_tools" action="#" method="get">
<fieldset class="filter_fieldset">
<legend class="filter_legend">Programs</legend>
<div class="filter_options">
<div class="filter_option">
<input class="filter_option_input_field" checked type="radio" id="All" name="Programs">
<label class="filter_option_input_label" for="All">All</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="FIM Presents" name="Programs">
<label class="filter_option_input_label" for="FIM Presents">FIM Presents</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="Capitol Theatre" name="Programs">
<label class="filter_option_input_label" for="Capitol Theatre">Capitol Theatre</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="Whiting Auditorium" name="Programs">
<label class="filter_option_input_label" for="Whiting Auditorium">Whiting Auditorium</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="Flint Symphony Orchestra" name="Programs">
<label class="filter_option_input_label" for="Flint Symphony Orchestra">Flint Symphony Orchestra</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="Flint Repertory Theatre" name="Programs">
<label class="filter_option_input_label" for="Flint Repertory Theatre">Flint Repertory Theatre</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="Flint School of Performing Arts" name="Programs">
<label class="filter_option_input_label" for="Flint School of Performing Arts">Flint School of Performing Arts</label>
<span class="filter_option_input_indicator"></span>
</div>
</div>
</fieldset>
<fieldset class="filter_fieldset">
<legend class="filter_legend">Ticketed</legend>
<div class="filter_options">
<div class="filter_option">
<input class="filter_option_input_field" checked type="radio" id="All" name="Ticketed">
<label class="filter_option_input_label" for="All">All</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="Ticketed" name="Ticketed">
<label class="filter_option_input_label" for="Ticketed">Ticketed</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option">
<input class="filter_option_input_field" type="radio" id="Free to Attend" name="Ticketed">
<label class="filter_option_input_label" for="Free to Attend">Free to Attend</label>
<span class="filter_option_input_indicator"></span>
</div>
</div>
</fieldset>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_1">Event Type</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_1">
<option value="Season 22-23" selected>Season 22-23</option>
<option value="Category One">Category One</option>
<option value="Another Category">Another Category</option>
</select>
<span class="filter_tool_select_icon">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</div>
</div>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_2">Venues</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_2">
<option value="All Venues" selected>All Venues</option>
<option value="Bower Theatre">Bower Theatre</option>
<option value="Capitol Theatre">Capitol Theatre</option>
<option value="Elgood Theatre">Elgood Theatre</option>
<option value="MacArthur Recital Hall">MacArthur Recital Hall</option>
<option value="Whiting Auditorium">Whiting Auditorium</option>
</select>
<span class="filter_tool_select_icon">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</div>
</div>
<div class="filter_tool" action="#" method="get">
<label class="filter_label" for="filter_search_input">Search</label>
<div class="filter_tool_search_wrapper">
<input class="filter_tool_search_input" id="filter_tool_search_input" type="search" placeholder="Search by keyword">
<span class="filter_tool_search_icon">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</div>
</div>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_date">Date</label>
<div class="filter_tool_select_wrapper">
<span class="filter_tool_select_prepend_icon">
<svg class="icon icon_calendar">
<use href="/images/icons.svg#calendar" />
</svg>
</span>
<select class="filter_tool_select filter_tool_select_date" id="filter_tool_label_date">
<option value="Choose a month">Choose a month</option>
<option value="January">January</option>
<option value="February">February</option>
</select>
<span class="filter_tool_select_icon">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</div>
</div>
<button class="filter_tools_submit" type="submit">
<span class="filter_tools_submit_inner">
<span class="filter_tools_submit_label">Filter Events</span>
<span class="filter_tools_submit_icon">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</button>
</form>
</div>
</div>
</div>
<!-- END: Filter -->
</div>
</div>
<div class="events_listing_list">
<!-- Banner -->
<div class="banner">
<div class="banner_inner">
<h2 class="banner_title">Build a Package</h2>
<div class="banner_description">
<p>Package lorem up to 15% off ipsum dolor sit amet avec. Lorem ipsum dolor sit amet avec.</p>
</div>
<div class="banner_action">
<a href="#" class="banner_link" aria-label="Link Aria">
<span class="banner_link_inner">
<span class="banner_link_label">Build a Package</span>
</span>
</a>
</div>
</div>
<div class="banner_footer">
<p>Policies for attending such as lorem ipsum dolor sit amet avec. <a href>Read more about the Ticket Center policies</a>.</p>
</div>
</div>
<!-- END: Banner -->
<!-- Filter -->
<div class="filter_results">
<p class="filter_results_description">
<span class="filter_results_label">10 Results in</span>
<span class="filter_results_category">“Season 22-23”</span>
</p>
<div class="filter_results_action">
<a href="page-news-listing.html" class="filter_results_reset_link">
<span class="filter_results_reset_link_inner">
<span class="filter_results_reset_link_label">Reset</span>
<span class="filter_results_reset_link_icon" aria-hidden="true">
<svg class="icon icon_reset">
<use href="/images/icons.svg#reset" />
</svg>
</span>
</span>
</a>
</div>
</div>
<!-- END: Filter -->
<!-- Event List -->
<div class="event_list event_list_layout_compact">
<ul class="event_list_rows" id="item_list" aria-label="">
<li class="event_list_row">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/1" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/1" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/1" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_tickets">
<span class="event_list_item_tickets_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="event_list_item_tickets_label">Ticketed</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">FIM Presents</div>
<h2 class="event_list_item_title">
<a class="event_list_item_title_link" href="#">
Gazillion Bubble Show
</a>
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-05-31 17:00:00">
<span class="event_list_item_date_start">May 31</span>
<span class="event_list_item_date_end"> - Jun 13</span>
</time>
<span class="event_list_item_time">
<span> • </span>
<span class="event_list_item_time_start">5:00 PM</span>
<span class="event_list_item_time_start"> - 7:00 PM</span>
</span>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
<li class="event_list_item_category">
<a class="event_list_item_category_link" href="#">Category One</a>
</li>
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Whiting Auditorium</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/4" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/4" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/4" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/4" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_tickets">
<span class="event_list_item_tickets_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="event_list_item_tickets_label">Ticketed</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">Flint Repertory Theatre</div>
<h2 class="event_list_item_title">
<a class="event_list_item_title_link" href="#">
Death of a Salesman
</a>
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-05-31 17:00:00">
<span class="event_list_item_date_start">May 31</span>
</time>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
<li class="event_list_item_category">
<a class="event_list_item_category_link" href="#">Season 22-23</a>
</li>
<li class="event_list_item_category">
<a class="event_list_item_category_link" href="#">Category One</a>
</li>
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Elgood Theatre</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/2" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/2" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/2" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/2" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_registration">
<span class="event_list_item_registration_hint">Free to Attend</span>
<span class="event_list_item_registration_label">Registration is required</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">Capitol Theatre</div>
<h2 class="event_list_item_title">
<a class="event_list_item_title_link" href="#">
Blues Fest
</a>
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-05-31 17:00:00">
<span class="event_list_item_date_start">May 31</span>
<span class="event_list_item_date_end"> - Jun 13</span>
</time>
<span class="event_list_item_time">
<span> • </span>
<span class="event_list_item_time_start">5:00 PM</span>
<span class="event_list_item_time_start"> - 7:00 PM</span>
</span>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
<li class="event_list_item_category">
<a class="event_list_item_category_link" href="#">Category One</a>
</li>
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Capitol Theatre</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/3" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/3" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/3" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/3" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_tickets">
<span class="event_list_item_tickets_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="event_list_item_tickets_label">Ticketed</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">Whiting Auditorium</div>
<h2 class="event_list_item_title">
<a class="event_list_item_title_link" href="#">
BCO Tribute to Ella Fitzgerald
</a>
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-06-13 17:00:00">
<span class="event_list_item_date_start">Jun 13</span>
</time>
<span class="event_list_item_time">
<span> • </span>
<span class="event_list_item_time_start">5:00 PM</span>
<span class="event_list_item_time_start"> - 7:00 PM</span>
</span>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
<li class="event_list_item_category">
<a class="event_list_item_category_link" href="#">Category One</a>
</li>
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Whiting Auditorium</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="event_list_pagination">
<!-- Pagination -->
<div class="pagination">
<nav class="pagination_nav" aria-label="Events Pagination">
<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
<span class="pagination_arrow_icon">
<svg class="icon icon_arrow_left">
<use href="/images/icons.svg#arrow_left" />
</svg>
</span>
<span class="pagination_arrow_label">Previous Page</span>
</a>
<a class="pagination_arrow pagination_arrow_right" href="#">
<span class="pagination_arrow_label">Next Page</span>
<span class="pagination_arrow_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</nav>
<form class="pagination_form" action="#" method="get">
<div class="pagination_form_inner">
<label class="pagination_form_label" for="pagination_form_select">Page</label>
<div class="pagination_form_select_wrapper">
<select class="pagination_form_select" name="page" id="pagination_form_select" aria-label="Select Page Number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
</select>
<span class="pagination_form_select_icon">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</div>
<span class="pagination_form_suffix">of 50</span>
<button class="pagination_form_button" type="submit" aria-label="View Page">
<span class="pagination_form_button_inner">
<span class="pagination_form_button_label">Go</span>
<span class="pagination_form_button_icon">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</button>
</div>
</form>
</div>
<!-- END: Pagination -->
</div>
</div>
<!-- END: Event Item -->
</div>
</div>
</div>
</div>
</div>
<!-- END: Testimonial -->
{#
{% include '@component-testimonial' with {
quote: '"Quote"',
name: 'Name',
job_title: 'Job Title',
image: '1'
} %}
#}
<!-- Testimonial -->
<div class="events_listing{% if theme %} theme_{{ theme }}{% endif %}">
<div class="fs-row">
<div class="fs-cell">
<div class="events_listing_inner">
<div class="events_listing_filter">
{% include '@partial-button-toggle' with {
class: 'events_listing_filter',
js: true,
title: 'Filter Events',
icon: 'chevron_down',
active_title: 'Close',
active_icon: 'close',
swap_target: '.events_listing_filter',
swap_link: 'events_listing_filter'
} %}
<div class="events_listing_filter_container">
{% render '@partial-filter--events' %}
</div>
</div>
<div class="events_listing_list">
{% render '@component-banner' %}
{% if not noResults %}
{% render '@partial-filter-results' %}
{% endif %}
{% render '@partial-event-list' with {
layout: 'compact',
noResults: noResults,
items: [
{
image: '1',
date: {
same_day: false,
all_day: false,
from: '2023-05-31 17:00:00',
to: '2023-06-13 19:00:00'
},
categories: [
{
label: 'Category One',
url: '#',
}
],
title: 'Gazillion Bubble Show',
url: 'page-event-detail.html',
location: 'Whiting Auditorium',
program: 'FIM Presents',
tickets: true,
},
{
image: '4',
date: {
same_day: true,
all_day: true,
from: '2023-05-31 17:00:00',
to: ''
},
categories: [
{
label: 'Season 22-23',
url: '#',
},
{
label: 'Category One',
url: '#',
}
],
title: 'Death of a Salesman',
url: 'page-event-detail.html',
location: 'Elgood Theatre',
program: 'Flint Repertory Theatre',
tickets: true,
},
{
image: '2',
date: {
same_day: false,
all_day: false,
from: '2023-05-31 17:00:00',
to: '2023-06-13 19:00:00'
},
categories: [
{
label: 'Category One',
url: '#',
}
],
title: 'Blues Fest',
url: 'page-event-detail.html',
location: 'Capitol Theatre',
program: 'Capitol Theatre',
registration: true,
},
{
image: '3',
date: {
same_day: true,
all_day: false,
from: '2023-06-13 17:00:00',
to: '2023-06-13 19:00:00'
},
categories: [
{
label: 'Category One',
url: '#',
}
],
title: 'BCO Tribute to Ella Fitzgerald',
url: 'page-event-detail.html',
location: 'Whiting Auditorium',
program: 'Whiting Auditorium',
tickets: true,
}
],
pagination: true,
} %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Testimonial -->
No notes defined.