Flint Institute of Music Component Library

Sponsors: No Supporting 

<section class="sponsors js-sponsors" aria-labelledby="sponsors-5-title">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="sponsors_inner">
                <h2 class="visually_hide" id="sponsors-5-title">Sponsors</h2>
                <div class="sponsors_major">
                    <h3 class="sponsors_title" id="sponsors-5-title-major">Major Funding Provided By</h3>
                    <ul class="sponsors_major_list" aria-labelledby="sponsors-5-title-major">
                        <li class="sponsors_major_item">
                            <a class="sponsors_sponsor_link" href="https://www.whiting.org/" target="_blank" rel="noopener noreferrer">
                                <div class="sponsors_name sponsors_name_major js-sponsors-name">
                                    <span class="visually_hide">Whiting Foundation</span>
                                    <div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
                                        <span class="sponsors_name_word js-sponsors-word">Whiting</span>
                                        <span class="sponsors_name_word js-sponsors-word">Foundation</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="sponsors_major_item">
                            <a class="sponsors_sponsor_link" href="#" target="_blank" rel="noopener noreferrer">
                                <img src="https://images.fastspot.com/fim/740x555/1" alt="Charles Stewart Mott Foundation" width="740" height="555" style="--logo-width: 740; --logo-height: 555" class="sponsors_logo sponsors_logo_major" loading="lazy" sizes="auto">
                            </a>
                        </li>
                        <li class="sponsors_major_item">
                            <img src="https://images.fastspot.com/fim/654x980/2" alt="Community Foundation | Greater Flint" width="654" height="980" style="--logo-width: 654; --logo-height: 980" class="sponsors_logo sponsors_logo_major" loading="lazy" sizes="auto">
                        </li>
                    </ul>
                </div>

                <div class="sponsors_callout">
                    <figure class="sponsors_callout_figure">
                        <img class="sponsors_callout_image" srcset="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="" style="--logo-width: 300; --logo-height: 169" loading="lazy" width="300" height="169">
                    </figure>
                    <div class="sponsors_callout_content">
                        <h3 class="sponsors_callout_title">Genesee County Millage Funding</h3>
                        <p class="sponsors_callout_description">The Genesee County Arts Education & Cultural Enrichment Millage provides major funding for our educational pathways, outreach programs, and community engagement initiatives.</p>
                        <div class="sponsors_callout_cta">

                            <a href="#" class="cta_link">
                                <span class="cta_link_inner">
                                    <span class="cta_link_label">Read More About Millage Benefits</span>
                                    <span class="cta_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>
</section>
 
{% set id = uniqid('sponsors') %}
{% set _logo_sizes = [
	{
		width: 500,
		height: 500,
	},
	{
		width: 740,
		height: 555,
	},
	{
		width: 654,
		height: 980,
	},
	{
		width: 300,
		height: 129,
	},
	{
		width: 740,
		height: 416,
	},
	{
		width: 500,
		height: 500,
	},
	{
		width: 740,
		height: 555,
	},
	{
		width: 654,
		height: 980,
	},
	{
		width: 300,
		height: 129,
	},
	{
		width: 740,
		height: 416,
	},
	{
		width: 500,
		height: 500,
	},
	{
		width: 740,
		height: 555,
	},
	{
		width: 654,
		height: 980,
	},
	{
		width: 300,
		height: 129,
	},
	{
		width: 740,
		height: 416,
	},
] %}

