CCGA Component Library

Section Microsite 

<!-- Section -->
<div class="section">
    <div class="section_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="section_header_inner">
                    <h2 class="section_title">
                        <span class="section_title_label">Isolationism and the Great Debate</span>
                    </h2>
                </div>
            </div>
        </div>
        <div class="section_decoration"></div>
    </div>
    <div class="section_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="section_body_inner">
                    <div class="section_body_media">
                        <figure class="section_body_figure section_body_figure_1">
                            <span class="lazy_image_wrapper section_body_figure_image_wrapper">
                                <img class="js-lazy js-lazyload section_body_figure_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x225/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x225/1 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x375/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x555/1 740w" alt="image 1">
                            </span>
                            <noscript>
                                <img class="section_body_figure_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/740x555/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x555/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x375/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x225/1 300w" sizes="100vw" alt="image 1">
                            </noscript>
                        </figure>
                        <figure class="section_body_figure section_body_figure_2">
                            <span class="lazy_image_wrapper section_body_figure_image_wrapper">
                                <img class="js-lazy js-lazyload section_body_figure_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x225/2" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x225/2 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x375/2 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x555/2 740w" alt="image 2">
                            </span>
                            <noscript>
                                <img class="section_body_figure_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/740x555/2" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x555/2 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x375/2 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x225/2 300w" sizes="100vw" alt="image 2">
                            </noscript>
                        </figure>
                        <figure class="section_body_figure section_body_figure_3">
                            <span class="lazy_image_wrapper section_body_figure_image_wrapper">
                                <img class="js-lazy js-lazyload section_body_figure_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x225/3" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x225/3 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x375/3 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x555/3 740w" alt="image 3">
                            </span>
                            <noscript>
                                <img class="section_body_figure_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/740x555/3" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x555/3 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x375/3 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x225/3 300w" sizes="100vw" alt="image 3">
                            </noscript>
                        </figure>
                    </div>
                    <div class="section_body_description">
                        <p>Should the United States stand aloof, leaving the Europeans and Asians to sort out their own problems, or should this country come to the aid, with money and arms if not men, of Britain and the European democracies?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Section -->
 
<!-- Section -->
<div class="section">
	<div class="section_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="section_header_inner">
					<h2 class="section_title">
						<span class="section_title_label">{{ title }}</span>
					</h2>
				</div>
			</div>
		</div>
		<div class="section_decoration"></div>
	</div>
	<div class="section_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="section_body_inner">
					<div class="section_body_media">
						{% for image in images %}
							<figure class="section_body_figure section_body_figure_{{ loop.index }}">
								{% render "@partial-image" with {
									class: "section_body_figure",
									alt: image.alt,
									image: image.image,
									sources: [
										img.full.sml,
										img.full.xsml,
										img.full.xxsml
									]
								} %}
							</figure>
						{% endfor %}
					</div>
					<div class="section_body_description">
						<p>{{ description }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Section -->

No notes defined.