Flint Institute of Music Component Library

Callout Side By Side 

<!-- Call to Action -->
<div class="cta_pair" style="--leftBackground: #E00083; --rightBackground: #5ADDEF;">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="cta_pair_inner">
                <div class="cta_pair_items">
                    <div class="cta_pair_item theme_raspberry">
                        <h2 class="cta_pair_title">What’s On Stage</h2>
                        <div class="cta_pair_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_pair_actions">

                            <a href="#" class="cta_pair_link" aria-label="Link Aria">
                                <span class="cta_pair_link_inner">
                                    <span class="cta_pair_link_label">What's On</span>
                                    <span class="cta_pair_link_icon" aria-hidden="true">

                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_right" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                            <a href="#" class="cta_pair_link" aria-label="Link Aria">
                                <span class="cta_pair_link_inner">
                                    <span class="cta_pair_link_label">Get Tickets</span>
                                    <span class="cta_pair_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 class="cta_pair_item theme_sea_green">
                        <h2 class="cta_pair_title">Planning Your Visit</h2>
                        <div class="cta_pair_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_pair_actions">

                            <a href="#" class="cta_pair_link" aria-label="Link Aria">
                                <span class="cta_pair_link_inner">
                                    <span class="cta_pair_link_label">Learn More</span>
                                    <span class="cta_pair_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>
</div>
<!-- END: Call to Action -->
 
{#
	{% include '@component-call-to-action' with {
		description: 'Description',
		link: {
			url: '#',
			label: 'Link',
			aria: 'aria',
			icon: ''
		}
	} %}
#}

{% if left.theme == 'raspberry' %}
	{% set leftHex = '#E00083' %}
{% elseif left.theme == 'royal_blue' %}
	{% set leftHex = '#5666F5' %}
{% elseif left.theme == 'plum' %}
	{% set leftHex = '#901D8A' %}
{% elseif left.theme == 'sea_green' %}
	{% set leftHex = '#5ADDEF' %}
{% endif %}

{% if right.theme == 'raspberry' %}
	{% set rightHex = '#E00083' %}
{% elseif right.theme == 'royal_blue' %}
	{% set rightHex = '#5666F5' %}
{% elseif right.theme == 'plum' %}
	{% set rightHex = '#901D8A' %}
{% elseif right.theme == 'sea_green' %}
	{% set rightHex = '#5ADDEF' %}
{% endif %}

<!-- Call to Action -->
<div class="cta_pair" style="--leftBackground: {{ leftHex }}; --rightBackground: {{ rightHex }};">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="cta_pair_inner">
				<div class="cta_pair_items">
					<div class="cta_pair_item{% if left.theme %} theme_{{ left.theme }}{% endif %}">
						<h2 class="cta_pair_title">{{ left.title }}</h2>
						<div class="cta_pair_description">
							<p>{{ left.description }}</p>
						</div>
						{% if left.links %}
							<div class="cta_pair_actions">
								{% for link in left.links %}
									{% include '@partial-link' with {
										class: 'cta_pair',
										title: link.label,
										url: link.url,
										icon: link.icon,
										aria: link.aria
									} %}
								{% endfor %}
							</div>
						{% endif %}
					</div>
					<div class="cta_pair_item{% if right.theme %} theme_{{ right.theme }}{% endif %}">
						<h2 class="cta_pair_title">{{ right.title }}</h2>
						<div class="cta_pair_description">
							<p>{{ right.description }}</p>
						</div>
						{% if right.links %}
							<div class="cta_pair_actions">
								{% for link in right.links %}
									{% include '@partial-link' with {
										class: 'cta_pair',
										title: link.label,
										url: link.url,
										icon: link.icon,
										aria: link.aria
									} %}
								{% endfor %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->

No notes defined.