Flint Institute of Music Component Library

Visual Callout: Plum 

<!-- Call to Action Featured -->
<div class="cta_featured theme_plum">
    <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/2" width="555" height="740">
                        <source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x416/2" width="740" height="416">
                        <img class="cta_featured_image" src="//images.fastspot.com/fim/x/2" 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 -->
 
{#
	{% include '@component-call-to-action-featured' %}
#}

<!-- Call to Action Featured -->
<div class="cta_featured{% if theme %} theme_{{ theme }}{% endif %}">
	<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">{{ lead }}</h2>
					<h3 class="cta_featured_title">{{ title }}</h3>
				</div>
				<div class="cta_featured_media">
					{% include '@partial-picture' with {
						class: 'cta_featured',
						alt: '',
						image: image,
						loading: 'lazy',
						sources: {
							'980px': img.portraitFull.sml,
							'0px': img.wide.sml,
						}
					} %}
				</div>
				<div class="cta_featured_body">
					<div class="cta_featured_header cta_featured_header_lg">
						<h2 class="cta_featured_lead">{{ lead }}</h2>
						<h3 class="cta_featured_title">{{ title }}</h3>
					</div>
					<div class="cta_featured_description">
						<p>{{ description }}</p>
					</div>
					<div class="cta_featured_action">
						{% include '@partial-link' with {
							class: 'cta_featured',
							title: link.label,
							url: link.url,
							icon: link.icon,
							aria: link.aria
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action Featured -->

No notes defined.