Framework Component Library

Call To Action 

<!-- Call to Action -->
<div class="cta">

    <img class="cta_image" srcset="" src="" alt="" loading="lazy" width="" height="">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="cta_inner">
                <div class="cta_description">
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                </div>
                <div class="cta_action">

                    <a href="#" class="cta_link" aria-label="Link Aria">
                        <span class="cta_link_inner">
                            <span class="cta_link_label">Donate Now</span>
                            <span class="cta_link_icon" aria-hidden="true">

                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>

                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Call to Action -->
 
{#
	{% include '@component-call-to-action' with {
		description: 'Description',
		link: {
			url: '#',
			label: 'label',
			aria: 'aria',
			icon: ''
		}
	} %}
#}

<!-- Call to Action -->
<div class="cta">
	{% include '@partial-image' with {
		class: 'cta',
		alt: '',
		image: image,
		loading: 'lazy',
		sources: [
			img.wide.xxlrg,
			img.wide.xlrg,
			img.wide.lrg,
			img.wide.med,
			img.wide.sml,
			img.wide.xsml,
			img.wide.xxsml
		]
	} %}
	<div class="fs-row">
		<div class="fs-cell">
			<div class="cta_inner">
				<div class="cta_description">
					<p>{{ description }}</p>
				</div>
				<div class="cta_action">
					{% include '@partial-link' with {
						class: 'cta',
						title: link.label,
						url: link.url,
						icon: link.icon,
						aria: link.aria
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->

No notes defined.