<section class="sponsors js-sponsors" aria-labelledby="{{ id }}-title">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="sponsors_inner">
				<h2 class="visually_hide" id="{{ id }}-title">Sponsors</h2>
				{% if major_sponsors %}
					<div class="sponsors_major">
						<h3 class="sponsors_title" id="{{ id }}-title-major">{{ major_title }}</h3>
						<ul class="sponsors_major_list" aria-labelledby="{{ id }}-title-major">
							{% for sponsor in major_sponsors %}
								{% set _sizes = _logo_sizes[loop.index0] %}
								<li class="sponsors_major_item">
									{% if sponsor.url %}
										<a class="sponsors_sponsor_link" href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer">
									{% endif %}
									{% if sponsor.image is not null %}
										<img
											src="https://images.fastspot.com/{{ config.images }}/{{ _sizes.width }}x{{ _sizes.height }}/{{ sponsor.image }}"
											alt="{{ sponsor.name }}"
											width="{{ _sizes.width }}"
											height="{{ _sizes.height }}"
											style="--logo-width: {{ _sizes.width }}; --logo-height: {{ _sizes.height }}"
											class="sponsors_logo sponsors_logo_major"
											loading="lazy"
											sizes="auto"
										>
									{% else %}
										<div class="sponsors_name sponsors_name_major js-sponsors-name">
											<span class="visually_hide">{{ sponsor.name }}</span>
											<div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
												{% set words = sponsor.name|split(' ') %}
												{% for word in words %}
													<span class="sponsors_name_word js-sponsors-word">{{ word }}</span>
												{% endfor %}
											</div>
										</div>
									{% endif %}
									{% if sponsor.url %}
										</a>
									{% endif %}
								</li>
							{% endfor %}
						</ul>
					</div>
				{% endif %}

				{% if supporting_sponsors %}
					<div class="sponsors_supporting">
						<h3 class="sponsors_title" id="{{ id }}-title-supporting">{{ supporting_title }}</h3>
						<div class="sponsors_marquee js-sponsors-marquee">
							<ul class="sponsors_supporting_list js-sponsors-marquee-inner" aria-labelledby="{{ id }}-title-supporting">
								{% for sponsor in supporting_sponsors %}
									{% set _sizes = _logo_sizes[loop.index0] %}
									<li class="sponsors_supporting_item js-sponsors-marquee-item">
										{% if sponsor.url %}
											<a class="sponsors_sponsor_link" href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer">
										{% endif %}
										{% if sponsor.image is not null %}
											<img
												src="https://images.fastspot.com/{{ config.images }}/{{ _sizes.width }}x{{ _sizes.height }}/{{ sponsor.image }}"
												alt="{{ sponsor.name }}"
												width="{{ _sizes.width }}"
												height="{{ _sizes.height }}"
												style="--logo-width: {{ _sizes.width }}; --logo-height: {{ _sizes.height }}"
												class="sponsors_logo sponsors_logo_supporting"
												loading="lazy"
												sizes="auto"
											>
										{% else %}
											<div class="sponsors_name sponsors_name_supporting js-sponsors-name">
												<span class="visually_hide">{{ sponsor.name }}</span>
												<div class="sponsors_name_words js-sponsors-words" aria-hidden="true">
													{% set words = sponsor.name|split(' ') %}
													{% for word in words %}
														<span class="sponsors_name_word js-sponsors-word">{{ word }}</span>
													{% endfor %}
												</div>
											</div>
										{% endif %}
										{% if sponsor.url %}
											</a>
										{% endif %}
									</li>
								{% endfor %}
							</ul>
						</div>
					</div>
				{% endif %}
				{% if callout and callout.enabled %}
					<div class="sponsors_callout">
						<figure class="sponsors_callout_figure">
							<img
								class="sponsors_callout_image"
								srcset="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=""
								style="--logo-width: 300; --logo-height: 169"
								loading="lazy"
								width="300"
								height="169"
							>
						</figure>
						<div class="sponsors_callout_content">
							<h3 class="sponsors_callout_title">{{ callout.title }}</h3>
							<p class="sponsors_callout_description">{{ callout.description }}</p>
							{% if callout.link %}
								<div class="sponsors_callout_cta">
									{% include "@partial-link" with {
										title: callout.link.title,
										url: callout.link.url,
										class: 'cta',
										icon: 'chevron_right',
									} %}
								</div>
							{% endif %}
						</div>
					</div>
				{% endif %}

			</div>
		</div>
	</div>
</section>

No notes defined.