<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-13">
<div class="sub_nav_header">
<h2 class="sub_nav_title" id="basic_nav_title-13">Subpage Example</h2>
</div>
<ul class="sub_nav_list" aria-labelledby="basic_nav_title-13">
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Overview</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Vision & Mission</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">History</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Health & Safety</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Getting Here</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Board of Trustees</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Administrative Staff</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Financials</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Arts & Culture Millage Information</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Newsroom</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Employment Opportunities</span>
</div>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<div class="sub_nav_link_inner">
<span class="sub_nav_link_label">Partners & Affiliates</span>
</div>
</a>
</li>
</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-11">
<div class="toggle_nav_header sub_nav_header">
<h2 class="toggle_nav_title sub_nav_title" id="toggle_nav_title-11">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-11">
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Overview</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Vision & Mission</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">History</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Health & Safety</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Getting Here</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Board of Trustees</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Administrative Staff</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Financials</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Arts & Culture Millage Information</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Newsroom</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Employment Opportunities</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-sub-nav-item toggle_nav_item sub_nav_item">
<a class="js-nav-toggle-link js-sub-nav-link toggle_nav_link sub_nav_link" href="#">
<div class="toggle_nav_link_inner sub_nav_link_inner">
<span class="sub_nav_link_label">Partners & Affiliates</span>
</div>
</a>
</li>
</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>
<div class="page_content">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<!-- WYSIWYG -->
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula. Vivamus bibendum lectus ligula, tincidunt semper sem egestas sit amet. Maecenas ullamcorper volutpat nulla sit amet congue. Vestibulum non interdum erat, in condimentum justo.</p>
<p>Fusce diam nulla, pharetra a felis non, suscipit vehicula nibh. Etiam congue vehicula libero a tempor. Fusce dapibus nulla libero, vitae accumsan arcu mattis at. Sed quis dui elit. Duis nec blandit tortor, a cursus nibh. Sed nunc ipsum, tincidunt ac consequat tincidunt, cursus at nibh. Vivamus nec interdum purus, ut efficitur sapien. Suspendisse posuere ultricies mollis. Donec in urna risus. In a congue tortor. In hac habitasse platea dictumst. Suspendisse finibus hendrerit turpis, in viverra ligula tincidunt in.</p>
</div>
<!-- END: WYSIWYG -->
</div>
</div>
</div>
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
<!-- Gallery -->
<div class="gallery">
<div class="gallery_body">
<div class="fs-row">
<div class="fs-cell">
<div class="gallery_body_inner">
<div class="gallery_items">
<div class="gallery_row grid_layout_50_50">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_full">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/980x735/1 980w, https://images.fastspot.com/fim/740x555/1 740w, https://images.fastspot.com/fim/500x375/1 500w, https://images.fastspot.com/fim/300x225/1 300w" src="https://images.fastspot.com/fim/300x225/1" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_full">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/980x735/2 980w, https://images.fastspot.com/fim/740x555/2 740w, https://images.fastspot.com/fim/500x375/2 500w, https://images.fastspot.com/fim/300x225/2 300w" src="https://images.fastspot.com/fim/300x225/2" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, <a href>consectetur adipiscing elit</a>. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
</div>
<div class="gallery_row grid_layout_33_33_33">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_full">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/980x735/3 980w, https://images.fastspot.com/fim/740x555/3 740w, https://images.fastspot.com/fim/500x375/3 500w, https://images.fastspot.com/fim/300x225/3 300w" src="https://images.fastspot.com/fim/300x225/3" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_full">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/980x735/4 980w, https://images.fastspot.com/fim/740x555/4 740w, https://images.fastspot.com/fim/500x375/4 500w, https://images.fastspot.com/fim/300x225/4 300w" src="https://images.fastspot.com/fim/300x225/4" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_full">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/980x735/5 980w, https://images.fastspot.com/fim/740x555/5 740w, https://images.fastspot.com/fim/500x375/5 500w, https://images.fastspot.com/fim/300x225/5 300w" src="https://images.fastspot.com/fim/300x225/5" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
</div>
<div class="gallery_row grid_layout_100">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/1440x810/1 1440w, https://images.fastspot.com/fim/1220x686/1 1220w, https://images.fastspot.com/fim/980x552/1 980w, https://images.fastspot.com/fim/740x416/1 740w, https://images.fastspot.com/fim/500x282/1 500w, https://images.fastspot.com/fim/300x169/1 300w" src="https://images.fastspot.com/fim/300x169/1" alt="" loading="lazy" width="300" height="169">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
</div>
<div class="gallery_row grid_layout_30_70">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_portrait">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/735x980/1 735w, https://images.fastspot.com/fim/555x740/1 555w, https://images.fastspot.com/fim/375x500/1 375w, https://images.fastspot.com/fim/225x300/1 225w" src="https://images.fastspot.com/fim/225x300/1" alt="" loading="lazy" width="225" height="300">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/1440x810/2 1440w, https://images.fastspot.com/fim/1220x686/2 1220w, https://images.fastspot.com/fim/980x552/2 980w, https://images.fastspot.com/fim/740x416/2 740w, https://images.fastspot.com/fim/500x282/2 500w, https://images.fastspot.com/fim/300x169/2 300w" src="https://images.fastspot.com/fim/300x169/2" alt="" loading="lazy" width="300" height="169">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
</div>
<div class="gallery_row grid_layout_70_30">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/1440x810/3 1440w, https://images.fastspot.com/fim/1220x686/3 1220w, https://images.fastspot.com/fim/980x552/3 980w, https://images.fastspot.com/fim/740x416/3 740w, https://images.fastspot.com/fim/500x282/3 500w, https://images.fastspot.com/fim/300x169/3 300w" src="https://images.fastspot.com/fim/300x169/3" alt="" loading="lazy" width="300" height="169">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_portrait">
<img class="gallery_item_image" srcset="https://images.fastspot.com/fim/735x980/4 735w, https://images.fastspot.com/fim/555x740/4 555w, https://images.fastspot.com/fim/375x500/4 375w, https://images.fastspot.com/fim/225x300/4 225w" src="https://images.fastspot.com/fim/225x300/4" alt="" loading="lazy" width="225" height="300">
</div>
<figcaption class="gallery_item_caption">
<p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Gallery -->
<!-- Accordion -->
<div class="js-accordion accordion">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<div class="accordion_inner">
<div class="accordion_header">
<h2 class="accordion_title">
<span class="accordion_title_label">Heading 3 Lorem Ipsum</span>
</h2>
<div class="accordion_description">
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula. Vivamus bibendum lectus ligula, tincidunt semper sem egestas sit amet. Maecenas ullamcorper volutpat nulla sit amet congue. Vestibulum non interdum erat, in condimentum justo.</p>
<p>Fusce diam nulla, pharetra a felis non, suscipit vehicula nibh. Etiam congue vehicula libero a tempor. Fusce dapibus nulla libero, vitae accumsan arcu mattis at. Sed quis dui elit. Duis nec blandit tortor, a cursus nibh. Sed nunc ipsum, tincidunt ac consequat tincidunt, cursus at nibh. Vivamus nec interdum purus, ut efficitur sapien. Suspendisse posuere ultricies mollis. Donec in urna risus. In a congue tortor. In hac habitasse platea dictumst. Suspendisse finibus hendrerit turpis, in viverra ligula tincidunt in.</p>
</p>
</div>
</div>
<div class="accordion_items">
<div class="js-accordion-item js-accordion-item-3-1 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-1">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Accordion Heading 3 Lorem Ipsum</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-label="Accordion Heading 3 Lorem Ipsum">
Fusce diam nulla, pharetra a felis non, suscipit vehicula nibh. Etiam congue vehicula libero a tempor. Fusce dapibus nulla libero, vitae accumsan arcu mattis at. Sed quis dui elit. Duis nec blandit tortor, a cursus nibh. Sed nunc ipsum, tincidunt ac consequat tincidunt, cursus at nibh. Vivamus nec interdum purus, ut efficitur sapien. Suspendisse posuere ultricies mollis. Donec in urna risus. In a congue tortor. In hac habitasse platea dictumst. Suspendisse finibus hendrerit turpis, in viverra ligula tincidunt in.
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-2 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-2">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Accordion Heading 3 Lorem Ipsum</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-label="Accordion Heading 3 Lorem Ipsum">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-3 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-3">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Accordion Heading 3 Lorem Ipsum</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-label="Accordion Heading 3 Lorem Ipsum">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-4 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-4">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Accordion longer title lorem ipsum dolor sit amet avec lorem ipsum dolor sit amet</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-label="Accordion longer title lorem ipsum dolor sit amet avec lorem ipsum dolor sit amet">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Accordion -->
<!-- Call to Action -->
<div class="cta_full theme_plum">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_full_inner">
<div class="cta_full_header">
<h2 class="cta_full_title">Call to Action Title Lorem Ipsum Dolor</h2>
</div>
<div class="cta_full_body">
<div class="cta_full_description">
<p>FIM offers an extensive array of community education and engagement opportunities including Music Around Town concerts, the Troubadours’ classroom visits, school-time performances at the Capitol Theatre and Whiting Auditorium, and a host of virtual field trips available to educators throughout the school year.</p>
</div>
<div class="cta_full_action">
<a href="#" class="cta_full_link" aria-label="Link Aria">
<span class="cta_full_link_inner">
<span class="cta_full_link_label">Learn More</span>
<span class="cta_full_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
<!-- Contact Info Multiple -->
<div class="contact_block_multiple">
<div class="fs-row">
<div class="fs-cell">
<div class="contact_block_multiple_inner">
<div class="contact_multiple">
<div class="contact_multiple_header">
<h2 class="contact_multiple_title">Contact Multiple Component</h2>
</div>
<div class="contact_multiple_body">
<div class="contact_multiple_details">
<div class="contact_multiple_detail image">
<figure class="contact_multiple_detail_figure">
<img class="contact_multiple_detail_image" srcset="https://images.fastspot.com/fim/300x300/1 300w, https://images.fastspot.com/fim/100x100/1 100w" src="https://images.fastspot.com/fim/100x100/1" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="contact_multiple_detail name">
<h2 class="contact_multiple_detail_info contact_multiple_detail_info_strong">Firstname Lastname</h2>
<div class="contact_multiple_detail_info contact_multiple_detail_info_em">Community Engagement Coordinator</div>
</div>
<div class="contact_multiple_detail contacts">
<div class="contact_multiple_detail_info">
<a class="contact_multiple_detail_info_link" href="tel:4105551234">(410) 555-1234</a>
</div>
<div class="contact_multiple_detail_info">
<a class="contact_multiple_detail_info_link" href="tel:community@thefim.org">community@thefim.org</a>
</div>
</div>
</div>
<div class="contact_multiple_details">
<div class="contact_multiple_detail image">
<figure class="contact_multiple_detail_figure">
<img class="contact_multiple_detail_image" srcset="https://images.fastspot.com/fim/300x300/1 300w, https://images.fastspot.com/fim/100x100/1 100w" src="https://images.fastspot.com/fim/100x100/1" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="contact_multiple_detail name">
<h2 class="contact_multiple_detail_info contact_multiple_detail_info_strong">Firstname Lastname</h2>
<div class="contact_multiple_detail_info contact_multiple_detail_info_em">Community Engagement Coordinator</div>
</div>
<div class="contact_multiple_detail contacts">
<div class="contact_multiple_detail_info">
<a class="contact_multiple_detail_info_link" href="tel:4105551234">(410) 555-1234</a>
</div>
<div class="contact_multiple_detail_info">
<a class="contact_multiple_detail_info_link" href="tel:community@thefim.org">community@thefim.org</a>
</div>
</div>
</div>
<div class="contact_multiple_details">
<div class="contact_multiple_detail image">
<figure class="contact_multiple_detail_figure">
<img class="contact_multiple_detail_image" srcset="https://images.fastspot.com/fim/300x300/1 300w, https://images.fastspot.com/fim/100x100/1 100w" src="https://images.fastspot.com/fim/100x100/1" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="contact_multiple_detail name">
<h2 class="contact_multiple_detail_info contact_multiple_detail_info_strong">Firstname Lastname</h2>
<div class="contact_multiple_detail_info contact_multiple_detail_info_em">Community Engagement Coordinator</div>
</div>
<div class="contact_multiple_detail contacts">
<div class="contact_multiple_detail_info">
<a class="contact_multiple_detail_info_link" href="tel:4105551234">(410) 555-1234</a>
</div>
<div class="contact_multiple_detail_info">
<a class="contact_multiple_detail_info_link" href="tel:community@thefim.org">community@thefim.org</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Contact Info -->
<!-- Call to Action Featured -->
<div class="cta_featured theme_royal_blue">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_featured_inner">
<div class="cta_featured_header cta_featured_header_sm">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_media">
<picture class="cta_featured_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/555x740/1" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x416/1" width="740" height="416">
<img class="cta_featured_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</div>
<div class="cta_featured_body">
<div class="cta_featured_header cta_featured_header_lg">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_description">
<p>FIM offers an extensive array of community education and engagement opportunities including Music Around Town concerts, the Troubadours’ classroom visits, school-time performances at the Capitol Theatre and Whiting Auditorium, and a host of virtual field trips available to educators throughout the school year.</p>
</div>
<div class="cta_featured_action">
<a href="#" class="cta_featured_link" aria-label="Link Aria">
<span class="cta_featured_link_inner">
<span class="cta_featured_link_label">Learn More</span>
<span class="cta_featured_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action Featured -->
</div>
{% include '@partial-page-header' with {
page: page
} %}
<div class="page_content">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<!-- WYSIWYG -->
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula. Vivamus bibendum lectus ligula, tincidunt semper sem egestas sit amet. Maecenas ullamcorper volutpat nulla sit amet congue. Vestibulum non interdum erat, in condimentum justo.</p>
<p>Fusce diam nulla, pharetra a felis non, suscipit vehicula nibh. Etiam congue vehicula libero a tempor. Fusce dapibus nulla libero, vitae accumsan arcu mattis at. Sed quis dui elit. Duis nec blandit tortor, a cursus nibh. Sed nunc ipsum, tincidunt ac consequat tincidunt, cursus at nibh. Vivamus nec interdum purus, ut efficitur sapien. Suspendisse posuere ultricies mollis. Donec in urna risus. In a congue tortor. In hac habitasse platea dictumst. Suspendisse finibus hendrerit turpis, in viverra ligula tincidunt in.</p>
</div>
<!-- END: WYSIWYG -->
</div>
</div>
</div>
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
{% render '@component-gallery' with {
title: '',
description: '',
} %}
{% render '@component-accordion' with {
title: 'Heading 3 Lorem Ipsum',
description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula. Vivamus bibendum lectus ligula, tincidunt semper sem egestas sit amet. Maecenas ullamcorper volutpat nulla sit amet congue. Vestibulum non interdum erat, in condimentum justo.</p><p>Fusce diam nulla, pharetra a felis non, suscipit vehicula nibh. Etiam congue vehicula libero a tempor. Fusce dapibus nulla libero, vitae accumsan arcu mattis at. Sed quis dui elit. Duis nec blandit tortor, a cursus nibh. Sed nunc ipsum, tincidunt ac consequat tincidunt, cursus at nibh. Vivamus nec interdum purus, ut efficitur sapien. Suspendisse posuere ultricies mollis. Donec in urna risus. In a congue tortor. In hac habitasse platea dictumst. Suspendisse finibus hendrerit turpis, in viverra ligula tincidunt in.</p>',
} %}
{% render '@component-callout-row' with {
theme: 'plum',
} %}
{% render '@component-contact-info-multiple' %}
{% render '@component-visual-callout' with {
theme: 'royal_blue',
} %}
</div>
No notes defined.