Flint Institute of Music Component Library

Page Header 

<div class="page_header">
    <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">Community Programs</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-6">
                                    <div class="sub_nav_header">
                                        <h2 class="sub_nav_title" id="basic_nav_title-6">Community Programs</h2>
                                    </div>
                                    <ul class="sub_nav_list" aria-labelledby="basic_nav_title-6">
                                    </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-4">
                                <div class="toggle_nav_header sub_nav_header">
                                    <h2 class="toggle_nav_title sub_nav_title" id="toggle_nav_title-4">community programs</h2>
                                </div>
                                <ul class="js-nav-toggle-list js-sub-nav-list toggle_nav_list sub_nav_list" aria-labelledby="toggle_nav_title-4">
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page_intro">
            <div class="fs-row">
                <div class="fs-cell fs-lg-justify-center fs-lg-10 fs-xl-8">
                    <div class="page_intro_inner">
                        <div class="page_intro_body">
                            <h1 class="page_title" id="page_title" tabindex="-1">Community Programs</h1>
                            <p class="page_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet lorem vel orci condimentum.</p>
                        </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.