Flint Institute of Music Component Library

Feature 

<!-- 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="#">

                                    <img class="feature_media_desktop_image" srcset="https://images.fastspot.com/fim/814x1220/ 814w, https://images.fastspot.com/fim/654x980/ 654w, https://images.fastspot.com/fim/494x740/ 494w, https://images.fastspot.com/fim/334x500/ 334w, https://images.fastspot.com/fim/200x300/ 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/" alt="" loading="lazy" width="200" height="300">

                                    <div class="feature_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"1051309627","type":"vimeo","title":"Video Title","display":"background","autoplay":true,"playerVars":{}}' data-target=''>
                                        <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/1051309627" aria-label="Play Video Title">

                                            <svg class="icon icon_video_play">
                                                <use href="/images/icons.svg#video_play" />
                                            </svg>

                                        </a>
                                        <div class="lazy_video_iframe_wrap">
                                            <div class="lazy_video_iframe_target js-iframe-target"></div>
                                        </div>
                                    </div>
                                    <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 active" 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" 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 }}">
									{% include '@partial-image' with {
										class: 'feature_media_desktop',
										alt: alt,
										image: feature.image_desktop,
										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'
										]
									} %}

									{# 111025652 #}
									{% include "@partial-lazy-video" with {
										class: 'feature',
										id: '1051309627',
										type: 'vimeo',
										title: 'Video Title',
										display: "background",
										autoplay: true,
										playerVars: {}
									} %}
									
									<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 active" 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" 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.