CCGA Component Library

Spotlight 

<div class="spotlight">

    <div class="fs-row">
        <div class="fs-cell">

            <div class="spotlight_inner js-checkpoint-spotlight-container">

                <div class="spotlight_group js-checkpoint-fade-up" data-checkpoint-animation="fade-up" data-checkpoint-container=".js-checkpoint-spotlight-container">
                    <h2 class="spotlight_header_text">
                        <a href="#" class="spotlight_header_text_link">Support The Council</a>
                    </h2>
                    <h3 class="spotlight_headline">
                        Membership has its benefits
                    </h3>

                    <span class="spotlight_description">As a Council member, you can increase your global acumen and cultural intelligence to stay ahead, mingle with other members, network to find professional connections, and support the idea of US engagement in global affairs right here in Chicago.</span>

                    <a class="button theme_mint_green spotlight_link button--with-icon" href="#">
                        <span class="button_text">
                            Learn About Membership Benefits
                        </span>

                        <span class="button_icon">

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

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

                <figure class="spotlight_figure" aria-hidden="true">
                    <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/8" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/8 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/8 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/8 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/8 980w" alt="{{ alt }}">
                            </span>
                            <noscript>
                                <img class="c_feature_media_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/980x552/8" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x552/8 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/8 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/8 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/8 300w" sizes="100vw" alt="{{ alt }}">
                            </noscript>
                        </div>
                    </div>
                </figure>

            </div>

        </div>
    </div>

</div>
 
<div class="spotlight">

	<div class="fs-row">
		<div class="fs-cell">

			<div class="spotlight_inner js-checkpoint-spotlight-container">

				<div class="spotlight_group js-checkpoint-fade-up" data-checkpoint-animation="fade-up" data-checkpoint-container=".js-checkpoint-spotlight-container">
					<h2 class="spotlight_header_text">
						<a href="{{ title.href }}" class="spotlight_header_text_link">{{ title.name }}</a>
					</h2>
					{% if headline %}
					<h3 class="spotlight_headline">
						{{ headline.name }}
					</h3>
					{% endif %}

					{% if description %}
					<span class="spotlight_description">{{ description }}</span>
					{% endif %}

					{% if link %}
						{% render "@partial-button--mint-green" with {
							text: link.label,
							href: link.url,
							class: 'spotlight_link',
						} %}
					{% endif %}
				</div>

				<figure class="spotlight_figure" aria-hidden="true">
					{% render "@component-c-feature-media" with {
						image: image
					} %}
				</figure>

			</div>

		</div>
	</div>

</div>

No notes defined.