CCGA Component Library

Homepage Atmospheric 

<div class="homepage_atmospheric">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="homepage_atmospheric_inner">
                <div class="homepage_atmospheric_content">
                    <h2 class="homepage_atmospheric_title">Expand your <em>worldview</em>. Increase your impact.</h2>
                    <div class="homepage_atmospheric_description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit aliquam purus eu scelerisque. Donec sagittis varius imperdiet. Duis placerat molestie posuere.</p>
                    </div>

                    <a class="button theme_white homepage_atmospheric_button button--with-icon" href="#">
                        <span class="button_text">
                            Learn More
                        </span>

                        <span class="button_icon">

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

                        </span>
                    </a>
                </div>

                <div class="c_feature_media homepage_atmospheric_figure">
                    <div class="c_feature_media_mask">
                        <div class="c_feature_media_video">
                            <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/11">
                                                    <source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x980/11">
                                                    <source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x740/11">
                                                    <source media="(min-width: 500px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/11">
                                                    <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/11" 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/11">
                                                    <source media="(min-width: 980px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x980/11">
                                                    <source media="(min-width: 740px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x740/11">
                                                    <source media="(min-width: 500px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/11">
                                                    <img class="atmospheric_feature_background_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/11" 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"></h2>
                                        </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>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="homepage_atmospheric">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="homepage_atmospheric_inner">
				<div class="homepage_atmospheric_content">
					<h2 class="homepage_atmospheric_title">{{title}}</h2>
					{% if description %}
						<div class="homepage_atmospheric_description">
							<p>{{ description }}</p>
						</div>
					{% endif %}
					{% if button %}
						{% render "@partial-button--white" with {
							text: button.label,
							href: button.url,
							class: 'homepage_atmospheric_button'
						} %}
					{% endif %}
				</div>

				{# <div class="homepage_atmospheric_media_wrap">
					{% include "@component-atmospheric-media" %}
				</div> #}

				{% render "@component-c-feature-media" with {
					atmospheric: true,
					atmospheric_config: atmospheric_config,
					class: 'homepage_atmospheric_figure'
				} %}
			</div>
		</div>
	</div>
</div>

No notes defined.