CCGA Component Library

Center Top 

<div class="center_top">
    <div class="center_top_row">
        <div class="center_top_inner">
            <div class="center_top_breadcrumbs">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="breadcrumb">
                            <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                                <div class="breadcrumb_nav_header">
                                    <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                                </div>
                                <ol class="breadcrumb_list multiple" aria-labelledby="breadcrumb_nav_title">
                                    <li class="breadcrumb_item breadcrumb_item_home">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html" aria-label="Home">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                    <svg class="icon icon_home">
                                                        <use href="/images/icons.svg#home" />
                                                    </svg>
                                                </span>

                                                <span class="breadcrumb_pill_icon_back" aria-hidden="true" aria-label="Go Back">
                                                    <svg class="icon icon_arrow_back_breadcrumbs">
                                                        <use href="/images/icons.svg#arrow_back_breadcrumbs" />
                                                    </svg>
                                                </span>

                                                <span class="breadcrumb_pill_label">Home</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true">
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Research</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true">
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <span class="breadcrumb_pill">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Page Title</span>
                                            </span>
                                        </span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div class="center_top_feature">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="center_top_feature_inner">
                            <header class="center_top_head">
                                <h1 class="center_top_title">
                                    The Lester Crown Center on US Foreign Policy
                                </h1>

                                <div class="center_top_blurb">
                                    The Lester Crown Center shapes debates and informs decisions on important US foreign policy and national security issues.
                                </div>

                                <div class="center_top_btn">

                                    <a class="button theme_white  button--with-icon" href="#">
                                        <span class="button_text">
                                            More About the Center
                                        </span>

                                        <span class="button_icon">

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

                                        </span>
                                    </a>
                                </div>
                            </header>
                            <div class="center_top_figure">
                                <div class="c_feature_media ">
                                    <div class="c_feature_media_mask">
                                        <span class="lazy_image_wrapper c_feature_media_image_wrapper">
                                            <img class="js-lazy js-lazyload c_feature_media_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/2" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/2 300w, //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" alt="{{ alt }}">
                                        </span>
                                        <noscript>
                                            <img class="c_feature_media_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/980x552/2" srcset="//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, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/2 300w" sizes="100vw" alt="{{ alt }}">
                                        </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="center_top_teasers_wrap">
        <div class="fs-row">
            <div class="fs-cell">
                <!-- start: center top callouts -->
                <div class="center_top_callouts">
                    <div class="center_top_callouts_inner js-carousel" data-carousel-options='{"contained": false, "controls": false, "maxWidth":"979px", "show":{"740px": 2}}'>
                        <!-- start: center top callout -->
                        <div class="center_top_callout">
                            <div class="center_top_callout_title_wrap">
                                <div class="center_top_callout_title">
                                    Experts
                                </div>
                            </div>

                            <div class="center_top_callout_caption">
                                National policy experts and top thinkers share their analysis with the wider public.
                            </div>

                            <div class="center_top_callout_link_wrap">
                                <a class="center_top_callout_link" href="#">
                                    Lester Crown Center Experts
                                </a>
                            </div>
                        </div>
                        <!-- end: center top callout -->
                        <!-- start: center top callout -->
                        <div class="center_top_callout">
                            <div class="center_top_callout_title_wrap">
                                <div class="center_top_callout_title">
                                    Events
                                </div>
                            </div>

                            <div class="center_top_callout_caption">
                                Year-round events serve to keep the public well informed on US foreign policy.
                            </div>

                            <div class="center_top_callout_link_wrap">
                                <a class="center_top_callout_link" href="#">
                                    Lester Crown Center Events
                                </a>
                            </div>
                        </div>
                        <!-- end: center top callout -->
                        <!-- start: center top callout -->
                        <div class="center_top_callout">
                            <div class="center_top_callout_title_wrap">
                                <div class="center_top_callout_title">
                                    Research
                                </div>
                            </div>

                            <div class="center_top_callout_caption">
                                Analysis and policy recommendations on a range of foreign policy issues.
                            </div>

                            <div class="center_top_callout_link_wrap">
                                <a class="center_top_callout_link" href="#">
                                    Lester Crown Center Research
                                </a>
                            </div>
                        </div>
                        <!-- end: center top callout -->
                    </div>
                </div>
                <!-- end: center top callouts -->
            </div>
        </div>
    </div>
</div>
 
<div class="center_top">
	<div class="center_top_row">
		{% if background %}
			<div class="center_top_background">
				<figure class="center_top_background_figure">
					{% render "@partial-image" with {
						class: "center_top_background",
						alt: "",
						image: background,
						sources: [
							img.wide.xlrg,
							img.wide.lrg,
							img.wide.med,
							img.wide.sml,
							img.wide.xsml,
							img.wide.xxsml
						]
					} %}
				</figure>
			</div>
		{% endif %}
		<div class="center_top_inner">
			<div class="center_top_breadcrumbs">
				<div class="fs-row">
					<div class="fs-cell">
						{% render  '@navigation-breadcrumb--center' %}
					</div>
				</div>
			</div>

			<div class="center_top_feature">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="center_top_feature_inner">
							<header class="center_top_head">
								<h1 class="center_top_title">
									{{ title }}
								</h1>

								<div class="center_top_blurb">
									{{ blurb }}
								</div>

								<div class="center_top_btn">
									{% render "@partial-button--white" with {
										text: cta.name,
										href: cta.href,
									} %}
								</div>
							</header>
							<div class="center_top_figure">
								{% render "@component-c-feature-media" with {
									image: image
								} %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="center_top_teasers_wrap">
		<div class="fs-row">
			<div class="fs-cell">
				<!-- start: center top callouts -->
				<div class="center_top_callouts">
					<div class="center_top_callouts_inner js-carousel" data-carousel-options='{"contained": false, "controls": false, "maxWidth":"979px", "show":{"740px": 2}}'>
						{% for callout in callouts %}
							<!-- start: center top callout -->
							<div class="center_top_callout">
								<div class="center_top_callout_title_wrap">
									<div class="center_top_callout_title">
										{{ callout.title }}
									</div>
								</div>

								<div class="center_top_callout_caption">
									{{ callout.caption }}
								</div>

								<div class="center_top_callout_link_wrap">
									<a class="center_top_callout_link" href="{{ callout.link.href }}">
										{{ callout.link.name }}
									</a>
								</div>
							</div>
							<!-- end: center top callout -->
						{% endfor %}
					</div>
				</div>
				<!-- end: center top callouts -->
			</div>
		</div>
	</div>
</div>

No notes defined.