Flint Institute of Music Component Library

Call To Action Background 

<!-- Call to Action -->
<div class="cta_background">
    <div class="cta_background_inner">
        <div class="cta_background_header">
            <h2 class="cta_background_title">Getting Here</h2>
        </div>
        <div class="cta_background_description">
            <p>Learn more about lorem ipsum ipsum dolor sit amet lorem ipsum ipsum dolor sit amet lorem ipsum ipsum dolor sit amet.</p>
        </div>
        <div class="cta_background_action">

            <a href="#" class="cta_background_link" aria-label="Link Aria">
                <span class="cta_background_link_inner">
                    <span class="cta_background_link_label">Location information</span>
                    <span class="cta_background_link_icon" aria-hidden="true">

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

                    </span>
                </span>
            </a>
        </div>
    </div>

    <img class="cta_background_image" srcset="https://images.fastspot.com/fim/740x494/ 740w, https://images.fastspot.com/fim/500x334/ 500w" src="https://images.fastspot.com/fim/500x334/" alt="" loading="lazy" width="500" height="334">
</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_background">
	<div class="cta_background_inner">
		<div class="cta_background_header">
			<h2 class="cta_background_title">{{ title }}</h2>
		</div>
		<div class="cta_background_description">
			<p>{{ description }}</p>
		</div>
		<div class="cta_background_action">
			{% include '@partial-link' with {
				class: 'cta_background',
				title: link.label,
				url: link.url,
				icon: link.icon,
				aria: link.aria
			} %}
		</div>
	</div>
	{% include '@partial-image' with {
		class: 'cta_background',
		alt: '',
		image: item.image,
		loading: 'lazy',
		sources: [
			img.classic.sml,
			img.classic.xsml,
		]
	} %}
</div>
<!-- END: Call to Action -->

No notes defined.