Paul Smith's Component Library

Landing Feature 

<div class="landing_feature">
    <div class="landing_feature_media">
        <figure class="landing_feature_figure">

            <picture class="landing_feature_picture">
                <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/generic/1440x810/3" width="1440" height="810">
                <source media="(min-width: 980px)" srcset="https://images.fastspot.com/generic/1220x686/3" width="1220" height="686">
                <source media="(min-width: 740px)" srcset="https://images.fastspot.com/generic/980x735/3" width="980" height="735">
                <source media="(min-width: 500px)" srcset="https://images.fastspot.com/generic/740x740/3" width="740" height="740">
                <img class="landing_feature_image" src="//images.fastspot.com/generic/375x500/3" alt="" loading="eager" width="375" height="500">
            </picture>
        </figure>
        <div class="js-home-feature-video-wrapper home_feature_bg_video" data-background-video='{"display":"background","id":"288344114","type":"vimeo","title":"Vimeo Sample","autoplay":true}'>
            <div class="home_feature_bg_video_iframe_wrap">
                <div class="home_feature_bg_video_iframe_target js-iframe-target"></div>
            </div>
        </div>
        <div class="home_feature_bg_video_controls">

            <button class="home_feature_bg_video_play_button js-home-feature-bg-video-play-button">
                <span class="home_feature_bg_video_play_button_inner">
                    <span class="home_feature_bg_video_play_button_label">Play Video</span>
                    <span class="home_feature_bg_video_play_button_icon" aria-hidden="true">

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

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

            <button class="home_feature_bg_video_pause_button js-home-feature-bg-video-pause-button">
                <span class="home_feature_bg_video_pause_button_inner">
                    <span class="home_feature_bg_video_pause_button_label">Pause Video</span>
                    <span class="home_feature_bg_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 class="landing_feature_content">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="landing_feature_content_inner">
                    <h1 class="landing_feature_title">Experience The <br>College of The Adirondacks at our <span>Open House</span></h1>
                </div>
                <div class="landing_feature_action">
                    <figure class="landing_feature_action_bg_figure">

                        <img class="landing_feature_action_bg_image" srcset="https://images.fastspot.com/generic/740x740/1 740w, https://images.fastspot.com/generic/500x500/1 500w, https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" sizes="(min-width: 980px) 240px" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
                    </figure>

                    <a href="#register" class="landing_feature_action_link js-landing-action-link">Register Now</a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="landing_feature">
	<div class="landing_feature_media">
		<figure class="landing_feature_figure">
			{% include '@partial-picture' with {
				class: 'landing_feature',
				image: image,
				alt: '',
				loading: 'eager',
				default: img.portraitFull.xsml,
				sources: {
					'1220px': img.wide.xlrg,
					'980px': img.wide.lrg,
					'740px': img.full.med,
					'500px': img.square.sml
				}
			} %}
		</figure>
		{% if video %}
			{% set video_options = {
				display: "background",
				id: video.id,
				type: video.type,
				title: video.title,
				autoplay: true
			} %}
			<div class="js-home-feature-video-wrapper home_feature_bg_video" data-background-video='{{ video_options|json_encode }}'>
				<div class="home_feature_bg_video_iframe_wrap">
					<div class="home_feature_bg_video_iframe_target js-iframe-target"></div>
				</div>
			</div>
			<div class="home_feature_bg_video_controls">
				{% render '@partial-button' with {
					class: 'home_feature_bg_video_play',
					title: 'Play Video',
					icon: 'play',
					js: true
				} %}

				{% render "@partial-button" with {
					class: 'home_feature_bg_video_pause',
					title: 'Pause Video',
					icon: 'pause',
					js: true
				} %}
			</div>
		{% endif %}
	</div>
	{% if subheading or title or badge_link %}
	<div class="landing_feature_content">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="landing_feature_content_inner">
					<h1 class="landing_feature_title">{{ subheading }} <span>{{ title }}</span></h1>
				</div>
				{% if badge_link %}
				<div class="landing_feature_action">
					<figure class="landing_feature_action_bg_figure">
						{% include '@partial-image' with {
							class: 'landing_feature_action_bg',
							alt: '',
							image: '1',
							loading: 'lazy',
							sources: [
								img.square.sml,
								img.square.xsml,
								img.square.xxsml,
								img.square.thumb,
							],
							sizes: [
								'(min-width: 980px) 240px'
							]
						} %}
					</figure>
					
					<a href="{{ badge_link.url }}" class="landing_feature_action_link js-landing-action-link">{{ badge_link.label }}</a>
				</div>
				{% endif %}
			</div>
		</div>
	</div>
	{% endif %}
</div>

No notes defined.