Le Moyne Component Library

Visual CTA: Image 

<!-- Video Embed -->
<div class="visual_cta ">
    <div class="visual_cta_inner">
        <div class="visual_cta_bg">
            <figure class="visual_cta_figure">

                <img class="visual_cta_image" srcset="https://images.fastspot.com/le-moyne/1440x810/10 1440w, https://images.fastspot.com/le-moyne/1220x686/10 1220w, https://images.fastspot.com/le-moyne/980x552/10 980w, https://images.fastspot.com/le-moyne/740x416/10 740w, https://images.fastspot.com/le-moyne/500x282/10 500w, https://images.fastspot.com/le-moyne/300x169/10 300w" src="https://images.fastspot.com/le-moyne/300x169/10" alt="" loading="lazy" width="300" height="169">
            </figure>

        </div>

        <div class="visual_cta_content">
            <div class="visual_cta_header">
                <div class="visual_cta_bg">
                    <figure class="visual_cta_figure">

                        <img class="visual_cta_image" srcset="https://images.fastspot.com/le-moyne/1440x810/10 1440w, https://images.fastspot.com/le-moyne/1220x686/10 1220w, https://images.fastspot.com/le-moyne/980x552/10 980w, https://images.fastspot.com/le-moyne/740x416/10 740w, https://images.fastspot.com/le-moyne/500x282/10 500w, https://images.fastspot.com/le-moyne/300x169/10 300w" src="https://images.fastspot.com/le-moyne/300x169/10" alt="" loading="lazy" width="300" height="169">
                    </figure>

                </div>

                <div class="visual_cta_header_wrapper">
                    <div class="visual_cta_header_inner">
                        <h2 class="visual_cta_pretitle">Le Moyne Dolphins Go Division I</h2>
                        <p class="visual_cta_title">'Phins Up!</p>
                    </div>
                </div>
            </div>
            <div class="visual_cta_body">
                <div class="visual_cta_body_wrapper">
                    <div class="visual_cta_body_inner">
                        <p class="visual_cta_text">Being a dolphin means never backing down, fighting for every competitive edge and always playing through the final whistle with integrity and respect.</p>

                        <a href="#" class="visual_cta_link">
                            <span class="visual_cta_link_inner">
                                <span class="visual_cta_link_label">Join us as we go D1</span>
                                <span class="visual_cta_link_icon" aria-hidden="true">

                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>

                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Video Embed -->
 
{#
	{% include '@component-visual-cta' with {
		title: 'Sed ornare gravida.',
		pretitle: 'Nulla maximus commodo magna.',
		text: 'Suspendisse potenti. Pellentesque viverra iaculis tortor, eget suscipit sapien ullamcorper.',
		link: {
			title: 'Sed velit.',
			url: '#',
			target: '_blank'
		},
		image: '1',
		video: {
			type: '',
			id: '',
			title: ''
		}
	} %}
#}

{% set video_bg %}
	{% if video %}
		{% set video_options = {
			display: "background",
			id: video.id,
			type: video.type,
			title: video.title,
			autoplay: true,
			playButton: ".js-visual-cta-bg-video-play-button",
			pauseButton: ".js-visual-cta-bg-video-pause-button",
		} %}

		<div class="js-background-video-wrapper visual_cta_bg_video" data-background-video='{{ video_options|json_encode }}'>
			<div class="visual_cta_bg_video_iframe_wrap">
				<div class="visual_cta_bg_video_iframe_target js-iframe-target"></div>
			</div>

			<div class="visual_cta_bg_video_controls">
				{% render '@partial-button' with {
					class: 'visual_cta_bg_video_play',
					title: 'Play Video',
					icon: 'play',
					js: true
				} %}

				{% render "@partial-button" with {
					class: 'visual_cta_bg_video_pause',
					title: 'Pause Video',
					icon: 'pause',
					js: true
				} %}
			</div>
		</div>
	{% endif %}
{% endset %}

<!-- Video Embed -->
<div class="visual_cta {{video ? 'visual_cta_video'}}">
	<div class="visual_cta_inner">
		<div class="visual_cta_bg">
			<figure class="visual_cta_figure">
				{% include '@partial-image' with {
					class: 'visual_cta',
					alt: '',
					image: image,
					loading: 'lazy',
					sources: [
						img.wide.xlrg,
						img.wide.lrg,
						img.wide.med,
						img.wide.sml,
						img.wide.xsml,
						img.wide.xxsml
					]
				} %}
			</figure>
			{{ video_bg }}
		</div>

		<div class="visual_cta_content">
			<div class="visual_cta_header">
				<div class="visual_cta_bg">
					<figure class="visual_cta_figure">
						{% include '@partial-image' with {
							class: 'visual_cta',
							alt: '',
							image: image,
							loading: 'lazy',
							sources: [
								img.wide.xlrg,
								img.wide.lrg,
								img.wide.med,
								img.wide.sml,
								img.wide.xsml,
								img.wide.xxsml
							]
						} %}
					</figure>
					{{ video_bg }}
				</div>

				<div class="visual_cta_header_wrapper">
					<div class="visual_cta_header_inner">
						{% if pretitle %}
							<h2 class="visual_cta_pretitle">{{ pretitle }}</h2>
							<p class="visual_cta_title">{{ title }}</p>
						{% else %}
							<h2 class="visual_cta_title">{{ title }}</h2>
						{% endif %}
					</div>
				</div>
			</div>
			<div class="visual_cta_body">
				<div class="visual_cta_body_wrapper">
					<div class="visual_cta_body_inner">
						<p class="visual_cta_text">{{ text }}</p>
						{% if link %}
							{% render '@partial-link' with {
								class: 'visual_cta',
								title: link.title,
								url: link.url,
								icon: 'caret_right',
							} %}
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Video Embed -->

No notes defined.