<div class="page_header page_header_contains_image">
<div class="page_header_inner">
<div class="page_header_breadcrumb">
<div class="page_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_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_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</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">
<svg class="icon icon_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</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">
<svg class="icon icon_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Subpage Example</span>
</span>
</span>
<span class="breadcrumb_end" aria-hidden="true">
<svg class="icon icon_forward_slash">
<use href="/images/icons.svg#forward_slash" />
</svg>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_nav">
<div class="page_nav_inner">
<a class="skip_link skip_subnav" id="skip_sub_link" href="#page_content">Skip Sub Navigation</a>
<div class="page_nav_flat">
<div class="fs-row">
<div class="fs-cell">
<div class="page_nav_flat_inner">
<nav class="sub_nav" aria-labelledby="basic_nav_title-8">
<div class="sub_nav_header">
<h2 class="sub_nav_title" id="basic_nav_title-8">Subpage Example</h2>
</div>
<ul class="sub_nav_list" aria-labelledby="basic_nav_title-8">
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="page_nav_toggle">
<div class="js-nav-toggle-group js-sub-nav-group toggle_nav_group sub_nav_group">
<button class="js-sub-nav-toggle js-nav-toggle-button js-swap sub_nav_toggle button_toggle" data-swap-target=".js-sub-nav-group" data-swap-linked="audience">
<span class="sub_nav_toggle_inner_default sub_nav_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="sub_nav_toggle_label_default sub_nav_toggle_label button_toggle_label_default button_toggle_label">In This Section</span>
<span class="sub_nav_toggle_icon_default sub_nav_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="sub_nav_toggle_inner_active sub_nav_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="sub_nav_toggle_label_active sub_nav_toggle_label button_toggle_label_active button_toggle_label">Close</span>
<span class="sub_nav_toggle_icon_active sub_nav_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</span>
</button>
<div class="js-nav-toggle-panel js-sub-nav-panel toggle_nav_panel sub_nav_panel">
<nav class="js-nav-toggle js-sub-nav toggle_nav sub_nav" aria-labelledby="toggle_nav_title-6">
<div class="toggle_nav_header sub_nav_header">
<h2 class="toggle_nav_title sub_nav_title" id="toggle_nav_title-6">subpage example</h2>
</div>
<ul class="js-nav-toggle-list js-sub-nav-list toggle_nav_list sub_nav_list" aria-labelledby="toggle_nav_title-6">
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_intro">
<div class="fs-row">
<div class="fs-cell">
<div class="page_intro_inner">
<div class="page_intro_body">
<h1 class="page_title" id="page_title" tabindex="-1">Subpage Example</h1>
<p class="page_description">We believe in the power of the performing arts to bring us together as a community, inspire the next generation, and engage us with important issues and each other. The transformative power of the arts. For all of Flint.</p>
</div>
<div class="page_intro_media page_intro_media_lg">
<figure class="page_intro_figure">
<img class="page_intro_image" srcset="https://images.fastspot.com/fim/980x735/ 980w, https://images.fastspot.com/fim/740x555/ 740w" src="https://images.fastspot.com/fim/740x555/" alt="" loading="lazy" width="740" height="555">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="page_intro_media_container">
<div class="fs-row">
<div class="fs-cell">
<div class="page_intro_media_container_inner">
<div class="page_intro_media page_intro_media_sm">
<figure class="page_intro_figure">
<img class="page_intro_image" srcset="https://images.fastspot.com/fim/980x735/ 980w, https://images.fastspot.com/fim/740x555/ 740w" src="https://images.fastspot.com/fim/740x555/" alt="" loading="lazy" width="740" height="555">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{#
{% include '@partial-page-header' with {
page: page
} %}
#}
<div class="page_header{% if page.image %} page_header_contains_image{% endif %}">
<div class="page_header_inner">
{% if page.breadcrumbNav != false %}
<div class="page_header_breadcrumb">
<div class="page_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_breadcrumb_inner">
{% render '@navigation-breadcrumb' with {
page: page,
modifier: '',
links: page.breadcrumbNav,
icon_home: '',
icon_divider: 'forward_slash',
icon_end: 'forward_slash'
} %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if page.subNav != false %}
<div class="page_nav">
<div class="page_nav_inner">
<a class="skip_link skip_subnav" id="skip_sub_link" href="#page_content">Skip Sub Navigation</a>
<div class="page_nav_flat">
<div class="fs-row">
<div class="fs-cell">
<div class="page_nav_flat_inner">
{% include '@navigation-basic' with {
class: 'sub',
modifier: '',
title: page.title,
active_index: '',
links: page.subNav
} %}
</div>
</div>
</div>
</div>
<div class="page_nav_toggle">
{% include '@navigation-toggle' with {
class: 'sub',
modifier: '',
title: page.title|lower,
links: page.subNav,
icon: '',
child_icon: '',
toggle: {
title: 'In This Section',
icon: 'chevron_down',
title_active: 'Close',
icon_active: 'close',
swap_target: '.js-sub-nav-group',
swap_link: 'audience'
}
} %}
</div>
</div>
</div>
{% endif %}
{% if page.title or page.description %}
<div class="page_intro">
<div class="fs-row">
<div class="fs-cell{% if not page.image %} fs-lg-justify-center fs-lg-10 fs-xl-8{% endif %}">
<div class="page_intro_inner">
<div class="page_intro_body">
{% if page.title %}
<h1 class="page_title" id="page_title" tabindex="-1">{{ page.title }}</h1>
{% endif %}
{% if page.description %}
<p class="page_description">{{ page.description }}</p>
{% endif %}
</div>
{% if page.image %}
<div class="page_intro_media page_intro_media_lg">
<figure class="page_intro_figure">
{% include '@partial-image' with {
class: 'page_intro',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.full.med,
img.full.sml
]
} %}
</figure>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.image %}
<div class="page_intro_media_container">
<div class="fs-row">
<div class="fs-cell">
<div class="page_intro_media_container_inner">
<div class="page_intro_media page_intro_media_sm">
<figure class="page_intro_figure">
{% include '@partial-image' with {
class: 'page_intro',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.full.med,
img.full.sml
]
} %}
</figure>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
No notes defined.