CCGA Component Library

Anniversary Feature 

<div class="js-anniversary-feature anniversary_feature ">
    <div class="anniversary_feature_inner">
        <div class="anniversary_feature_media">
            <figure class="anniversary_feature_background">
                <span class="lazy_image_wrapper anniversary_feature_background_image_wrapper">
                    <img class="js-lazy js-lazyload anniversary_feature_background_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/1 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/1 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/1 1440w" alt="">
                </span>
                <noscript>
                    <img class="anniversary_feature_background_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/1 1440w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/1 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/1 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w" sizes="100vw" alt="">
                </noscript>
            </figure>
            <div class="js-anniversary-youtube-wrapper anniversary_feature_video" data-youtubeid="pBiqBJ6x5qM">
                <div class="js-anniversary-youtube-iframe anniversary_feature_iframe" id="js-anniversary-youtube-iframe"></div>
                <div class="anniversary_feature_video_controls">
                    <button class="js-anniversary-feature-video-play-toggle anniversary_feature_video_play_toggle ">
                        <span class="anniversary_feature_video_play_toggle_inner_default anniversary_feature_video_play_toggle_inner">
                            <span class="anniversary_feature_video_play_toggle_label_default anniversary_feature_video_play_toggle_label">Play</span>
                            <span class="anniversary_feature_video_play_toggle_icon_default anniversary_feature_video_play_toggle_icon" aria-hidden="true">
                                <span class="anniversary_feature_video_play_toggle_icon_inner_default anniversary_feature_video_play_toggle_icon_inner">
                                    <span class="anniversary_feature_video_play_toggle_icon_space">&#xfeff;</span>

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

                                </span>
                            </span>
                        </span>
                    </button>
                    <button class="js-anniversary-feature-video-pause-toggle anniversary_feature_video_pause_toggle ">
                        <span class="anniversary_feature_video_pause_toggle_inner_default anniversary_feature_video_pause_toggle_inner">
                            <span class="anniversary_feature_video_pause_toggle_label_default anniversary_feature_video_pause_toggle_label">Pause</span>
                            <span class="anniversary_feature_video_pause_toggle_icon_default anniversary_feature_video_pause_toggle_icon" aria-hidden="true">
                                <span class="anniversary_feature_video_pause_toggle_icon_inner_default anniversary_feature_video_pause_toggle_icon_inner">
                                    <span class="anniversary_feature_video_pause_toggle_icon_space">&#xfeff;</span>

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

                                </span>
                            </span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="js-anniversary-feature-content anniversary_feature_content">
            <div class="anniversary_feature_content_inner">
                <figure class="anniversary_feature_foreground">
                    <img class="anniversary_feature_foreground_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/2" alt="">
                </figure>
            </div>
            <div class="js-anniversary-feature-content_spacer anniversary_feature_content_spacer">
            </div>
        </div>
    </div>
</div>
 
<div class="js-anniversary-feature anniversary_feature {% if video %}has_video{% endif %}">
	<div class="anniversary_feature_inner">
		<div class="anniversary_feature_media">
			<figure class="anniversary_feature_background">
				{% render "@partial-image" with {
					class: "anniversary_feature_background",
					alt: "",
					image: background,
					sources: [
						img.wide.xlrg,
						img.wide.lrg,
						img.wide.med,
						img.wide.sml,
						img.wide.xsml
					]
				} %}
			</figure>
			{% if youtubeID %}
				<div class="js-anniversary-youtube-wrapper anniversary_feature_video" data-youtubeid="{{ youtubeID }}">
					<div class="js-anniversary-youtube-iframe anniversary_feature_iframe" id="js-anniversary-youtube-iframe"></div>
					<div class="anniversary_feature_video_controls">
						{% render "@partial-button-toggle" with {
							class: "anniversary_feature_video_play",
							title: "Play",
							icon: "play",
							js: true
						} %}
						{% render "@partial-button-toggle" with {
							class: "anniversary_feature_video_pause",
							title: "Pause",
							icon: "pause",
							js: true
						} %}
					</div>
				</div>
			{% endif %}
		</div>
		<div class="js-anniversary-feature-content anniversary_feature_content">
			<div class="anniversary_feature_content_inner">
				<figure class="anniversary_feature_foreground">
					<img class="anniversary_feature_foreground_image" src="//images.fastspot.com/{{ config.images }}/{{ foreground }}" alt="{{ alt }}" >
				</figure>
			</div>
			<div class="js-anniversary-feature-content_spacer anniversary_feature_content_spacer">
			</div>
		</div>
	</div>
</div>

No notes defined.