CCGA Component Library

Atmospheric 

<div class="js-atmospheric-feature atmospheric_feature has_video">
    <div class="atmospheric_feature_inner">
        <div class="atmospheric_feature_media">
            <figure class="atmospheric_feature_background">
                <span class="lazy_image_wrapper atmospheric_feature_background_image_wrapper">
                    <picture class="atmospheric_feature_background_picture">
                        <source media="(min-width: 1220px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1080x1440/5">
                        <source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x980/5">
                        <source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x740/5">
                        <source media="(min-width: 500px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5">
                        <img class="js-lazy js-lazyload atmospheric_feature_background_image" src="../../../images/placeholder.png" data-src="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5" alt="">
                    </picture>
                </span>
                <noscript>
                    <picture class="atmospheric_feature_background_picture">
                        <source media="(min-width: 1220px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1080x1440/5">
                        <source media="(min-width: 980px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x980/5">
                        <source media="(min-width: 740px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x740/5">
                        <source media="(min-width: 500px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5">
                        <img class="atmospheric_feature_background_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5" alt="">
                    </picture>
                </noscript>
            </figure>
            <div class="js-atmospheric-youtube-wrapper atmospheric_feature_video" data-youtubeid="43D7tYgnPcg">
                <div class="js-atmospheric-youtube-iframe atmospheric_feature_iframe" id="js-atmospheric-youtube-iframe"></div>
                <div class="atmospheric_feature_video_controls">
                    <button class="js-atmospheric-feature-video-play-toggle atmospheric_feature_video_play_toggle ">
                        <span class="atmospheric_feature_video_play_toggle_inner_default atmospheric_feature_video_play_toggle_inner">
                            <span class="atmospheric_feature_video_play_toggle_label_default atmospheric_feature_video_play_toggle_label">Play</span>
                            <span class="atmospheric_feature_video_play_toggle_icon_default atmospheric_feature_video_play_toggle_icon" aria-hidden="true">
                                <span class="atmospheric_feature_video_play_toggle_icon_inner_default atmospheric_feature_video_play_toggle_icon_inner">
                                    <span class="atmospheric_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-atmospheric-feature-video-pause-toggle atmospheric_feature_video_pause_toggle ">
                        <span class="atmospheric_feature_video_pause_toggle_inner_default atmospheric_feature_video_pause_toggle_inner">
                            <span class="atmospheric_feature_video_pause_toggle_label_default atmospheric_feature_video_pause_toggle_label">Pause</span>
                            <span class="atmospheric_feature_video_pause_toggle_icon_default atmospheric_feature_video_pause_toggle_icon" aria-hidden="true">
                                <span class="atmospheric_feature_video_pause_toggle_icon_inner_default atmospheric_feature_video_pause_toggle_icon_inner">
                                    <span class="atmospheric_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-atmospheric-feature-content atmospheric_feature_content">
            <div class="atmospheric_feature_content_inner">
                <h2 class="atmospheric_feature_title">We're here to help you understand the world around you.</h2>
                <a href="#" class="atmospheric_feature_button">Learn More</a>
            </div>
            <div class="js-atmospheric-feature-content_spacer atmospheric_feature_content_spacer">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
</div>
 
<div class="js-atmospheric-feature atmospheric_feature {% if youtubeID %}has_video{% endif %}">
	<div class="atmospheric_feature_inner">
		<div class="atmospheric_feature_media">
			<figure class="atmospheric_feature_background">
				{% render '@partial-picture' with {
					class: 'atmospheric_feature_background',
					alt: '',
					image: background,
					default: img.square.xsml,
					sources: {
						"1220px": img.portraitFull.xlrg,
						"980px": img.square.med,
						"740px": img.square.sml,
						"500px": img.square.xsml
					}
				} %}
			</figure>
			{% if youtubeID %}
				<div class="js-atmospheric-youtube-wrapper atmospheric_feature_video" data-youtubeid="{{ youtubeID }}">
					<div class="js-atmospheric-youtube-iframe atmospheric_feature_iframe" id="js-atmospheric-youtube-iframe"></div>
					<div class="atmospheric_feature_video_controls">
						{% render "@partial-button-toggle" with {
							class: "atmospheric_feature_video_play",
							title: "Play",
							icon: "play",
							js: true
						} %}
						{% render "@partial-button-toggle" with {
							class: "atmospheric_feature_video_pause",
							title: "Pause",
							icon: "pause",
							js: true
						} %}
					</div>
				</div>
			{% endif %}
		</div>
		<div class="js-atmospheric-feature-content atmospheric_feature_content">
			<div class="atmospheric_feature_content_inner">
				<h2 class="atmospheric_feature_title">{{ title }}</h2>
				{% if button %}
				<a href="{{ button.url }}" class="atmospheric_feature_button">{{ button.label }}</a>
				{% endif %}
			</div>
			<div class="js-atmospheric-feature-content_spacer atmospheric_feature_content_spacer">
			</div>
		</div>
	</div>
	<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
</div>

No notes defined.