Flint Institute of Music Component Library

Callout Row: Royal Blue 

<!-- Call to Action -->
<div class="cta_full theme_royal_blue">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="cta_full_inner">
                <div class="cta_full_header">
                    <h2 class="cta_full_title">Call to Action Title Lorem Ipsum Dolor</h2>
                </div>
                <div class="cta_full_body">
                    <div class="cta_full_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_full_action">

                        <a href="#" class="cta_full_link" aria-label="Link Aria">
                            <span class="cta_full_link_inner">
                                <span class="cta_full_link_label">Learn More</span>
                                <span class="cta_full_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 -->
 
{#
	{% include '@component-call-to-action' with {
		description: 'Description',
		link: {
			url: '#',
			label: 'Link',
			aria: 'aria',
			icon: ''
		}
	} %}
#}

<!-- Call to Action -->
<div class="cta_full{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="cta_full_inner">
				<div class="cta_full_header">
					<h2 class="cta_full_title">{{ title }}</h2>
				</div>
				<div class="cta_full_body">
					<div class="cta_full_description">
						<p>{{ description }}</p>
					</div>
					<div class="cta_full_action">
						{% include '@partial-link' with {
							class: 'cta_full',
							title: link.label,
							url: link.url,
							icon: link.icon,
							aria: link.aria
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->

No notes defined.