CCGA Component Library

Header Microsite 

<!-- Header -->
<header class="js-microsite-header microsite_header" id="header">
    <a class="skip_link skip_main" id="skip_link" href="#skip_content">Skip to main content</a>

    <div class="js-microsite-header-block microsite_header_block">
        <div class="microsite_header_ribbon">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="microsite_header_ribbon_inner">
                        <h1 class="microsite_header_title microsite_header_title_ribbon">Pritzker Forum On<br> Global Cities</h1>

                        <div class="microsite_home microsite_home_header">
                            <a href="#" class="microsite_home_link">
                                <span class="microsite_home_link_label">thechicagocouncil.org</span>
                                <span class="microsite_home_link_icon">
                                    <svg class="icon icon_external">
                                        <use href="/images/icons.svg#external" />
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="microsite_header_primary">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="microsite_header_primary_inner">
                        <div class="microsite_header_primary_logo">

                            <div class="logo logo_microsite_header logo_icon">
                                <a class="logo_link" href="page-home.html">
                                    <span class="logo_link_label">CCGA</span>
                                    <span class="logo_link_icon">
                                        <svg class="icon icon_ft_logo">
                                            <use href="/images/icons.svg#ft_logo" />
                                        </svg>
                                    </span>
                                </a>
                            </div>

                            <div class="logo logo_microsite_header logo_icon">
                                <a class="logo_link" href="page-home.html">
                                    <span class="logo_link_label">CCGA</span>
                                    <span class="logo_link_icon">
                                        <svg class="icon icon_logo_2022">
                                            <use href="/images/icons.svg#logo_2022" />
                                        </svg>
                                    </span>
                                </a>
                            </div>
                        </div>

                        <div class="microsite_header_center_logo">
                            <h1 class="microsite_header_title microsite_header_title_primary">Pritzker Forum On<br> Global Cities</h1>

                            <div class="logo logo_microsite_header logo_icon">
                                <a class="logo_link" href="page-home.html">
                                    <span class="logo_link_label">CCGA</span>
                                    <span class="logo_link_icon">
                                        <svg class="icon icon_pritzker_logo">
                                            <use href="/images/icons.svg#pritzker_logo" />
                                        </svg>
                                    </span>
                                </a>
                            </div>
                        </div>

                        <a href="#menu" class="microsite_menu_toggle js-swap" data-swap-target=".menu" data-swap-linked="menu">
                            <span class="microsite_menu_toggle_inner_default microsite_menu_toggle_inner">
                                <span class="microsite_menu_toggle_label_default microsite_menu_toggle_label">Menu</span>
                                <span class="microsite_menu_toggle_icon_default microsite_menu_toggle_icon" aria-hidden="true">
                                    <span class="microsite_menu_toggle_icon_inner_default microsite_menu_toggle_icon_inner">
                                        <span class="microsite_menu_toggle_icon_space">&#xfeff;</span>
                                        <svg class="icon icon_menu">
                                            <use xlink:href="/images/icons.svg#menu"></use>
                                        </svg>
                                    </span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="js-microsite-feature microsite_feature ">
        <div class="microsite_feature_inner">
            <div class="microsite_feature_media">
                <figure class="microsite_feature_background">
                    <span class="lazy_image_wrapper microsite_feature_background_image_wrapper">
                        <img class="js-lazy js-lazyload microsite_feature_background_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/500x282/2" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/2 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/2 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/2 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/2 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/2 1440w" alt="">
                    </span>
                    <noscript>
                        <img class="microsite_feature_background_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/2" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/2 1440w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/2 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/2 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/2 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/2 500w" sizes="100vw" alt="">
                    </noscript>
                </figure>
                <div class="js-microsite-youtube-wrapper microsite_feature_video" data-youtubeid="vn94KZJ5cMs">
                    <div class="js-microsite-youtube-iframe microsite_feature_iframe" id="js-microsite-youtube-iframe"></div>
                    <div class="microsite_feature_video_controls">
                        <button class="js-microsite-feature-video-play-toggle microsite_feature_video_play_toggle ">
                            <span class="microsite_feature_video_play_toggle_inner_default microsite_feature_video_play_toggle_inner">
                                <span class="microsite_feature_video_play_toggle_label_default microsite_feature_video_play_toggle_label">Play</span>
                                <span class="microsite_feature_video_play_toggle_icon_default microsite_feature_video_play_toggle_icon" aria-hidden="true">
                                    <span class="microsite_feature_video_play_toggle_icon_inner_default microsite_feature_video_play_toggle_icon_inner">
                                        <span class="microsite_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-microsite-feature-video-pause-toggle microsite_feature_video_pause_toggle ">
                            <span class="microsite_feature_video_pause_toggle_inner_default microsite_feature_video_pause_toggle_inner">
                                <span class="microsite_feature_video_pause_toggle_label_default microsite_feature_video_pause_toggle_label">Pause</span>
                                <span class="microsite_feature_video_pause_toggle_icon_default microsite_feature_video_pause_toggle_icon" aria-hidden="true">
                                    <span class="microsite_feature_video_pause_toggle_icon_inner_default microsite_feature_video_pause_toggle_icon_inner">
                                        <span class="microsite_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-microsite-feature-content microsite_feature_content">
                <div class="microsite_feature_content_inner">
                    <figure class="microsite_feature_foreground">
                        <img class="microsite_feature_foreground_image" src="/images/forum_tile.jpg" alt="Chicago and the World, 100 Year of the Chicago Counsil on Global Affairs - Richard C. Long worth">
                    </figure>
                </div>
                <div class="js-microsite-feature-content_spacer microsite_feature_content_spacer">
                </div>
            </div>
        </div>
        <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
    </div>
