Flint Institute of Music Component Library

Visual Callout - Rounded: Sea Green 

<section class="cta_rounded theme_sea_green layout_image_right" aria-labelledby="cta-rounded-6-title">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="cta_rounded_inner">
                <div class="cta_rounded_content">
                    <p class="cta_rounded_eyebrow">Spotlight</p>

                    <h2 class="cta_rounded_title" id="cta-rounded-6-title">Explore the 2026-27 FIM season!</h2>

                    <p class="cta_rounded_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tincidunt risus, id volutpat felis. Nam eget rutrum tortor.</p>

                    <div class="cta_rounded_cta">

                        <a href="#" class="cta_link">
                            <span class="cta_link_inner">
                                <span class="cta_link_label">Tickets & Events</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>

                <figure class="cta_rounded_figure">

                    <img class="cta_rounded_image" srcset="https://images.fastspot.com/fim/980x654/1 980w, https://images.fastspot.com/fim/740x494/1 740w, https://images.fastspot.com/fim/500x334/1 500w, https://images.fastspot.com/fim/300x200/1 300w" sizes="(min-width: 1420px) 618px, (min-width: 1220px) 528px, (min-width: 980px) 418px, (min-width: 740px) 260px, (min-width: 420px) calc(96vw - 39px), calc(24vw + 249px)" src="https://images.fastspot.com/fim/300x200/1" alt="" loading="lazy" width="300" height="200">
                </figure>
            </div>
        </div>
    </div>
</section>
 
{% set id = uniqid('cta-rounded') %}

<section class="cta_rounded theme_{{ theme|default('royal_blue') }} layout_{{ layout|default('image_right') }}" aria-labelledby="{{ id }}-title">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="cta_rounded_inner">
				<div class="cta_rounded_content">
					{% if eyebrow %}
						<p class="cta_rounded_eyebrow">{{ eyebrow }}</p>
					{% endif %}

					<h2 class="cta_rounded_title" id="{{ id }}-title">{{ title }}</h2>

					{% if description %}
						<p class="cta_rounded_description">{{ description }}</p>
					{% endif %}

					{% if cta %}
						<div class="cta_rounded_cta">
							{% include "@partial-link" with {
								class: 'cta',
								title: cta.title,
								url: cta.url,
								icon: 'chevron_right',
							} %}
						</div>
					{% endif %}
				</div>

				<figure class="cta_rounded_figure">
					{% include '@partial-image' with {
						class: 'cta_rounded',
						image: image,
						alt: '',
						sources: [
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml,
						],
						loading: 'lazy',
						sizes: [
							'(min-width: 1420px) 618px',
							'(min-width: 1220px) 528px',
							'(min-width: 980px) 418px',
							'(min-width: 740px) 260px',
							'(min-width: 420px) calc(96vw - 39px)',
							'calc(24vw + 249px)',
						]
					} %}
				</figure>
			</div>
		</div>
	</div>
</section>

No notes defined.