Le Moyne Component Library

Hero 

<div class="hero">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-lg-justify-center">
            <div class="hero_inner">
                <h1 class="hero_title" id="page_title">We strive for <em>greatness</em>, always through the eyes of <em>goodness</em>.</h1>
            </div>
        </div>
    </div>
    <div class="hero_media">
        <div class="hero_media_inner">
            <figure class="hero_figure">

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

            <div class="js-background-video-wrapper hero_video" data-background-video='{"display":"background","id":"258133523","type":"vimeo","title":"Fastspot Moments","autoplay":true,"playButton":".js-hero-video-play-button","pauseButton":".js-hero-video-pause-button"}'>
                <div class=" hero_video_iframe_wrap">
                    <div class=" hero_video_iframe_target js-iframe-target"></div>
                </div>

                <div class="hero_video_controls">

                    <button class="hero_video_play_button js-hero-video-play-button">
                        <span class="hero_video_play_button_inner">
                            <span class="hero_video_play_button_label">Play Video</span>
                            <span class="hero_video_play_button_icon" aria-hidden="true">

                                <svg class="icon icon_play">
                                    <use href="/images/icons.svg#play" />
                                </svg>

                            </span>
                        </span>
                    </button>

                    <button class="hero_video_pause_button js-hero-video-pause-button">
                        <span class="hero_video_pause_button_inner">
                            <span class="hero_video_pause_button_label">Pause Video</span>
                            <span class="hero_video_pause_button_icon" aria-hidden="true">

                                <svg class="icon icon_pause">
                                    <use href="/images/icons.svg#pause" />
                                </svg>

                            </span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include "@partial-hero" with {
		title: 'We strive for <em>greatness</em>, always through the eyes of <em>goodness</em>.',
		image: '',
		video: {
			type: 'vimeo',
			id: '',
			title: ''
		},
	} %}
#}

<div class="hero">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-lg-justify-center">
			<div class="hero_inner">
				<h1 class="hero_title" id="page_title">{{ title }}</h1>
			</div>
		</div>
	</div>
	<div class="hero_media">
		<div class="hero_media_inner">
			{% if image %}
				<figure class="hero_figure">
					{% include '@partial-image' with {
						class: 'hero',
						alt: '',
						image: '12',
						loading: 'eager',
						sources: [
							img.wide.xlrg,
							img.wide.lrg,
							img.wide.med,
							img.wide.sml,
							img.wide.xsml,
							img.wide.xxsml
						]
					} %}
				</figure>
			{% endif %}
			{% if video %}
				{% set video_options = {
					display: "background",
					id: video.id,
					type: video.type,
					title: video.title,
					autoplay: true,
					playButton: ".js-hero-video-play-button",
					pauseButton: ".js-hero-video-pause-button",
				} %}

				<div class="js-background-video-wrapper hero_video" data-background-video='{{ video_options|json_encode }}'>
					<div class=" hero_video_iframe_wrap">
						<div class=" hero_video_iframe_target js-iframe-target"></div>
					</div>

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

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

No notes defined.