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__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>
    </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'
		]
	} only %}
	<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__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>
	</div>
</section>
<!-- END: Call to Action -->

No notes defined.