<div class="page_header_wrapper ">
<div class="page_header">
<div class="page_header_content">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_content_inner">
<div class="page_header_breadcrumb">
<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_icon" aria-hidden="true">
<i class="fa-regular fa-regular fa-house"></i>
</span>
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"></span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Navigation Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"></span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Parent Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"></span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label"></span>
</span>
</span>
</li>
</ol>
</nav>
</div>
</div>
<div class="page_header_intro">
<h1 class="page_header_title" id="page_title" tabindex="-1">Events at Merced College</h1>
</div>
<a class="page_header_link" href="#">Submit an Event</a>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_sole">
<div class="page_header_teaser">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_teaser_inner">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
<!-- Filter -->
<div class="filter filter_dark">
<div class="filter_hat">
<div class="fs-row">
<div class="fs-cell">
<div class="filter_hat_inner">
<form class="filter_tools" action="#" method="get">
<div class="filter_tool">
<div class="filter_search">
<label class="filter_label" for="filter_search_input">Search</label>
<div class="filter_search_form">
<input class="filter_search_input" id="filter_search_input" type="search" placeholder="Search by keyword">
<span class="filter_search_icon">
<i class="fa-regular fa-magnifying-glass"></i>
</span>
</div>
</div>
</div>
<div class="filter_tool filter_tool_date">
<label class="filter_label" for="filter_tool_label_1">By Date</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_1">
<option value="Select a Month">Select a Month</option>
<option value="January">January</option>
<option value="February">February</option>
</select>
<span class="filter_tool_select_icon filter_tool_select_icon_date">
<i class="fa-regular fa-calendar"></i>
</span>
<span class="filter_tool_select_icon">
<i class="fa-regular fa-chevron-down"></i>
</span>
</div>
</div>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_2">Categories</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_2">
<option value="All Categories">All Categories</option>
<option value="Category One">Category One</option>
<option value="Another Category">Another Category</option>
</select>
<span class="filter_tool_select_icon">
<i class="fa-regular fa-chevron-down"></i>
</span>
</div>
</div>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_3">Campus Locations</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_3">
<option value="Planet Earth">Planet Earth</option>
<option value="Star Pluto">Star Pluto</option>
<option value="Asteroid Jupiter">Asteroid Jupiter</option>
</select>
<span class="filter_tool_select_icon">
<i class="fa-regular fa-chevron-down"></i>
</span>
</div>
</div>
<div class="filter_tool">
<button class="filter_tools_submit" type="submit">
<span class="filter_tools_submit_inner">
<span class="filter_tools_submit_label">Submit</span>
<span class="filter_tools_submit_icon">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- END: Filter -->
<!-- Event Feature -->
<div class="event_feature">
<div class="fs-row">
<div class="fs-cell">
<div class="event_feature_inner">
<ul class="event_feature_list event_feature_list_2">
<li class="event_feature_row">
<div class="event_feature_item">
<figure class="event_feature_item_figure">
<a class="event_feature_item_figure_link" href="#" aria-label="Read more about Merced College Concert Band" tabindex="-1">
<img class="event_feature_item_image" srcset="https://images.fastspot.com/merced/980x654/1 980w, https://images.fastspot.com/merced/740x494/1 740w, https://images.fastspot.com/merced/500x334/1 500w, https://images.fastspot.com/merced/300x200/1 300w" src="https://images.fastspot.com/merced/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="event_feature_item_wrapper">
<div class="event_feature_item_inner">
<div class="event_feature_item_header">
<div class="event_feature_item_time_wrapper">
<span class="event_feature_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_feature_item_time event_feature_item_time_sm" datetime="2017-05-31 17:00:00">
May 31
- Jun 13
</time>
<time class="event_feature_item_time event_feature_item_time_lg" datetime="2017-05-31 17:00:00">
May 31
- June 13
</time>
</div>
<h2 class="event_feature_item_title">
<a href="#" class="event_feature_item_title_link">
<span class="event_feature_item_title_link_inner">
<span class="event_feature_item_title_link_label">Merced College Concert Band</span>
</span>
</a>
</h2>
</div>
<div class="event_feature_item_body">
<div class="event_feature_item_description">
<p>Come and enjoy the Merced College Concert Band perform live at the Merced College Theater! Directed by Professor Sandra Stocking.</p>
</div>
<div class="event_feature_item_details">
<div class="event_feature_item_detail">
<span class="event_feature_item_detail_icon">
<i class="fa-regular fa-school"></i>
</span>
<span class="event_feature_item_detail_hint">Campus: </span>
<span class="event_feature_item_detail_label">Merced College</span>
</div>
<div class="event_feature_item_detail">
<span class="event_feature_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</span>
<span class="event_feature_item_detail_hint">Location: </span>
<span class="event_feature_item_detail_label">Location</span>
</div>
<div class="event_feature_item_detail event_feature_item_detail_category">
<span class="event_feature_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_feature_item_detail_hint">Categories: </span>
<ul class="event_feature_item_detail_list" aria-label="Categories">
<li class="event_feature_item_detail_item">
<a class="event_feature_item_detail_link" href="#">Fine Arts & Performing</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_feature_row">
<div class="event_feature_item">
<figure class="event_feature_item_figure">
<a class="event_feature_item_figure_link" href="#" aria-label="Read more about Merced College Concert Band" tabindex="-1">
<img class="event_feature_item_image" srcset="https://images.fastspot.com/merced/980x654/2 980w, https://images.fastspot.com/merced/740x494/2 740w, https://images.fastspot.com/merced/500x334/2 500w, https://images.fastspot.com/merced/300x200/2 300w" src="https://images.fastspot.com/merced/300x200/2" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="event_feature_item_wrapper">
<div class="event_feature_item_inner">
<div class="event_feature_item_header">
<div class="event_feature_item_time_wrapper">
<span class="event_feature_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_feature_item_time event_feature_item_time_sm" datetime="2017-05-31 17:00:00">
May 31
- Jun 13
</time>
<time class="event_feature_item_time event_feature_item_time_lg" datetime="2017-05-31 17:00:00">
May 31
- June 13
</time>
</div>
<h2 class="event_feature_item_title">
<a href="#" class="event_feature_item_title_link">
<span class="event_feature_item_title_link_inner">
<span class="event_feature_item_title_link_label">Merced College Concert Band</span>
</span>
</a>
</h2>
</div>
<div class="event_feature_item_body">
<div class="event_feature_item_description">
<p>Come and enjoy the Merced College Concert Band perform live at the Merced College Theater! Directed by Professor Sandra Stocking.</p>
</div>
<div class="event_feature_item_details">
<div class="event_feature_item_detail">
<span class="event_feature_item_detail_icon">
<i class="fa-regular fa-school"></i>
</span>
<span class="event_feature_item_detail_hint">Campus: </span>
<span class="event_feature_item_detail_label">Merced College</span>
</div>
<div class="event_feature_item_detail">
<span class="event_feature_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</span>
<span class="event_feature_item_detail_hint">Location: </span>
<span class="event_feature_item_detail_label">Location</span>
</div>
<div class="event_feature_item_detail event_feature_item_detail_category">
<span class="event_feature_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_feature_item_detail_hint">Categories: </span>
<ul class="event_feature_item_detail_list" aria-label="Categories">
<li class="event_feature_item_detail_item">
<a class="event_feature_item_detail_link" href="#">Fine Arts & Performing</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Event Feature -->
<!-- Event List -->
<div class="event_list">
<div class="fs-row">
<div class="fs-cell">
<div class="event_list_inner">
<ul class="event_list_rows" id="item_list" aria-label="">
<li class="event_list_row">
<div class="event_list_item_time_wrapper">
<span class="event_list_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_list_item_time event_list_item_time_sm" datetime="2017-05-31 17:00:00">
May 31
- Jun 13
</time>
<time class="event_list_item_time event_list_item_time_lg" datetime="2017-05-31 17:00:00">
May 31
- June 13
</time>
</div>
<div class="event_list_item">
<figure class="event_list_item_figure">
<a class="event_list_item_figure_link" href="page-event-detail.html" aria-label="Read more about Phasellus viverra nulla ut metus varius laoreet" tabindex="-1">
<img class="event_list_item_image" srcset="https://images.fastspot.com/merced/980x735/1 980w, https://images.fastspot.com/merced/740x555/1 740w, https://images.fastspot.com/merced/500x375/1 500w, https://images.fastspot.com/merced/300x225/1 300w" src="https://images.fastspot.com/merced/300x225/1" alt="" loading="lazy" width="300" height="225">
</a>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_inner">
<div class="event_list_item_header">
<h2 class="event_list_item_title">
<a href="page-event-detail.html" class="event_list_item_title_link">
<span class="event_list_item_title_link_inner">
<span class="event_list_item_title_link_label">Phasellus viverra nulla ut metus varius laoreet</span>
</span>
</a>
</h2>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
</div>
<div class="event_list_item_details">
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-school"></i>
</span>
<span class="event_list_item_detail_hint">Campus: </span>
<span class="event_list_item_detail_label">Merced Campus</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Slowblotch, 2980 Long Name of Road Rd. Circleless, MD 21218</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_list_item_detail_hint">Categories: </span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category One</a>,
</li>
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category Two</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item_time_wrapper">
<span class="event_list_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_list_item_time event_list_item_time_sm" datetime="2017-05-31 17:00:00">
May 31
</time>
<time class="event_list_item_time event_list_item_time_lg" datetime="2017-05-31 17:00:00">
May 31
</time>
</div>
<div class="event_list_item">
<div class="event_list_item_wrapper">
<div class="event_list_item_inner">
<div class="event_list_item_header">
<h2 class="event_list_item_title">
<a href="page-event-detail.html" class="event_list_item_title_link">
<span class="event_list_item_title_link_inner">
<span class="event_list_item_title_link_label">Aenean commodo ligula eget dolor</span>
</span>
</a>
</h2>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
</div>
<div class="event_list_item_details">
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Location</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-clock"></i>
</span>
<span class="event_list_item_detail_hint">Time: </span>
<span class="event_list_item_detail_label">
5:00 PM
</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_list_item_detail_hint">Categories: </span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category One</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item_time_wrapper">
<span class="event_list_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_list_item_time event_list_item_time_sm" datetime="2017-05-31 17:00:00">
May 31
- Jun 13
</time>
<time class="event_list_item_time event_list_item_time_lg" datetime="2017-05-31 17:00:00">
May 31
- June 13
</time>
</div>
<div class="event_list_item">
<figure class="event_list_item_figure">
<a class="event_list_item_figure_link" href="page-event-detail.html" aria-label="Read more about In enim justo" tabindex="-1">
<img class="event_list_item_image" srcset="https://images.fastspot.com/merced/980x735/2 980w, https://images.fastspot.com/merced/740x555/2 740w, https://images.fastspot.com/merced/500x375/2 500w, https://images.fastspot.com/merced/300x225/2 300w" src="https://images.fastspot.com/merced/300x225/2" alt="" loading="lazy" width="300" height="225">
</a>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_inner">
<div class="event_list_item_header">
<h2 class="event_list_item_title">
<a href="page-event-detail.html" class="event_list_item_title_link">
<span class="event_list_item_title_link_inner">
<span class="event_list_item_title_link_label">In enim justo</span>
</span>
</a>
</h2>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Location</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_list_item_detail_hint">Categories: </span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category Two</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item_time_wrapper">
<span class="event_list_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_list_item_time event_list_item_time_sm" datetime="2017-06-13 17:00:00">
Jun 13
</time>
<time class="event_list_item_time event_list_item_time_lg" datetime="2017-06-13 17:00:00">
June 13
</time>
</div>
<div class="event_list_item">
<figure class="event_list_item_figure">
<a class="event_list_item_figure_link" href="page-event-detail.html" aria-label="Read more about Maecenas nec odio et ante tincidunt tempus phasellus viverra nulla ut metus varius laoreet consectetuer adipiscing elit" tabindex="-1">
<img class="event_list_item_image" srcset="https://images.fastspot.com/merced/980x735/3 980w, https://images.fastspot.com/merced/740x555/3 740w, https://images.fastspot.com/merced/500x375/3 500w, https://images.fastspot.com/merced/300x225/3 300w" src="https://images.fastspot.com/merced/300x225/3" alt="" loading="lazy" width="300" height="225">
</a>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_inner">
<div class="event_list_item_header">
<h2 class="event_list_item_title">
<a href="page-event-detail.html" class="event_list_item_title_link">
<span class="event_list_item_title_link_inner">
<span class="event_list_item_title_link_label">Maecenas nec odio et ante tincidunt tempus phasellus viverra nulla ut metus varius laoreet consectetuer adipiscing elit</span>
</span>
</a>
</h2>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
</div>
<div class="event_list_item_details">
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Location</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-clock"></i>
</span>
<span class="event_list_item_detail_hint">Time: </span>
<span class="event_list_item_detail_label">
5:00 PM
</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_list_item_detail_hint">Categories: </span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category One</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item_time_wrapper">
<span class="event_list_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_list_item_time event_list_item_time_sm" datetime="2017-06-22 17:00:00">
Jun 22
</time>
<time class="event_list_item_time event_list_item_time_lg" datetime="2017-06-22 17:00:00">
June 22
</time>
</div>
<div class="event_list_item">
<div class="event_list_item_wrapper">
<div class="event_list_item_inner">
<div class="event_list_item_header">
<h2 class="event_list_item_title">
<a href="page-event-detail.html" class="event_list_item_title_link">
<span class="event_list_item_title_link_inner">
<span class="event_list_item_title_link_label">Aenean massa</span>
</span>
</a>
</h2>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
</div>
<div class="event_list_item_details">
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-clock"></i>
</span>
<span class="event_list_item_detail_hint">Time: </span>
<span class="event_list_item_detail_label">
5:00 PM
</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_list_item_detail_hint">Categories: </span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category Three</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item_time_wrapper">
<span class="event_list_item_time_icon">
<i class="fa-regular fa-calendar"></i>
</span>
<time class="event_list_item_time event_list_item_time_sm" datetime="2017-06-23 17:00:00">
Jun 23
</time>
<time class="event_list_item_time event_list_item_time_lg" datetime="2017-06-23 17:00:00">
June 23
</time>
</div>
<div class="event_list_item">
<figure class="event_list_item_figure">
<a class="event_list_item_figure_link" href="page-event-detail.html" aria-label="Read more about Cras ultricies mi eu turpis" tabindex="-1">
<img class="event_list_item_image" srcset="https://images.fastspot.com/merced/980x735/4 980w, https://images.fastspot.com/merced/740x555/4 740w, https://images.fastspot.com/merced/500x375/4 500w, https://images.fastspot.com/merced/300x225/4 300w" src="https://images.fastspot.com/merced/300x225/4" alt="" loading="lazy" width="300" height="225">
</a>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_inner">
<div class="event_list_item_header">
<h2 class="event_list_item_title">
<a href="page-event-detail.html" class="event_list_item_title_link">
<span class="event_list_item_title_link_inner">
<span class="event_list_item_title_link_label">Cras ultricies mi eu turpis</span>
</span>
</a>
</h2>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description">
<p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<div class="event_list_item_details">
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-location-dot"></i>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Location</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-clock"></i>
</span>
<span class="event_list_item_detail_hint">Time: </span>
<span class="event_list_item_detail_label">
5:00 PM
</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_icon">
<i class="fa-regular fa-tags"></i>
</span>
<span class="event_list_item_detail_hint">Categories: </span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category One</a>,
</li>
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category Two</a>,
</li>
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="#">Category Three</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- 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">
<i class="fa-regular fa-chevron-left"></i>
</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">
<i class="fa-regular fa-chevron-right"></i>
</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">
<i class="fa-regular fa-chevron-down"></i>
</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_icon">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
<span class="pagination_form_button_label">Go</span>
</button>
</div>
</form>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
<!-- END: Event Item -->
</div>
{% include '@component-page-header' with {
page: page
} %}
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
{% include '@component-filter' with {
theme: 'dark',
label: '',
active: 'search',
action_category: '#',
action_search: '#',
tools: [
{
label: 'By Date',
options: [
{
label: 'Select a Month'
},
{
label: 'January'
},
{
label: 'February'
}
]
},
{
label: 'Categories',
options: [
{
label: 'All Categories'
},
{
label: 'Category One'
},
{
label: 'Another Category'
}
]
},
{
label: 'Campus Locations',
options: [
{
label: 'Planet Earth'
},
{
label: 'Star Pluto'
},
{
label: 'Asteroid Jupiter'
}
]
}
],
search_placeholder: 'Search by keyword',
results: '',
category: ''
} %}
{% render '@component-event-feature--two' %}
{% render '@component-event-list' %}
</div>
No notes defined.