<div class="page_header theme_site_theme">
<div class="page_header_inner">
<div class="page_header_inner_content">
<img class="page_header_inner_background" src="/images/demo-lines.png">
<div class="page_header_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_breadcrumb_inner">
<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_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg></span>
</li>
<li class="breadcrumb_item">
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_intro">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_intro_inner">
<h1 class="page_header_title" id="page_header_title" tabindex="-1">Events</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_header_title">
<div class="events_featured theme_white">
<div class="events_featured_body">
<div class="fs-row">
<div class="fs-cell">
<div class="events_featured_body_inner">
<div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"align":"center","watchDrag":true,"containScroll":false,"duration":40,"plugins":["fade"]}'>
<div id="events-featured-viewport-9" class="embla__viewport js-carousel-embla-viewport">
<ul class="events_featured_list embla__container js-carousel-embla-container">
<li class="events_featured_item embla__slide">
<!-- Event Feature -->
<div class="event_feature theme_accent">
<div class="event_feature_inner">
<div class="event_feature_figure_wrapper event_feature_figure_wrapper_sm">
<figure class="event_feature_figure">
<a class="event_feature_figure_link" href="#" aria-label="Read more about Breaking the Glass Ceiling: Women in Health and Research" tabindex="-1">
<img class="event_feature_image" srcset="https://images.fastspot.com/generic/980x735/1 980w, https://images.fastspot.com/generic/740x555/1 740w, https://images.fastspot.com/generic/500x375/1 500w, https://images.fastspot.com/generic/300x225/1 300w" sizes="(min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x225/1" alt="" loading="lazy" width="300" height="225">
<span class="event_feature_figure_note">Happening in Washington D.C.</span>
</a>
</figure>
<div class="event_feature_figure_date">
<time class="event_date theme_white_blue" datetime="2024-09-31 17:00:00">
<span class="event_date_from">From</span>
<span class="event_date_start">
<span class="event_date_month">
Oct
</span>
<span class="event_date_day">
01
</span>
</span>
</time>
</div>
</div>
<div class="event_feature_wrapper">
<div class="event_feature_content_date">
<time class="event_date theme_white_blue" datetime="2024-09-31 17:00:00">
<span class="event_date_from">From</span>
<span class="event_date_start">
<span class="event_date_month">
Oct
</span>
<span class="event_date_day">
01
</span>
</span>
</time>
</div>
<div class="event_feature_location">
In-Person
|
Hopkins Lobby
</div>
<h3 class="event_feature_title">
<a href="#" class="event_feature_title_link">
<span class="event_feature_title_link_inner">
<span class="event_feature_title_link_label">Breaking the Glass Ceiling: Women in Health and Research</span>
</span>
</a>
</h3>
<p class="event_feature_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
</div>
<div class="event_feature_figure_wrapper event_feature_figure_wrapper_lg">
<figure class="event_feature_figure">
<a class="event_feature_figure_link" href="#" aria-label="Read more about Breaking the Glass Ceiling: Women in Health and Research" tabindex="-1">
<img class="event_feature_image" srcset="https://images.fastspot.com/generic/735x980/1 735w, https://images.fastspot.com/generic/555x740/1 555w, https://images.fastspot.com/generic/375x500/1 375w, https://images.fastspot.com/generic/225x300/1 225w" sizes="(min-width: 1400px) 659px, (min-width: 1220px) 575px, (min-width: 980px) 460px, 0px" src="https://images.fastspot.com/generic/225x300/1" alt="" loading="lazy" width="225" height="300">
<span class="event_feature_figure_note">Happening in Washington D.C.</span>
</a>
</figure>
</div>
</div>
</div>
<!-- END: Event Feature -->
</li>
<li class="events_featured_item embla__slide">
<!-- Event Feature -->
<div class="event_feature theme_accent">
<div class="event_feature_inner">
<div class="event_feature_figure_wrapper event_feature_figure_wrapper_sm">
<figure class="event_feature_figure">
<a class="event_feature_figure_link" href="#" aria-label="Read more about Etiam in fringilla lacus. Sed." tabindex="-1">
<img class="event_feature_image" srcset="https://images.fastspot.com/generic/980x735/2 980w, https://images.fastspot.com/generic/740x555/2 740w, https://images.fastspot.com/generic/500x375/2 500w, https://images.fastspot.com/generic/300x225/2 300w" sizes="(min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x225/2" alt="" loading="lazy" width="300" height="225">
<span class="event_feature_figure_note">Happening in Washington D.C.</span>
</a>
</figure>
<div class="event_feature_figure_date">
<time class="event_date theme_white_blue" datetime="2024-09-31 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Oct
</span>
<span class="event_date_day">
01
</span>
</span>
</time>
</div>
</div>
<div class="event_feature_wrapper">
<div class="event_feature_content_date">
<time class="event_date theme_white_blue" datetime="2024-09-31 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Oct
</span>
<span class="event_date_day">
01
</span>
</span>
</time>
</div>
<div class="event_feature_location">
In-Person
|
Hopkins Lobby
</div>
<h3 class="event_feature_title">
<a href="#" class="event_feature_title_link">
<span class="event_feature_title_link_inner">
<span class="event_feature_title_link_label">Etiam in fringilla lacus. Sed.</span>
</span>
</a>
</h3>
<p class="event_feature_description">Donec et facilisis sem, at lobortis nibh. Aenean bibendum venenatis.</p>
</div>
<div class="event_feature_figure_wrapper event_feature_figure_wrapper_lg">
<figure class="event_feature_figure">
<a class="event_feature_figure_link" href="#" aria-label="Read more about Etiam in fringilla lacus. Sed." tabindex="-1">
<img class="event_feature_image" srcset="https://images.fastspot.com/generic/735x980/2 735w, https://images.fastspot.com/generic/555x740/2 555w, https://images.fastspot.com/generic/375x500/2 375w, https://images.fastspot.com/generic/225x300/2 225w" sizes="(min-width: 1400px) 659px, (min-width: 1220px) 575px, (min-width: 980px) 460px, 0px" src="https://images.fastspot.com/generic/225x300/2" alt="" loading="lazy" width="225" height="300">
<span class="event_feature_figure_note">Happening in Washington D.C.</span>
</a>
</figure>
</div>
</div>
</div>
<!-- END: Event Feature -->
</li>
<li class="events_featured_item embla__slide">
<!-- Event Feature -->
<div class="event_feature theme_accent">
<div class="event_feature_inner">
<div class="event_feature_figure_wrapper event_feature_figure_wrapper_sm">
<figure class="event_feature_figure">
<a class="event_feature_figure_link" href="#" aria-label="Read more about Vestibulum nec nibh hendrerit, mollis arcu at, accumsan justo. Praesent." tabindex="-1">
<img class="event_feature_image" srcset="https://images.fastspot.com/generic/980x735/3 980w, https://images.fastspot.com/generic/740x555/3 740w, https://images.fastspot.com/generic/500x375/3 500w, https://images.fastspot.com/generic/300x225/3 300w" sizes="(min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x225/3" alt="" loading="lazy" width="300" height="225">
<span class="event_feature_figure_note">Happening in Washington D.C.</span>
</a>
</figure>
<div class="event_feature_figure_date">
<time class="event_date theme_white_blue" datetime="2024-12-31 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Dec
</span>
<span class="event_date_day">
31
</span>
</span>
</time>
</div>
</div>
<div class="event_feature_wrapper">
<div class="event_feature_content_date">
<time class="event_date theme_white_blue" datetime="2024-12-31 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Dec
</span>
<span class="event_date_day">
31
</span>
</span>
</time>
</div>
<div class="event_feature_location">
In-Person
|
Hopkins Lobby
</div>
<h3 class="event_feature_title">
<a href="#" class="event_feature_title_link">
<span class="event_feature_title_link_inner">
<span class="event_feature_title_link_label">Vestibulum nec nibh hendrerit, mollis arcu at, accumsan justo. Praesent.</span>
</span>
</a>
</h3>
<p class="event_feature_description">Suspendisse ac massa suscipit, tincidunt diam a, suscipit sapien. Sed et condimentum magna. Morbi sodales purus vitae nulla fermentum elementum.</p>
</div>
<div class="event_feature_figure_wrapper event_feature_figure_wrapper_lg">
<figure class="event_feature_figure">
<a class="event_feature_figure_link" href="#" aria-label="Read more about Vestibulum nec nibh hendrerit, mollis arcu at, accumsan justo. Praesent." tabindex="-1">
<img class="event_feature_image" srcset="https://images.fastspot.com/generic/735x980/3 735w, https://images.fastspot.com/generic/555x740/3 555w, https://images.fastspot.com/generic/375x500/3 375w, https://images.fastspot.com/generic/225x300/3 225w" sizes="(min-width: 1400px) 659px, (min-width: 1220px) 575px, (min-width: 980px) 460px, 0px" src="https://images.fastspot.com/generic/225x300/3" alt="" loading="lazy" width="225" height="300">
<span class="event_feature_figure_note">Happening in Washington D.C.</span>
</a>
</figure>
</div>
</div>
</div>
<!-- END: Event Feature -->
</li>
</ul>
</div>
<div class="events_featured_controls embla__controls theme_accent" aria-controls="events-featured-viewport-9">
<div class="embla__dots js-carousel-embla-dots" role="navigation"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Filter -->
<div class="filter">
<div class="fs-row">
<div class="fs-cell">
<div class="filter_inner">
<form class="filter_tools" action="#" method="get">
<div class="filter_tool">
<label class="filter_tool_label" for="filter_tool_search_input">Search</label>
<div class="filter_tool_search_wrapper">
<input class="filter_tool_search_input" id="filter_tool_search_input" placeholder="Search Events..." type="search">
<div class="filter_tool_search_icon"><svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg></div>
</div>
</div>
<div class="filter_tool">
<label class="filter_tool_label" for="filter_tool_label_1">Category</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="Category One">Category One</option>
<option value="Another Category">Another Category</option>
</select>
</div>
</div>
<div class="filter_tool">
<label class="filter_tool_label" for="filter_tool_label_2">Date</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_2">
<option value="All Dates">All Dates</option>
<option value="September 2024">September 2024</option>
<option value="October 2024">October 2024</option>
<option value="November 2024">November 2024</option>
<option value="December 2024">December 2024</option>
</select>
</div>
</div>
<div>
<button class="filter_tool_submit" type="submit">
<span class="filter_tool_submit_inner">
<span class="filter_tool_submit_label">Submit</span>
<span class="filter_tool_submit_icon"><svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg></span>
</span>
</button>
</div>
</form>
</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-labelledby="page_header_title">
<li class="event_list_row">
<div class="event_list_item">
<figure class="event_list_item_figure event_list_item_figure_sm">
<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/generic/980x654/1 980w, https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" sizes="(min-width: 980px) 0px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
<div class="event_list_item_figure_date">
<time class="event_date theme_default" datetime="2025-05-31 17:00:00">
<span class="event_date_from">From</span>
<span class="event_date_start">
<span class="event_date_month">
May
</span>
<span class="event_date_day">
31
</span>
</span>
</time>
</div>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_date">
<time class="event_date theme_blue_light" datetime="2025-05-31 17:00:00">
<span class="event_date_from">From</span>
<span class="event_date_start">
<span class="event_date_month">
May
</span>
<span class="event_date_day">
31
</span>
</span>
</time>
</div>
<div class="event_list_item_content">
<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 class="event_list_item_meta">
In-Person |
Baltimore, MD
| 5:00 PM - 7:00 PM
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description typography">
<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_hint">When</span>
<span class="event_list_item_detail_label">
<span class="event_list_item_detail_label_date">5:00 PM - 7:00 PM</span>
</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_hint">Where</span>
<span class="event_list_item_detail_label">Baltimore, MD</span>
<span class="event_list_item_detail_label event_list_item_detail_label_alt">In-Person</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_hint">Category</span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label event_list_item_detail_link" href="#">Category One</a>
</li>
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label event_list_item_detail_link" href="#">Category Two</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<figure class="event_list_item_figure event_list_item_figure_lg">
<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/generic/980x654/1 980w, https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" sizes="(min-width: 1400px) 316px, (min-width: 1220px) 276px, (min-width: 980px) 221px, 0px" src="https://images.fastspot.com/generic/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item">
<div class="event_list_item_wrapper">
<div class="event_list_item_date">
<time class="event_date theme_blue_light" datetime="2025-05-31 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
May
</span>
<span class="event_date_day">
31
</span>
</span>
</time>
</div>
<div class="event_list_item_content">
<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 class="event_list_item_meta">
Location
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description typography">
<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_hint">Where</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_hint">Category</span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label 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">
<figure class="event_list_item_figure event_list_item_figure_sm">
<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/generic/980x654/2 980w, https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" sizes="(min-width: 980px) 0px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/2" alt="" loading="lazy" width="300" height="200">
</a>
<div class="event_list_item_figure_date">
<time class="event_date theme_default" datetime="2025-05-31 17:00:00">
<span class="event_date_from">From</span>
<span class="event_date_start">
<span class="event_date_month">
May
</span>
<span class="event_date_day">
31
</span>
</span>
</time>
</div>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_date">
<time class="event_date theme_blue_light" datetime="2025-05-31 17:00:00">
<span class="event_date_from">From</span>
<span class="event_date_start">
<span class="event_date_month">
May
</span>
<span class="event_date_day">
31
</span>
</span>
</time>
</div>
<div class="event_list_item_content">
<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 class="event_list_item_meta">
Location
| 5:00 PM - 7:00 PM
</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_hint">When</span>
<span class="event_list_item_detail_label">
<span class="event_list_item_detail_label_date">5:00 PM - 7:00 PM</span>
</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_hint">Where</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_hint">Category</span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label event_list_item_detail_link" href="#">Category Two</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<figure class="event_list_item_figure event_list_item_figure_lg">
<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/generic/980x654/2 980w, https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" sizes="(min-width: 1400px) 316px, (min-width: 1220px) 276px, (min-width: 980px) 221px, 0px" src="https://images.fastspot.com/generic/300x200/2" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item">
<figure class="event_list_item_figure event_list_item_figure_sm">
<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/generic/980x654/3 980w, https://images.fastspot.com/generic/740x494/3 740w, https://images.fastspot.com/generic/500x334/3 500w, https://images.fastspot.com/generic/300x200/3 300w" sizes="(min-width: 980px) 0px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/3" alt="" loading="lazy" width="300" height="200">
</a>
<div class="event_list_item_figure_date">
<time class="event_date theme_default" datetime="2025-06-13 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Jun
</span>
<span class="event_date_day">
13
</span>
</span>
</time>
</div>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_date">
<time class="event_date theme_blue_light" datetime="2025-06-13 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Jun
</span>
<span class="event_date_day">
13
</span>
</span>
</time>
</div>
<div class="event_list_item_content">
<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 class="event_list_item_meta">
Location
| 5:00 PM - 7:00 PM
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description typography">
<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_hint">When</span>
<span class="event_list_item_detail_label">
<span class="event_list_item_detail_label_date">5:00 PM - 7:00 PM</span>
</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_hint">Where</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_hint">Category</span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label event_list_item_detail_link" href="#">Category One</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<figure class="event_list_item_figure event_list_item_figure_lg">
<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/generic/980x654/3 980w, https://images.fastspot.com/generic/740x494/3 740w, https://images.fastspot.com/generic/500x334/3 500w, https://images.fastspot.com/generic/300x200/3 300w" sizes="(min-width: 1400px) 316px, (min-width: 1220px) 276px, (min-width: 980px) 221px, 0px" src="https://images.fastspot.com/generic/300x200/3" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
</li>
<li class="event_list_row">
<div class="event_list_item">
<div class="event_list_item_wrapper">
<div class="event_list_item_date">
<time class="event_date theme_blue_light" datetime="2025-06-22 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Jun
</span>
<span class="event_date_day">
22
</span>
</span>
</time>
</div>
<div class="event_list_item_content">
<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 typography">
<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_hint">When</span>
<span class="event_list_item_detail_label">
<span class="event_list_item_detail_label_date">5:00 PM - 7:00 PM</span>
</span>
</div>
<div class="event_list_item_detail event_list_item_detail_category">
<span class="event_list_item_detail_hint">Category</span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label 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">
<figure class="event_list_item_figure event_list_item_figure_sm">
<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/generic/980x654/4 980w, https://images.fastspot.com/generic/740x494/4 740w, https://images.fastspot.com/generic/500x334/4 500w, https://images.fastspot.com/generic/300x200/4 300w" sizes="(min-width: 980px) 0px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/4" alt="" loading="lazy" width="300" height="200">
</a>
<div class="event_list_item_figure_date">
<time class="event_date theme_default" datetime="2025-06-23 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Jun
</span>
<span class="event_date_day">
23
</span>
</span>
</time>
</div>
</figure>
<div class="event_list_item_wrapper">
<div class="event_list_item_date">
<time class="event_date theme_blue_light" datetime="2025-06-23 17:00:00">
<span class="event_date_start">
<span class="event_date_month">
Jun
</span>
<span class="event_date_day">
23
</span>
</span>
</time>
</div>
<div class="event_list_item_content">
<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 class="event_list_item_meta">
Location
| 5:00 PM - 6:30 PM
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_description typography">
<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_hint">When</span>
<span class="event_list_item_detail_label">
<span class="event_list_item_detail_label_date">5:00 PM - 6:30 PM</span>
</span>
</div>
<div class="event_list_item_detail">
<span class="event_list_item_detail_hint">Where</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_hint">Category</span>
<ul class="event_list_item_detail_list" aria-label="Categories">
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label event_list_item_detail_link" href="#">Category One</a>
</li>
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label event_list_item_detail_link" href="#">Category Two</a>
</li>
<li class="event_list_item_detail_item">
<a class="event_list_item_detail_label event_list_item_detail_link" href="#">Category Three</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<figure class="event_list_item_figure event_list_item_figure_lg">
<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/generic/980x654/4 980w, https://images.fastspot.com/generic/740x494/4 740w, https://images.fastspot.com/generic/500x334/4 500w, https://images.fastspot.com/generic/300x200/4 300w" sizes="(min-width: 1400px) 316px, (min-width: 1220px) 276px, (min-width: 980px) 221px, 0px" src="https://images.fastspot.com/generic/300x200/4" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
</div>
</li>
</ul>
<div class="event_list_pagination">
<!-- Pagination -->
<div class="pagination">
<nav class="pagination_nav" aria-label="Events Pagination">
<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
<span class="pagination_arrow_icon"><svg class="icon icon_caret_left">
<use href="/images/icons.svg#caret_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_caret_right">
<use href="/images/icons.svg#caret_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>
</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>
</div>
<!-- END: Event Item -->
</section>
{% include '@partial-page-header' with {
page: page
} %}
<section class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_header_title">
{% render '@component-events-featured' with {
page: page,
title: '',
theme: 'white',
event_theme: 'accent',
} %}
{% include '@partial-filter' with {
label: '',
action_category: '#',
search: true,
tools: [
{
label: 'Category',
options: [
{
label: 'All Categories'
},
{
label: 'Category One'
},
{
label: 'Another Category'
}
]
},
{
label: 'Date',
options: [
{
label: 'All Dates'
},
{
label: 'September 2024'
},
{
label: 'October 2024'
},
{
label: 'November 2024'
},
{
label: 'December 2024'
}
]
}
],
search_placeholder: 'Search Events...',
results: '',
category: ''
} %}
{% render '@partial-event-list' %}
</section>
No notes defined.