<!-- 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: </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: </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: </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: </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: </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: </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: </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: </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: </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: </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: </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: </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 -->
{#
{% include '@partial-event-list' with {
items: [
{
image: '1',
date: {
from: {
begin: '2017-05-31 17:00:00',
end: '2017-05-31 19:00:00'
},
to: {
begin: '2017-06-13 17:00:00',
end: '2017-06-13 19:00:00'
}
},
title: 'Title',
url: '#',
description: 'Description',
location: 'Location',
categories: [
{
label: 'Category',
url: '#'
}
]
}
]
} %}
#}
<!-- 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="{{ page.title }}">
{% for item in items %}
<li class="event_list_row">
<div class="event_list_item">
<div class="event_list_item_time_wrapper">
<time class="event_list_item_time" datetime="{{ item.date.from.begin }}">
<span class="event_list_item_time_month">{{ item.date.from.begin|date('M') }}</span>
<span class="event_list_item_time_day">{{ item.date.from.begin|date('d') }}</span>
{% if not item.date.to %}
<span class="event_list_item_time_year">{{ item.date.from.begin|date('Y') }}</span>
{% endif %}
</time>
{% if item.date.to %}
<time class="event_list_item_time" datetime="{{ item.date.to.begin }}">
<span class="event_list_item_time_month">{{ item.date.to.begin|date('M') }}</span>
<span class="event_list_item_time_day">{{ item.date.to.begin|date('d') }}</span>
<span class="event_list_item_time_year">{{ item.date.to.begin|date('Y') }}</span>
</time>
{% endif %}
</div>
{% if item.image %}
<figure class="event_list_item_figure">
{% if item.url %}
<a class="event_list_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
{% endif %}
{% include '@partial-image' with {
class: 'event_list_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
{% if item.url %}
</a>
{% endif %}
</figure>
{% endif %}
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<h2 class="event_list_item_title">
{% if item.url %}
{% include '@partial-link' with {
class: 'event_list_item_title',
title: item.title,
url: item.url
} %}
{% else %}
{{ item.title }}
{% endif %}
</h2>
{% if item.categories %}
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_hint">Categories: </span>
<ul class="event_list_item_detail_list" aria-label="Categories">
{% for category in item.categories %}
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_link" href="{{ category.url }}">{{ category.label }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div class="event_list_item_body">
{% if item.description %}
<div class="event_list_item_description">
<p>{{ item.description }}</p>
</div>
{% endif %}
<div class="event_list_item_details">
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">{{ icon('clock') }}</span>
<span class="event_list_item_detail_hint">Time: </span>
<time class="event_list_item_detail_label" datetime="{{ item.date.from.begin }}">7:00 pm</time>
</div>
{% if item.location %}
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">{{ icon('place') }}</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">{{ item.location }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
{% include '@partial-pagination' with {
title: 'Events Pagination',
pages: 50
} %}
</div>
</div>
</div>
</div>
<!-- END: Event Item -->
No notes defined.