<div class="page_header">
    <div class="page_header_inner">
        <div class="page_intro">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="page_intro_inner">
                        <div class="page_intro_body">
                            <h1 class="page_title" id="page_title" tabindex="-1">Events at Methodist</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_header_sole">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="page_header_sole_inner">
                    <div class="page_header_watermark">

                        <svg class="icon icon_watermark">
                            <use href="/images/icons.svg#watermark" />
                        </svg>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">

    <!-- event Feature -->
    <div class="event_feature">
        <div class="event_feature_inner">
            <div class="event_feature_item">
                <figure class="event_feature_item_figure">
                    <a class="event_feature_item_figure_link" href="#" aria-label="Read more about MU Concert Band & Fayetteville Symphonic Band Concert" tabindex="-1">

                        <img class="event_feature_item_image" srcset="https://images.fastspot.com/methodist-university/740x494/1 740w, https://images.fastspot.com/methodist-university/500x334/1 500w, https://images.fastspot.com/methodist-university/300x200/1 300w" src="https://images.fastspot.com/methodist-university/300x200/1" alt="" loading="lazy" width="300" height="200">
                    </a>
                </figure>
                <div class="event_feature_item_wrapper">
                    <div class="event_feature_item_details">
                        <div class="event_feature_item_detail">
                            <span class="event_feature_item_detail_icon">
                                <svg class="icon icon_calendar">
                                    <use href="/images/icons.svg#calendar" />
                                </svg>
                            </span>
                            <time class="event_feature_item_detail_label" datetime="2019-01-01 17:00:00">Jan 1, 2019</time>
                        </div>
                        <div class="event_feature_item_detail">
                            <span class="event_feature_item_detail_icon">
                                <svg class="icon icon_time">
                                    <use href="/images/icons.svg#time" />
                                </svg>
                            </span>
                            <time class="event_feature_item_detail_label" datetime="2019-01-01 17:00:00">6:00pm</time>
                        </div>
                    </div>
                    <div class="event_feature_item_body">
                        <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">MU Concert Band & Fayetteville Symphonic Band Concert</span>
                                </span>
                            </a>
                        </h2>
                        <div class="event_feature_item_description">
                            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.</p>
                        </div>
                    </div>
                    <div class="event_feature_item_discovery">

                        <a href="#" class="event_feature_item_discovery_link">
                            <span class="event_feature_item_discovery_link_inner">
                                <span class="event_feature_item_discovery_link_label">Event Details</span>
                                <span class="event_feature_item_discovery_link_icon" aria-hidden="true">

                                    <svg class="icon icon_chevron_right">
                                        <use href="/images/icons.svg#chevron_right" />
                                    </svg>

                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: event Feature -->

    <!-- Filter -->
    <div class="filter">
        <div class="fs-row">
            <div class="fs-cell">
                <form class="filter_inner" action="#" method="get">
                    <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">
                            <div class="filter_search_submit">
                                <span class="filter_search_submit_icon">
                                    <svg class="icon icon_search">
                                        <use href="/images/icons.svg#search" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="filter_tools">
                        <div class="filter_tool">
                            <label class="filter_label" for="filter_tool_label_1">Categories</label>
                            <div class="filter_tool_select_wrapper">
                                <select class="filter_tool_select" id="filter_tool_label_1">
                                    <option value="All Categories">All Categories</option>
                                    <option value="Categories One">Categories One</option>
                                    <option value="Another Categories">Another Categories</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">
                            <button class="filter_tools_submit" type="submit">
                                <span class="filter_tools_submit_label">Submit</span>
                                <span class="filter_tools_submit_icon">
                                    <svg class="icon icon_chevron_right">
                                        <use href="/images/icons.svg#chevron_right" />
                                    </svg>
                                </span>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="filter_results">
                    <p class="filter_results_description">
                        <span class="filter_results_label">5 Results found for:</span>
                        <span class="filter_results_category">Category</span>
                    </p>

                    <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>
        </div>
    </div>
    <!-- END: Filter -->

    <!-- 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">
                                <div class="event_list_item_time_wrapper">
                                    <time class="event_list_item_time" datetime="2017-05-31 17:00:00">
                                        <span class="event_list_item_time_month">May</span>
                                        <span class="event_list_item_time_day">31</span>
                                    </time>
                                    <time class="event_list_item_time" datetime="2017-06-13 17:00:00">
                                        <span class="event_list_item_time_month">Jun</span>
                                        <span class="event_list_item_time_day">13</span>
                                        <span class="event_list_item_time_year">2017</span>
                                    </time>
                                </div>
                                <figure class="event_list_item_figure">
                                    <a class="event_list_item_figure_link" href="page-event-detail.html" aria-label="Read more about Friends of Music Guest Artist Series Presents Jeri-Mae Astolfi, Pianist" tabindex="-1">

                                        <img class="event_list_item_image" srcset="https://images.fastspot.com/methodist-university/740x494/1 740w, https://images.fastspot.com/methodist-university/500x334/1 500w, https://images.fastspot.com/methodist-university/300x200/1 300w" src="https://images.fastspot.com/methodist-university/300x200/1" alt="" loading="lazy" width="300" height="200">
                                    </a>
                                </figure>
                                <div class="event_list_item_wrapper">
                                    <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">Friends of Music Guest Artist Series Presents Jeri-Mae Astolfi, Pianist</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="event_list_item_detail event_list_item_detail_category">
                                            <span class="event_list_item_detail_hint">Categories:&nbsp;</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="#">Arts</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="event_list_item_body">
                                        <div class="event_list_item_description">
                                            <p>Attendance guidelines will be in accordance to University protocols at the time of the event and are subject to change at any time.</p>
                                        </div>
                                        <div class="event_list_item_details">
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_clock">
                                                        <use href="/images/icons.svg#clock" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Time:&nbsp;</span>
                                                <time class="event_list_item_detail_label" datetime="2017-05-31 17:00:00">7:00 pm</time>
                                            </div>
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_place">
                                                        <use href="/images/icons.svg#place" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Location:&nbsp;</span>
                                                <span class="event_list_item_detail_label">Matthews Chapel, Matthews Ministry Center</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="event_list_row">
                            <div class="event_list_item">
                                <div class="event_list_item_time_wrapper">
                                    <time class="event_list_item_time" datetime="2017-05-31 17:00:00">
                                        <span class="event_list_item_time_month">May</span>
                                        <span class="event_list_item_time_day">31</span>
                                        <span class="event_list_item_time_year">2017</span>
                                    </time>
                                </div>
                                <div class="event_list_item_wrapper">
                                    <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">All-Choirs Concert</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="event_list_item_detail event_list_item_detail_category">
                                            <span class="event_list_item_detail_hint">Categories:&nbsp;</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="#">Athletics</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="event_list_item_body">
                                        <div class="event_list_item_description">
                                            <p>Coming together lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in diam est. Vivamus tincidunt quam ut porttitor laoreet.</p>
                                        </div>
                                        <div class="event_list_item_details">
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_clock">
                                                        <use href="/images/icons.svg#clock" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Time:&nbsp;</span>
                                                <time class="event_list_item_detail_label" datetime="2017-05-31 17:00:00">7:00 pm</time>
                                            </div>
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_place">
                                                        <use href="/images/icons.svg#place" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Location:&nbsp;</span>
                                                <span class="event_list_item_detail_label">Huff Concert Hall</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="event_list_row">
                            <div class="event_list_item">
                                <div class="event_list_item_time_wrapper">
                                    <time class="event_list_item_time" datetime="2017-05-31 17:00:00">
                                        <span class="event_list_item_time_month">May</span>
                                        <span class="event_list_item_time_day">31</span>
                                        <span class="event_list_item_time_year">2017</span>
                                    </time>
                                </div>
                                <figure class="event_list_item_figure">
                                    <a class="event_list_item_figure_link" href="page-event-detail.html" aria-label="Read more about MU Chamber Strings Concert" tabindex="-1">

                                        <img class="event_list_item_image" srcset="https://images.fastspot.com/methodist-university/740x494/2 740w, https://images.fastspot.com/methodist-university/500x334/2 500w, https://images.fastspot.com/methodist-university/300x200/2 300w" src="https://images.fastspot.com/methodist-university/300x200/2" alt="" loading="lazy" width="300" height="200">
                                    </a>
                                </figure>
                                <div class="event_list_item_wrapper">
                                    <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">MU Chamber Strings Concert</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="event_list_item_detail event_list_item_detail_category">
                                            <span class="event_list_item_detail_hint">Categories:&nbsp;</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="#">Campus Life</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="event_list_item_body">
                                        <div class="event_list_item_description">
                                            <p>The Methodist University Chorale holds an annual Singing Valentine's fundraiser where the community can purchase the services of student vocalists. Students serenade the purchaser's special someone and the funds help raise money for the department. </p>
                                        </div>
                                        <div class="event_list_item_details">
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_clock">
                                                        <use href="/images/icons.svg#clock" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Time:&nbsp;</span>
                                                <time class="event_list_item_detail_label" datetime="2017-05-31 17:00:00">7:00 pm</time>
                                            </div>
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_place">
                                                        <use href="/images/icons.svg#place" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Location:&nbsp;</span>
                                                <span class="event_list_item_detail_label">Nimocks Fitness Center</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="event_list_row">
                            <div class="event_list_item">
                                <div class="event_list_item_time_wrapper">
                                    <time class="event_list_item_time" datetime="2017-06-13 17:00:00">
                                        <span class="event_list_item_time_month">Jun</span>
                                        <span class="event_list_item_time_day">13</span>
                                        <span class="event_list_item_time_year">2017</span>
                                    </time>
                                </div>
                                <figure class="event_list_item_figure">
                                    <a class="event_list_item_figure_link" href="page-event-detail.html" aria-label="Read more about Delight Women’s Ministry" tabindex="-1">

                                        <img class="event_list_item_image" srcset="https://images.fastspot.com/methodist-university/740x494/3 740w, https://images.fastspot.com/methodist-university/500x334/3 500w, https://images.fastspot.com/methodist-university/300x200/3 300w" src="https://images.fastspot.com/methodist-university/300x200/3" alt="" loading="lazy" width="300" height="200">
                                    </a>
                                </figure>
                                <div class="event_list_item_wrapper">
                                    <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">Delight Women’s Ministry</span>
                                                </span>
                                            </a>
                                        </h2>
                                        <div class="event_list_item_detail event_list_item_detail_category">
                                            <span class="event_list_item_detail_hint">Categories:&nbsp;</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="#">Service & Volunteer</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="event_list_item_body">
                                        <div class="event_list_item_description">
                                            <p>Coming together lorem ipsum dolor sit amet, consectetur.</p>
                                        </div>
                                        <div class="event_list_item_details">
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_clock">
                                                        <use href="/images/icons.svg#clock" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Time:&nbsp;</span>
                                                <time class="event_list_item_detail_label" datetime="2017-06-13 17:00:00">7:00 pm</time>
                                            </div>
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <svg class="icon icon_place">
                                                        <use href="/images/icons.svg#place" />
                                                    </svg>
                                                </span>
                                                <span class="event_list_item_detail_hint">Location:&nbsp;</span>
                                                <span class="event_list_item_detail_label">Huff Concert Hall</span>
                                            </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">
                                    <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">Go</button>
                            </div>
                        </form>
                    </div>
                    <!-- END: Pagination -->
                </div>
            </div>
        </div>
    </div>
    <!-- END: Event Item -->
</div>
{% include '@partial-page-header' with {
	page: page
} %}

<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
	{% render '@partial-event-feature' %}

	{% include '@partial-filter' with {
		label: '',
		active: 'search',
		action_category: '#',
		action_search: '#',
		tools: [
			{
				label: 'Categories',
				options: [
					{
						label: 'All Categories'
					},
					{
						label: 'Categories One'
					},
					{
						label: 'Another Categories'
					}
				]
			}
		],
		search_placeholder: 'Search by keyword',
		results: '',
		category: ''
	} %}

	{% render '@partial-event-list' %}
</div>

No notes defined.