<!-- Landing Feature -->
<div class="js-feature feature" id="page_title" tabindex="-1" aria-label="Flint Institute of Music">
<div class="fs-row">
<div class="fs-cell">
<div class="feature_inner">
<div class="feature_intro">
<h1 class="feature_title">The transformative power of the arts.<br><strong>For all of Flint.</strong></h1>
<ul class="feature_special_links">
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="feature_special_link_label">Buy Tickets</span>
</span>
</a>
</li>
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_user_plus">
<use href="/images/icons.svg#user_plus" />
</svg>
</span>
<span class="feature_special_link_label">Register for Classes & Lessons</span>
</span>
</a>
</li>
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_heart">
<use href="/images/icons.svg#heart" />
</svg>
</span>
<span class="feature_special_link_label">Give Now</span>
</span>
</a>
</li>
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_wallet">
<use href="/images/icons.svg#wallet" />
</svg>
</span>
<span class="feature_special_link_label">Mobile Wallet</span>
</span>
</a>
</li>
</ul>
</div>
<div class="feature_panel">
<div class="feature_panel_intro">
<h1 class="feature_title">The transformative power of the arts.<br><strong>For all of Flint.</strong></h1>
</div>
<div class="feature_media_wrapper">
<div class="js-feature-media feature_media">
<div class="feature_frame">
<a class="feature_media_link" href="#">
<video class="js-feature-video feature_video" autoplay playsinline muted loop poster="https://images.fastspot.com/fim/814x1220/2">
<source src="/videos/test.mp4" type="video/mp4">
</video>
<div class="feature_media_posters">
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/1 814w, https://images.fastspot.com/fim/654x980/1 654w, https://images.fastspot.com/fim/494x740/1 494w, https://images.fastspot.com/fim/334x500/1 334w, https://images.fastspot.com/fim/200x300/1 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/1" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/2 814w, https://images.fastspot.com/fim/654x980/2 654w, https://images.fastspot.com/fim/494x740/2 494w, https://images.fastspot.com/fim/334x500/2 334w, https://images.fastspot.com/fim/200x300/2 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/2" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/3 814w, https://images.fastspot.com/fim/654x980/3 654w, https://images.fastspot.com/fim/494x740/3 494w, https://images.fastspot.com/fim/334x500/3 334w, https://images.fastspot.com/fim/200x300/3 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/3" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/4 814w, https://images.fastspot.com/fim/654x980/4 654w, https://images.fastspot.com/fim/494x740/4 494w, https://images.fastspot.com/fim/334x500/4 334w, https://images.fastspot.com/fim/200x300/4 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/4" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/1 814w, https://images.fastspot.com/fim/654x980/1 654w, https://images.fastspot.com/fim/494x740/1 494w, https://images.fastspot.com/fim/334x500/1 334w, https://images.fastspot.com/fim/200x300/1 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/1" alt="" loading="lazy" width="200" height="300">
</div>
</div>
</a>
</div>
<div class="feature_media_controls">
<button class="js-feature-control-play feature_media_control play" aria-hidden="true" tabindex="-1">
<span class="feature_media_control_label">play</span>
<span class="feature_media_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-feature-control-pause feature_media_control pause active" aria-hidden="false">
<span class="feature_media_control_label">pause</span>
<span class="feature_media_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<figure class="feature_figure small">
<a class="feature_media_link" href="#">
<img class="feature_image" srcset="https://images.fastspot.com/fim/1220x814/ 1220w, https://images.fastspot.com/fim/980x654/ 980w, https://images.fastspot.com/fim/740x494/ 740w, https://images.fastspot.com/fim/500x334/ 500w, https://images.fastspot.com/fim/300x200/ 300w" sizes="(min-width: 1394px) 638px, (min-width: 1220px) 558px, (min-width: 980px) 538px, (min-width: 740px) 706px, 90vw" src="https://images.fastspot.com/fim/300x200/" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="js-feature-links feature_links">
<h2 class="feature_links_label" id="feature_links_label">Programs & Venues</h2>
<ul class="feature_links_list" aria-labelledby="feature_links_label">
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Capitol Theatre</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Whiting Auditorium</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Flint Repertory Theatre</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Flint Symphony Orchestra</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Flint School of Performing Arts</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END: Landing Feature -->
{#
{% include '@component-landing-feature' with {
title1: 'Title Line 1',
title2: 'Title Line 2 (pink!)',
image_mobile: '1',
image_mobile_alt: 'alt mobile image',
image_desktop: '2',
video: '/path/to/video',
label: 'Link List Label',
items: [
{
title: 'Item Title',
url: '#',
image: '1',
alt: 'item image alt',
tooltip: 'item tooltip'
}
]
} %}
#}
<!-- Landing Feature -->
<div class="js-feature feature" id="page_title" tabindex="-1" aria-label="{{ config.name }}">
<div class="fs-row">
<div class="fs-cell">
<div class="feature_inner">
<div class="feature_intro">
<h1 class="feature_title">{{ title1 }}<br><strong>{{ title2 }}</strong></h1>
<ul class="feature_special_links">
{% for link in links %}
<li class="feature_special_link_item">
<a class="feature_special_link" href="{{ link.url }}">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">{{ icon(link.icon) }}</span>
<span class="feature_special_link_label">{{ link.title }}</span>
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="feature_panel">
<div class="feature_panel_intro">
<h1 class="feature_title">{{ title1 }}<br><strong>{{ title2 }}</strong></h1>
</div>
<div class="feature_media_wrapper">
<div class="js-feature-media feature_media">
<div class="feature_frame">
<a class="feature_media_link" href="{{ event_link }}">
<video class="js-feature-video feature_video" autoplay playsinline muted loop poster="https://images.fastspot.com/{{ config.images }}/{{ img.portraitClassic.lrg.width }}x{{ img.portraitClassic.lrg.height }}/{{ image_desktop }}">
<source src="{{ video }}" type="video/mp4">
</video>
<div class="feature_media_posters">
{% for item in items %}
<div class="js-feature-media-poster feature_media_poster">
{% include '@partial-image' with {
class: 'feature_media_poster',
alt: alt,
image: item.image,
loading: 'lazy',
sources: [
img.portraitClassic.lrg,
img.portraitClassic.med,
img.portraitClassic.sml,
img.portraitClassic.xsml,
img.portraitClassic.xxsml
],
sizes: [
'(min-width: 1394px) 898px',
'(min-width: 1220px) 784px',
'(min-width: 980px) 628px',
'0'
]
} %}
</div>
{% endfor %}
</div>
</a>
</div>
<div class="feature_media_controls">
<button class="js-feature-control-play feature_media_control play" aria-hidden="true" tabindex="-1">
<span class="feature_media_control_label">play</span>
<span class="feature_media_control_icon">{{ icon('play') }}</span>
</button>
<button class="js-feature-control-pause feature_media_control pause active" aria-hidden="false">
<span class="feature_media_control_label">pause</span>
<span class="feature_media_control_icon">{{ icon('pause') }}</span>
</button>
</div>
</div>
</div>
</div>
<figure class="feature_figure small">
<a class="feature_media_link" href="{{ event_link }}">
{% include '@partial-image' with {
class: 'feature',
alt: alt,
image: image,
loading: 'lazy',
sources: [
img.classic.lrg,
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
'(min-width: 1394px) 638px',
'(min-width: 1220px) 558px',
'(min-width: 980px) 538px',
'(min-width: 740px) 706px',
'90vw'
]
} %}
</a>
</figure>
<div class="js-feature-links feature_links">
<h2 class="feature_links_label" id="feature_links_label">{{ label }}</h2>
<ul class="feature_links_list" aria-labelledby="feature_links_label">
{% for item in items %}
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="{{ item.url }}">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">{{ item.title }}</span>
<span class="feature_links_link_icon">{{ icon("arrow_right") }}</span>
</span>
{# <span class="js-feature-links-link-tooltip feature_links_link_tooltip" aria-hidden="true">{{ item.tooltip }}</span> #}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END: Landing Feature -->
No notes defined.