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="fs-row">
        <div class="fs-cell">
            <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_link">

                    <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#arrow_right" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </div>
            </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') %}

<!-- Call to Action -->
<section
	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'
		]
	} %}
	<div class="fs-row">
		<div class="fs-cell">
			<div class="call_to_action_inner">
				<div class="call_to_action_group">
					<h2 class="call_to_action_title" id="{{ id }}_title">
						{{ title }}
					</h2>
					<div class="call_to_action_description" id="{{ id }}_description">
						<p>{{ description }}</p>
					</div>
				</div>
				<div class="call_to_action_link">
					{% include '@partial-link' with {
						classes: {
							base: 'button_filled',
							modifiers: [
								'large',
								'white'
							]
						},
						id: null,
						title: link.title,
						url: link.url,
						icon: link.icon,
						attributes: {
							'aria-label': link.aria_label
						}
					} %}
				</div>
			</div>
		</div>
	</div>
</section>
<!-- END: Call to Action -->

No notes defined.