Paul Smith's College Component Library

Call To Action Background 

<!-- Call to Action Background -->
<div class="cta_bg">
    <div class="cta_bg_media">

        <img class="cta_bg_image" srcset="https://images.fastspot.com/paul-smiths-college/1440x810/16 1440w, https://images.fastspot.com/paul-smiths-college/1220x686/16 1220w, https://images.fastspot.com/paul-smiths-college/980x552/16 980w, https://images.fastspot.com/paul-smiths-college/740x416/16 740w, https://images.fastspot.com/paul-smiths-college/500x282/16 500w, https://images.fastspot.com/paul-smiths-college/300x169/16 300w" sizes="100vw" src="https://images.fastspot.com/paul-smiths-college/300x169/16" alt="" loading="lazy" width="300" height="169">
    </div>
    <div class="cta_bg_content">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="cta_bg_content_inner">
                    <h2 class="cta_bg_title">Get to Know Us</h2>
                    <div class="cta_bg_group">
                        <div class="cta_bg_description">
                            <p>Nunc eget nisi vel nunc tempor fauci bus a vel libero. Morbi quis dapibus augue, in sodales orci.</p>
                        </div>
                        <div class="cta_bg_action">

                            <a href="#" class="base_link">
                                <span class="base_link_inner">
                                    <span class="base_link_label">Vibes & Values</span><span class="icon_nowrap base_link_icon" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_right" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Call to Action Background -->
 
{#
	{% include '@component-call-to-action-background' with {
		title: 'Title',
		label: 'Label',
		description: 'Description',
		link: {
			url: '#',
			label: 'label',
			aria: 'aria',
			icon: ''
		}
	} %}
#}

<!-- Call to Action Background -->
<div class="cta_bg">
	<div class="cta_bg_media">
		{% include '@partial-image' with {
			class: 'cta_bg',
			alt: alt,
			image: image,
			loading: 'lazy',
			sources: [
				img.wide.xlrg,
				img.wide.lrg,
				img.wide.med,
				img.wide.sml,
				img.wide.xsml,
				img.wide.xxsml
			],
			sizes: [
				"100vw"
			]
		} %}
	</div>
	<div class="cta_bg_content">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="cta_bg_content_inner">
					<h2 class="cta_bg_title">{{ title }}</h2>
					<div class="cta_bg_group">
						<div class="cta_bg_description">
							<p>{{ description }}</p>
						</div>
						<div class="cta_bg_action">
							{% include '@partial-link' with {
								class: 'base',
								title: link.label,
								url: link.url,
								icon: 'chevron_right',
								nowrap: true
							} %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action Background -->

No notes defined.