<div class="
page-header
" id="page-header">
<div class="page-header__inner">
<div class="page-header__group">
<div class="page-header__breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page-header__breadcrumb-inner">
<div class="
breadcrumb
" id="breadcrumb-7">
<nav class="breadcrumb__nav" aria-labelledby="breadcrumb-7__nav-title">
<div class="breadcrumb__nav-header">
<h2 class="breadcrumb__nav-title" id="breadcrumb-7__nav-title">
You are here:
</h2>
</div>
<ol class="breadcrumb__list" aria-labelledby="breadcrumb-7__nav-title">
<li class="breadcrumb__item breadcrumb__item--home">
<a class="breadcrumb__pill breadcrumb__pill--link" href="#">
<span class="breadcrumb__pill-inner">
<span class="breadcrumb__pill-icon" aria-hidden="true">
<svg class="icon icon--home">
<use href="/images/icons.svg?1.0.0#home" />
</svg>
</span>
<span class="breadcrumb__pill-label">
Home
</span>
</span>
</a>
<span class="breadcrumb__divider" aria-hidden="true">
<svg class="icon icon--angle-right">
<use href="/images/icons.svg?1.0.0#angle-right" />
</svg>
</span>
</li>
<li class="breadcrumb__item" aria-current="page">
<span class="breadcrumb__pill">
<span class="breadcrumb__pill-inner">
<span class="breadcrumb__pill-label">Event Listing</span>
</span>
</span>
<span class="breadcrumb__end" aria-hidden="true">
<svg class="icon icon--angle-down">
<use href="/images/icons.svg?1.0.0#angle-down" />
</svg>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page-header__intro">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page-header__intro-inner">
<h1 class="page-header__title" id="page-header__title" tabindex="-1">Event Listing</h1>
<p class="page-header__description">
Dis facilisis tellus ultricies vestibulum cubilia risus, blandit commodo hac ut posuere ex cursus, class libero imperdiet nullam odio.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="full-width-components" id="full-width-components" tabindex="-1" aria-labelledby="page-header__title">
<!-- Event Feature -->
<section class="event-feature" id="event-feature-1" aria-labelledby="event-feature-1__item-title" aria-describedby="event-feature-1__item-description">
<div class="fs-row">
<div class="fs-cell">
<div class="event-feature__inner">
<article class="event-feature__item" aria-labelledby="event-feature-1__item-title">
<figure class="event-feature__item-figure">
<a class="event-feature__item-figure-link" href="#" aria-labelledby="event-feature-1__item-title" tabindex="-1">
<img class="event-feature__item-image" srcset="https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="event-feature__item-wrapper">
<div class="event-feature__item-header">
<h2 class="event-feature__item-title" id="event-feature-1__item-title">
<a class="event-feature__item-title-link
" href="#">
<span class="event-feature__item-title-link-inner"> <span class="event-feature__item-title-link-label">Featured Event</span>
</span>
</a>
</h2>
<div class="event-feature__item-time-wrapper">
<time class="event-feature__item-time" datetime="2023-05-31 17:00:00">
May 31
- Jun 02
</time>
</div>
</div>
<div class="event-feature__item-body">
<div class="event-feature__item-description" id="event-feature-1__item-description">
<p>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-feature__item-details">
<div class="event-feature__item-detail">
<span class="event-feature__item-detail-icon" aria-hidden="true">
<svg class="icon icon--clock">
<use href="/images/icons.svg?1.0.0#clock" />
</svg>
</span>
<span class="event-feature__item-detail-hint">
Time:
</span>
<span class="event-feature__item-detail-label">
5:00 PM - 7:00 PM
</span>
</div>
<div class="event-feature__item-detail">
<span class="event-feature__item-detail-icon" aria-hidden="true">
<svg class="icon icon--place">
<use href="/images/icons.svg?1.0.0#place" />
</svg>
</span>
<span class="event-feature__item-detail-hint">
Location:
</span>
<span class="event-feature__item-detail-label">Maecenas tempus</span>
</div>
<div class="event-feature__item-detail event-feature__item-detail--category">
<span class="event-feature__item-detail-icon" aria-hidden="true">
<svg class="icon icon--label">
<use href="/images/icons.svg?1.0.0#label" />
</svg>
</span>
<span class="event-feature__item-detail-hint" id="event-feature-1__item-detail-hint-category">
Categories:
</span>
<ul class="event-feature__item-detail-list" aria-labelledby="event-feature-1__item-detail-hint-category">
<li class="event-feature__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Nunc nonummy metus</span>
</span>
</a>
</li>
<li class="event-feature__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Vestibulum</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- END: Event Feature -->
<!-- Filter -->
<div class="filter" id="filter-2">
<div class="fs-row">
<div class="fs-cell">
<div class="filter__inner">
<form class="filter__form" action="#" method="get">
<div class="filter__form-item filter__form-item--select">
<label class="filter__form-item-label" for="filter__form-item-select-1">Category</label>
<div class="filter__form-item-select-wrapper">
<select class="filter__form-item-select" id="filter__form-item-select-1">
<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__form-item-select-icon" aria-hidden="true">
<svg class="icon icon--expand">
<use href="/images/icons.svg?1.0.0#expand" />
</svg>
</span>
</div>
</div>
<div class="filter__form-item filter__form-item--select">
<label class="filter__form-item-label" for="filter__form-item-select-2">Type</label>
<div class="filter__form-item-select-wrapper">
<select class="filter__form-item-select" id="filter__form-item-select-2">
<option value="All Types">All Types</option>
<option value="Type One">Type One</option>
<option value="Another Type">Another Type</option>
</select>
<span class="filter__form-item-select-icon" aria-hidden="true">
<svg class="icon icon--expand">
<use href="/images/icons.svg?1.0.0#expand" />
</svg>
</span>
</div>
</div>
<div class="filter__form-item filter__form-item--search">
<label class="filter__form-item-label" for="filter__form-item-search-input">
Search
</label>
<div class="filter__form-item-search-wrapper">
<input class="filter__form-item-search-input" id="filter__form-item-search-input" placeholder="Search by keyword" type="search">
</div>
</div>
<div class="filter__form-item filter__form-item--action">
<div class="filter__form-item-submit">
<button class="button-filled
button-filled--large
" type="submit">
<span class="button-filled__inner"> <span class="button-filled__label">Submit</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END: Filter -->
<!-- Event List -->
<div class="event-list" id="event-list-1">
<div class="fs-row">
<div class="fs-cell">
<div class="event-list__inner">
<div class="event-list__rows" id="event-list-1__rows">
<div class="event-list__row">
<article class="event-list__item" id="event-list-1__item-1" aria-labelledby="event-list-1__item-1-title">
<figure class="event-list__item-figure">
<a class="event-list__item-figure-link" href="#" aria-labelledby="event-list-1__item-1-title" tabindex="-1">
<img class="event-list__item-image" srcset="https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/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" id="event-list-1__item-1-title">
<a class="event-list__item-title-link
" href="#">
<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 class="event-list__item-time-wrapper">
<time class="event-list__item-time" datetime="2023-05-31 10:00:00">
May 31
- Jun 13
</time>
</div>
</div>
<div class="event-list__item-body">
<div class="event-list__item-description">
<p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.</p>
</div>
<div class="event-list__item-details">
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--clock">
<use href="/images/icons.svg?1.0.0#clock" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Time:
</span>
<span class="event-list__item-detail-label">
10:00 AM - 11:00 AM
</span>
</div>
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--place">
<use href="/images/icons.svg?1.0.0#place" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Location:
</span>
<span class="event-list__item-detail-label">
Fastspot, 2980 Long Name of Road Rd. Baltimore, MD 21218
</span>
</div>
<div class="event-list__item-detail event-list__item-detail--category">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--label">
<use href="/images/icons.svg?1.0.0#label" />
</svg>
</span>
<span class="event-list__item-detail-hint" id="event-list-1__item-1-detail-hint-category">
Categories:
</span>
<ul class="event-list__item-detail-list" aria-labelledby="event-list-1__item-1-title event-list-1__item-1-detail-hint-category">
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Category One</span>
</span>
</a>
</li>
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Category Two</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="event-list__row">
<article class="event-list__item" id="event-list-1__item-2" aria-labelledby="event-list-1__item-2-title">
<div class="event-list__item-wrapper">
<div class="event-list__item-header">
<h2 class="event-list__item-title" id="event-list-1__item-2-title">
<a class="event-list__item-title-link
" href="#">
<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 class="event-list__item-time-wrapper">
<time class="event-list__item-time" datetime="2023-05-31 17:00:00">
May 31
</time>
</div>
</div>
<div class="event-list__item-body">
<div class="event-list__item-description">
<p>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.</p>
</div>
<div class="event-list__item-details">
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--place">
<use href="/images/icons.svg?1.0.0#place" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Location:
</span>
<span class="event-list__item-detail-label">
Phasellus dolor<br>Maecenas vestibulum<br>Mollis
</span>
</div>
<div class="event-list__item-detail event-list__item-detail--category">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--label">
<use href="/images/icons.svg?1.0.0#label" />
</svg>
</span>
<span class="event-list__item-detail-hint" id="event-list-1__item-2-detail-hint-category">
Categories:
</span>
<ul class="event-list__item-detail-list" aria-labelledby="event-list-1__item-2-title event-list-1__item-2-detail-hint-category">
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Cras dapibus</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="event-list__row">
<article class="event-list__item" id="event-list-1__item-3" aria-labelledby="event-list-1__item-3-title">
<figure class="event-list__item-figure">
<a class="event-list__item-figure-link" href="#" aria-labelledby="event-list-1__item-3-title" tabindex="-1">
<img class="event-list__item-image" srcset="https://images.fastspot.com/framework/980x654/2 980w, https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/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" id="event-list-1__item-3-title">
<a class="event-list__item-title-link
" href="#">
<span class="event-list__item-title-link-inner"> <span class="event-list__item-title-link-label">In enim justo</span>
</span>
</a>
</h2>
<div class="event-list__item-time-wrapper">
<time class="event-list__item-time" datetime="2023-05-31 08:00:00">
May 31
- Jun 13
</time>
</div>
</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" aria-hidden="true">
<svg class="icon icon--clock">
<use href="/images/icons.svg?1.0.0#clock" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Time:
</span>
<span class="event-list__item-detail-label">
8:00 AM - 2:00 PM
</span>
</div>
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--place">
<use href="/images/icons.svg?1.0.0#place" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Location:
</span>
<span class="event-list__item-detail-label">
Aenean ut eros et nisl sagittis
</span>
</div>
<div class="event-list__item-detail event-list__item-detail--category">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--label">
<use href="/images/icons.svg?1.0.0#label" />
</svg>
</span>
<span class="event-list__item-detail-hint" id="event-list-1__item-3-detail-hint-category">
Categories:
</span>
<ul class="event-list__item-detail-list" aria-labelledby="event-list-1__item-3-title event-list-1__item-3-detail-hint-category">
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Curae</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="event-list__row">
<article class="event-list__item" id="event-list-1__item-4" aria-labelledby="event-list-1__item-4-title">
<figure class="event-list__item-figure">
<a class="event-list__item-figure-link" href="#" aria-labelledby="event-list-1__item-4-title" tabindex="-1">
<img class="event-list__item-image" srcset="https://images.fastspot.com/framework/980x654/3 980w, https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/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" id="event-list-1__item-4-title">
<a class="event-list__item-title-link
" href="#">
<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 class="event-list__item-time-wrapper">
<time class="event-list__item-time" datetime="2023-06-13 13:00:00">
Jun 13
</time>
</div>
</div>
<div class="event-list__item-body">
<div class="event-list__item-description">
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus.</p>
</div>
<div class="event-list__item-details">
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--clock">
<use href="/images/icons.svg?1.0.0#clock" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Time:
</span>
<span class="event-list__item-detail-label">
1:00 PM - 1:30 PM
</span>
</div>
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--place">
<use href="/images/icons.svg?1.0.0#place" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Location:
</span>
<span class="event-list__item-detail-label">
Praesent turpis
</span>
</div>
<div class="event-list__item-detail event-list__item-detail--category">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--label">
<use href="/images/icons.svg?1.0.0#label" />
</svg>
</span>
<span class="event-list__item-detail-hint" id="event-list-1__item-4-detail-hint-category">
Categories:
</span>
<ul class="event-list__item-detail-list" aria-labelledby="event-list-1__item-4-title event-list-1__item-4-detail-hint-category">
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Donec mollis hendrerit</span>
</span>
</a>
</li>
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Curabitur ligula</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="event-list__row">
<article class="event-list__item" id="event-list-1__item-5" aria-labelledby="event-list-1__item-5-title">
<div class="event-list__item-wrapper">
<div class="event-list__item-header">
<h2 class="event-list__item-title" id="event-list-1__item-5-title">
<a class="event-list__item-title-link
" href="#">
<span class="event-list__item-title-link-inner"> <span class="event-list__item-title-link-label">Aenean massa</span>
</span>
</a>
</h2>
<div class="event-list__item-time-wrapper">
<time class="event-list__item-time" datetime="2023-06-22 17:00:00">
Jun 22
</time>
</div>
</div>
<div class="event-list__item-body">
<div class="event-list__item-description">
<p>uisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="event-list__item-details">
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--clock">
<use href="/images/icons.svg?1.0.0#clock" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Time:
</span>
<span class="event-list__item-detail-label">
5:00 PM - 7:00 PM
</span>
</div>
<div class="event-list__item-detail event-list__item-detail--category">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--label">
<use href="/images/icons.svg?1.0.0#label" />
</svg>
</span>
<span class="event-list__item-detail-hint" id="event-list-1__item-5-detail-hint-category">
Categories:
</span>
<ul class="event-list__item-detail-list" aria-labelledby="event-list-1__item-5-title event-list-1__item-5-detail-hint-category">
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Maecenas</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="event-list__row">
<article class="event-list__item" id="event-list-1__item-6" aria-labelledby="event-list-1__item-6-title">
<figure class="event-list__item-figure">
<a class="event-list__item-figure-link" href="#" aria-labelledby="event-list-1__item-6-title" tabindex="-1">
<img class="event-list__item-image" srcset="https://images.fastspot.com/framework/980x654/4 980w, https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" 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" id="event-list-1__item-6-title">
<a class="event-list__item-title-link
" href="#">
<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 class="event-list__item-time-wrapper">
<time class="event-list__item-time" datetime="2023-06-23 17:00:00">
Jun 23
</time>
</div>
</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" aria-hidden="true">
<svg class="icon icon--clock">
<use href="/images/icons.svg?1.0.0#clock" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Time:
</span>
<span class="event-list__item-detail-label">
5:00 PM - 6:30 PM
</span>
</div>
<div class="event-list__item-detail">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--place">
<use href="/images/icons.svg?1.0.0#place" />
</svg>
</span>
<span class="event-list__item-detail-hint">
Location:
</span>
<span class="event-list__item-detail-label">
Nam quam nunc, blandit vel<br>luctus pulvinar<br>hendrerit id
</span>
</div>
<div class="event-list__item-detail event-list__item-detail--category">
<span class="event-list__item-detail-icon" aria-hidden="true">
<svg class="icon icon--label">
<use href="/images/icons.svg?1.0.0#label" />
</svg>
</span>
<span class="event-list__item-detail-hint" id="event-list-1__item-6-detail-hint-category">
Categories:
</span>
<ul class="event-list__item-detail-list" aria-labelledby="event-list-1__item-6-title event-list-1__item-6-detail-hint-category">
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Aenean massa</span>
</span>
</a>
</li>
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Vestibulum purus quam</span>
</span>
</a>
</li>
<li class="event-list__item-detail-item">
<a class="button-text
" href="#">
<span class="button-text__inner"> <span class="button-text__label">Maecenas malesuada</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="event-list__pagination">
<!-- Pagination -->
<div class="pagination" id="pagination-2">
<h2 class="pagination__title" id="pagination-2__title">Events Pagination</h2>
<div class="pagination__body">
<nav class="pagination__nav" aria-labelledby="pagination-2__title">
<div class="pagination__nav-control pagination__nav-control--previous">
<a class="pagination__nav-link
pagination__nav-link--disabled
" id="pagination-2__nav-link-previous" aria-labelledby="pagination-2__title pagination-2__nav-link-previous" rel="prev" href="#">
<span class="pagination__nav-link-inner"> <span class="pagination__nav-link-label">Previous Page</span>
<span class="pagination__nav-link-icon" aria-hidden="true">
<svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg>
</span>
</span>
</a>
</div>
<div class="pagination__nav-control pagination__nav-control--next">
<a class="pagination__nav-link
" id="pagination-2__nav-link-next" aria-labelledby="pagination-2__title pagination-2__nav-link-next" rel="next" href="#">
<span class="pagination__nav-link-inner"> <span class="pagination__nav-link-label">Next Page</span>
<span class="pagination__nav-link-icon" aria-hidden="true">
<svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg>
</span>
</span>
</a>
</div>
</nav>
<form class="pagination__form" action="#" method="get">
<div class="pagination__form-inner">
<label class="pagination__form-label" for="pagination-2__form-select">
Page
</label>
<div class="pagination__form-select-wrapper">
<select class="pagination__form-select" id="pagination-2__form-select" name="page">
<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" aria-hidden="true">
<svg class="icon icon--expand">
<use href="/images/icons.svg?1.0.0#expand" />
</svg>
</span>
</div>
<span class="pagination__form-suffix">
of 50
</span>
<div class="pagination__form-submit">
<button class="button-filled
" type="submit">
<span class="button-filled__inner"> <span class="button-filled__label">Go</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: Event Item -->
</section>
{% include '@component-page-header' with {
page: page
} %}
<section
class="full-width-components"
id="full-width-components"
tabindex="-1"
aria-labelledby="page-header__title"
>
{% render '@component-event-feature' %}
{% include '@component-filter' with {
action_category: '#',
selects: [
{
label: 'Category',
options: [
{
title: 'All Categories'
},
{
title: 'Category One'
},
{
title: 'Another Category'
}
]
},
{
label: 'Type',
options: [
{
title: 'All Types'
},
{
title: 'Type One'
},
{
title: 'Another Type'
}
]
}
],
search_placeholder: 'Search by keyword',
results: '',
category: ''
} %}
{% render '@component-event-list' %}
</section>
No notes defined.