Framework Component Library

Call To Action 

<!-- Call to Action -->
<section class="call-to-action" id="call-to-action-1" aria-labelledby="call-to-action-1__title" aria-describedby="call-to-action-1__description">

    <img class="call-to-action__image" srcset="https://images.fastspot.com/framework/1440x810/3 1440w, https://images.fastspot.com/framework/1220x686/3 1220w, https://images.fastspot.com/framework/980x552/3 980w, https://images.fastspot.com/framework/740x416/3 740w, https://images.fastspot.com/framework/500x282/3 500w, https://images.fastspot.com/framework/300x169/3 300w" sizes="100vw" src="https://images.fastspot.com/framework/300x169/3" alt="" loading="lazy" width="300" height="169">
    <div class="fw-container">
        <div class="call-to-action__inner">
            <div class="call-to-action__group">
                <h2 class="call-to-action__title" id="call-to-action-1__title">Call to Action</h2>
                <div class="call-to-action__description" id="call-to-action-1__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>
            <div class="call-to-action__action">

                <a class="button-filled
 		 			button-filled--large
 		 			button-filled--white
 				" aria-label="" href="#">
                    <span class="button-filled__inner"> <span class="button-filled__label">Venenatis Vitae</span>
                        <span class="button-filled__icon" aria-hidden="true">
                            <svg class="icon icon--arrow-right">
                                <use href="/images/icons.svg?1.0.0#arrow-right" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</section>
<!-- END: Call to Action -->
 
{#
	{% include '@component-call-to-action' with {
		image: '1',
		title: 'Title',
		description: 'Description',
		link: {
			url: '#',
			title: 'label',
			aria_label: 'aria',
			icon: ''
		}
	} %}
#}

{% set id = uniqid('call-to-action') %}
{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set base_tag = has_group_title ? 'section' : 'div' %}
{% set group_heading_tag = 'h' ~ (heading_level) %}

<!-- Call to Action -->
<{{ base_tag }}
	class="call-to-action"
	id="{{ id }}"
	aria-labelledby="{{ id ~ '__title' }}"
	aria-describedby="{{ id ~ '__description' }}"
>
	{% include '@partial-image' with {
		class: 'call-to-action__image',
		image: image,
		alt: '',
		loading: 'lazy',
		crop: 'wide',
		max: 'xlrg',
		sizes: [
			'100vw'
		]
	} only %}
	<div class="fw-container">
		<div class="call-to-action__inner">
			<div class="call-to-action__group">
				<{{ group_heading_tag }} class="call-to-action__title" id="{{ id ~ '__title' }}">
					{{- group_title -}}
				</{{ group_heading_tag }}>
				<div class="call-to-action__description" id="{{ id ~ '__description' }}">
					<p>{{ group_description }}</p>
				</div>
			</div>
			<div class="call-to-action__action">
				{% include '@partial-link' with {
					classes: {
						base: 'button-filled',
						modifiers: [
							'large',
							'white'
						]
					},
					title: link.title,
					url: link.url,
					icon: 'arrow-right',
					attributes: {
						'aria-label': link.aria_label
					}
				} only %}
			</div>
		</div>
	</div>
</{{ base_tag }}>
<!-- END: Call to Action -->

No notes defined.