<div class="page_header">
    <div class="page_header_content">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="page_header_content_inner">
                    <div class="page_header_breadcrumb">

                        <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_icon" aria-hidden="true">
                                                    <i class="fa-regular fa-house"></i>
                                                </span>
                                                <span class="breadcrumb_pill_label">Home</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true"></span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Navigation Level</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true"></span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Parent Level</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true"></span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <span class="breadcrumb_pill">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label"></span>
                                            </span>
                                        </span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="event_list_row">
                        <div class="event_list_item_time_wrapper">
                            <span class="event_list_item_time_icon">
                                <i class="fa-regular fa-calendar"></i>
                            </span>
                            <time class="event_list_item_time event_list_item_time_sm" datetime="2017-05-31 17:00:00">
                                May 31
                            </time>
                            <time class="event_list_item_time event_list_item_time_lg" datetime="2017-05-31 17:00:00">
                                May 31
                            </time>
                        </div>
                        <div class="event_list_item">
                            <figure class="event_list_item_figure">

                                <img class="event_list_item_image" srcset="https://images.fastspot.com/merced/980x735/1 980w, https://images.fastspot.com/merced/740x555/1 740w, https://images.fastspot.com/merced/500x375/1 500w, https://images.fastspot.com/merced/300x225/1 300w" src="https://images.fastspot.com/merced/300x225/1" alt="" loading="lazy" width="300" height="225">
                            </figure>
                            <div class="event_list_item_wrapper">
                                <div class="event_list_item_inner">
                                    <div class="event_list_item_header">
                                        <h1 class="event_list_item_title" id="page_title">
                                            Merced College Concert Band
                                        </h1>
                                    </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">
                                                    <i class="fa-regular fa-school"></i>
                                                </span>
                                                <span class="event_list_item_detail_hint">Campus:&nbsp;</span>
                                                <span class="event_list_item_detail_label">Merced Campus</span>
                                            </div>
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <i class="fa-regular fa-location-dot"></i>
                                                </span>
                                                <span class="event_list_item_detail_hint">Location:&nbsp;</span>
                                                <span class="event_list_item_detail_label">Merced College Theatre</span>
                                            </div>
                                            <div class="event_list_item_detail">
                                                <span class="event_list_item_detail_icon">
                                                    <i class="fa-regular fa-clock"></i>
                                                </span>
                                                <span class="event_list_item_detail_hint">Time:&nbsp;</span>
                                                <span class="event_list_item_detail_label">
                                                    5:00 PM
                                                </span>
                                            </div>
                                            <div class="event_list_item_detail event_list_item_detail_category">
                                                <span class="event_list_item_detail_icon">
                                                    <i class="fa-regular fa-tags"></i>
                                                </span>
                                                <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="#">Fine & Performing Arts</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{#
	{% include '@component-page-header' with {
		page: page
	} %}
#}
<div class="page_header">
	<div class="page_header_content">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="page_header_content_inner">
					{% if page.breadcrumbNav != false  %}
						<div class="page_header_breadcrumb">
							{% render '@navigation-breadcrumb' with {
								modifier: '',
								links: page.breadcrumbNav,
								icon_home: 'fa-house',
								icon_divider: 'fa-slash-forward'
							} %}
						</div>
					{% endif %}
					<div class="event_list_row">
						<div class="event_list_item_time_wrapper">
							<span class="event_list_item_time_icon">
								<i class="fa-regular fa-calendar"></i>
							</span>
							<time class="event_list_item_time event_list_item_time_sm" datetime="{{ item.date.from.begin }}">
								{{ item.date.from.begin|date('M d') }}
								{% if item.date.to %}
									- {{ item.date.to.begin|date('M d') }}
								{% endif %}
							</time>
							<time class="event_list_item_time event_list_item_time_lg" datetime="{{ item.date.from.begin }}">
								{{ item.date.from.begin|date('F d') }}
								{% if item.date.to %}
									- {{ item.date.to.begin|date('F d') }}
								{% endif %}
							</time>
						</div>
						<div class="event_list_item">
							{% if item.image %}
								<figure class="event_list_item_figure">
									{% include '@component-image' with {
										class: 'event_list_item',
										alt: '',
										image: item.image,
										loading: 'lazy',
										sources: [
											img.full.med,
											img.full.sml,
											img.full.xsml,
											img.full.xxsml
										]
									} %}
								</figure>
							{% endif %}
							<div class="event_list_item_wrapper">
								<div class="event_list_item_inner">
									<div class="event_list_item_header">
										<h1 class="event_list_item_title" id="page_title">
											{{ item.title }}
										</h1>
									</div>
									<div class="event_list_item_body">
										<div class="event_list_item_details">
											{% if item.campus %}
												<div class="event_list_item_detail">
													<span class="event_list_item_detail_icon">
														<i class="fa-regular fa-school"></i>
													</span>
													<span class="event_list_item_detail_hint">Campus:&nbsp;</span>
													<span class="event_list_item_detail_label">{{ item.campus }}</span>
												</div>
											{% endif %}
											{% if item.location %}
												<div class="event_list_item_detail">
													<span class="event_list_item_detail_icon">
														<i class="fa-regular fa-location-dot"></i>
													</span>
													<span class="event_list_item_detail_hint">Location:&nbsp;</span>
													<span class="event_list_item_detail_label">{{ item.location }}</span>
												</div>
											{% endif %}
											{% if not item.date.to %}
												<div class="event_list_item_detail">
													<span class="event_list_item_detail_icon">
														<i class="fa-regular fa-clock"></i>
													</span>
													<span class="event_list_item_detail_hint">Time:&nbsp;</span>
													<span class="event_list_item_detail_label">
														{{ item.date.from.begin|date('g:i A') }}
													</span>
												</div>
											{% endif %}
											{% if item.categories %}
												<div class="event_list_item_detail event_list_item_detail_category">
													<span class="event_list_item_detail_icon">
														<i class="fa-regular fa-tags"></i>
													</span>
													<span class="event_list_item_detail_hint">Categories:&nbsp;</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>{% if not loop.last %}, {% endif %}
															</li>
														{% endfor %}
													</ul>
												</div>
											{% endif %}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.