</header>
<!-- END: Header -->
 
<!-- Header -->
<header class="js-microsite-header microsite_header" id="header">
	<a class="skip_link skip_main" id="skip_link" href="#skip_content">Skip to main content</a>

	{% if page.alert == true %}
		<a class="js-skip-alert skip_link skip_alert" id="alert_link" href="#alert">Skip to site alert</a>
	{% endif %}

	<div class="js-microsite-header-block microsite_header_block">
		<div class="microsite_header_ribbon">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="microsite_header_ribbon_inner">
						<h1 class="microsite_header_title microsite_header_title_ribbon">Pritzker Forum On<br> Global Cities</h1>

						<div class="microsite_home microsite_home_header">
							<a href="#" class="microsite_home_link">
								<span class="microsite_home_link_label">thechicagocouncil.org</span>
								<span class="microsite_home_link_icon">{{ icon("external") }}</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="microsite_header_primary">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="microsite_header_primary_inner">
						<div class="microsite_header_primary_logo">
							{% render "@partial-logo" with {
								modifier: "microsite_header",
								icon: "ft_logo",
								print: ""
							} %}

							{% render "@partial-logo" with {
								modifier: "microsite_header",
								icon: "logo_2022",
								print: ""
							} %}
						</div>

						<div class="microsite_header_center_logo">
							<h1 class="microsite_header_title microsite_header_title_primary">Pritzker Forum On<br> Global Cities</h1>
							{% render "@partial-logo" with {
								modifier: "microsite_header",
								icon: "pritzker_logo",
								print: ""
							} %}
						</div>

						{% render "@partial-link-toggle" with {
							class: "microsite_menu",
							title: "Menu",
							url: "#menu",
							icon: "menu",
							swap_target: ".menu",
							swap_link: "menu"
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>

	{% include "@component-microsite-feature" with {
		background: "2",
		foreground: "635x552/5",
		alt: "Chicago and the World, 100 Year of the Chicago Counsil on Global Affairs - Richard C. Long worth",
		youtubeID: "vn94KZJ5cMs"
	} %}
</header>
<!-- END: Header -->

No notes defined.