<!-- Related Events -->
<div class="event_related component_has_radius">
    <div class="event_related_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="event_related_header_inner">
                    <h2 class="event_related_title">Related Events</h2>

                    <div class="event_related_cta_wrap is_desktop">

                        <a href="#" class="btn_link theme_gold">
                            <span class="btn_link_inner">
                                <span class="btn_link_label">View Calendar</span>
                                <span class="btn_link_icon" aria-hidden="true">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="event_related_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="event_related_items" aria-label="Related Events">
                    <li class="event_related_item">
                        <div class="event_related_item_grid">
                            <div class="event_related_item_grid_item is_title">
                                <h2 class="event_related_item_title">

                                    <a href="page-event-detail.html" class="event_related_item_title_link">
                                        <span class="event_related_item_title_link_inner">
                                            <span class="event_related_item_title_link_label">In Enim Justo Rhoncus Ut</span>
                                        </span>
                                    </a>
                                </h2>
                            </div>

                            <div class="event_related_item_grid_item is_date">
                                <div class="event_related_item_time_wrapper">
                                    <time class="event_related_item_time " datetime="2023-05-31 17:00:00">
                                        <span class="event_related_item_time_prefix">From</span>

                                        <div class="event_related_item_time_date_wrap">
                                            <span class="event_related_item_time_start_month">May</span>
                                            <span class="event_related_item_time_start_day">31</span>
                                        </div>
                                    </time>
                                </div>
                            </div>

                            <div class="event_related_item_grid_item is_meta">
                                <div class="event_related_item_body">
                                    <div class="event_related_item_details">
                                        <div class="event_related_item_detail">
                                            <span class="event_related_item_detail_hint">Time:&nbsp;</span>
                                            <span class="event_related_item_detail_label">
                                                <span class="event_related_item_detail_label_date">5:00 PM - 7:00 PM</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="event_related_item">
                        <div class="event_related_item_grid">
                            <div class="event_related_item_grid_item is_title">
                                <h2 class="event_related_item_title">

                                    <a href="page-event-detail.html" class="event_related_item_title_link">
                                        <span class="event_related_item_title_link_inner">
                                            <span class="event_related_item_title_link_label">Aenean commodo ligula eget dolor</span>
                                        </span>
                                    </a>
                                </h2>
                            </div>

                            <div class="event_related_item_grid_item is_date">
                                <div class="event_related_item_time_wrapper">
                                    <time class="event_related_item_time is_same_day" datetime="2023-05-31 17:00:00">

                                        <div class="event_related_item_time_date_wrap">
                                            <span class="event_related_item_time_start_month">May</span>
                                            <span class="event_related_item_time_start_day">31</span>
                                        </div>
                                    </time>
                                </div>
                            </div>

                            <div class="event_related_item_grid_item is_meta">
                                <div class="event_related_item_body">
                                    <div class="event_related_item_details">
                                        <div class="event_related_item_detail">
                                            <span class="event_related_item_detail_hint">Time:&nbsp;</span>
                                            <span class="event_related_item_detail_label">
                                                <span class="event_related_item_detail_label_date">All Day Event</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="event_related_item">
                        <div class="event_related_item_grid">
                            <div class="event_related_item_grid_item is_title">
                                <h2 class="event_related_item_title">

                                    <a href="page-event-detail.html" class="event_related_item_title_link">
                                        <span class="event_related_item_title_link_inner">
                                            <span class="event_related_item_title_link_label">In Enim Justo Rhoncus Ut</span>
                                        </span>
                                    </a>
                                </h2>
                            </div>

                            <div class="event_related_item_grid_item is_date">
                                <div class="event_related_item_time_wrapper">
                                    <time class="event_related_item_time " datetime="2023-05-31 17:00:00">
                                        <span class="event_related_item_time_prefix">From</span>

                                        <div class="event_related_item_time_date_wrap">
                                            <span class="event_related_item_time_start_month">May</span>
                                            <span class="event_related_item_time_start_day">31</span>
                                        </div>
                                    </time>
                                </div>
                            </div>

                            <div class="event_related_item_grid_item is_meta">
                                <div class="event_related_item_body">
                                    <div class="event_related_item_details">
                                        <div class="event_related_item_detail">
                                            <span class="event_related_item_detail_hint">Time:&nbsp;</span>
                                            <span class="event_related_item_detail_label">
                                                <span class="event_related_item_detail_label_date">5:00 PM - 7:00 PM</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

                <div class="event_related_cta_wrap is_mobile">

                    <a href="#" class="btn_link theme_gold">
                        <span class="btn_link_inner">
                            <span class="btn_link_label">View Calendar</span>
                            <span class="btn_link_icon" aria-hidden="true">
                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related Events -->
{#
	{% include '@component-events-related' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

<!-- Related Events -->
<div class="event_related component_has_radius">
	<div class="event_related_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="event_related_header_inner">
					<h2 class="event_related_title">{{ title }}</h2>

					<div class="event_related_cta_wrap is_desktop">
						{% include '@partial-link' with {
							title: cta.title,
							url: cta.href,
							target: '',
							class: 'btn',
							js: false,
							icon: 'arrow_right',
							aria: '',
							nowrap: false,
							theme: 'gold'
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="event_related_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="event_related_items" aria-label="{{ title }}">
					{% for item in items %}
						<li class="event_related_item">
							<div class="event_related_item_grid">
								<div class="event_related_item_grid_item is_title">
									<h2 class="event_related_item_title">
										{% include '@partial-link' with {
											class: 'event_related_item_title',
											title: item.title,
											url: item.url
										} %}
									</h2>
								</div>

								<div class="event_related_item_grid_item is_date">
									<div class="event_related_item_time_wrapper">
										<time class="event_related_item_time {% if item.date.same_day %}is_same_day{% endif %}" datetime="{{ item.date.from }}">
											{% if not item.date.same_day %}
												<span class="event_related_item_time_prefix">From</span>
											{% endif %}
											
											<div class="event_related_item_time_date_wrap">
												<span class="event_related_item_time_start_month">{{ item.date.from|date('M') }}</span>
												<span class="event_related_item_time_start_day">{{ item.date.from|date('d') }}</span>
											</div>
										</time>
									</div>
								</div>

								<div class="event_related_item_grid_item is_meta">
									<div class="event_related_item_body">
										<div class="event_related_item_details">
											{% if not item.date.all_day %}
												<div class="event_related_item_detail">
													<span class="event_related_item_detail_hint">Time:&nbsp;</span>
													<span class="event_related_item_detail_label">
														<span class="event_related_item_detail_label_date">{{ item.date.from|date('g:i A') }} - {{ item.date.to|date('g:i A') }}</span>
													</span>
												</div>
											{% else %}
												<div class="event_related_item_detail">
													<span class="event_related_item_detail_hint">Time:&nbsp;</span>
													<span class="event_related_item_detail_label">
														<span class="event_related_item_detail_label_date">All Day Event</span>
													</span>
												</div>
											{% endif %}
										</div>
									</div>
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>

				<div class="event_related_cta_wrap is_mobile">
					{% include '@partial-link' with {
						title: cta.title,
						url: cta.href,
						target: '',
						class: 'btn',
						js: false,
						icon: 'arrow_right',
						aria: '',
						nowrap: false,
						theme: 'gold'
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Related Events -->

No notes defined.