CCGA Component Library

Visual Callout: Default 

<div class="visual_callout">
    <div class="fs-row visual_callout_row">
        <div class="fs-cell fs-lg-6 fs-xl-5 fs-xl-push-1">
            <div class="visual_callout_content">
                <h2 class="visual_callout_title">
                    <a href="#" class="visual_callout_title_link">Become a YP Member Today!</a>
                </h2>
                <span class="visual_callout_description">Through the network, you will see, hear and interact with the world's most ifluential thinkers and doers; rub shoulders and network with Chicago's rising young business and civic leaders; and gain insights needed to compete in a fast-changing blogal economy.</span>

                <div class="visual_callout_ctas_wrap">
                    <div class="visual_callout_ctas">
                        <div class="visual_callout_cta">
                            <a href="#" class="visual_callout_cta_link">Optional Link</a>
                        </div>
                        <div class="visual_callout_cta">
                            <a href="#" class="visual_callout_cta_link">Another Optional Link</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fs-cell fs-lg-6 fs-xl-5 visual_callout_image_cell">
            <figure class="visual_callout_figure">
                <a href="#">
                    <span class="lazy_image_wrapper visual_callout_image_wrapper">
                        <img class="js-lazy js-lazyload visual_callout_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/4 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/4 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/4 980w" alt="">
                    </span>
                    <noscript>
                        <img class="visual_callout_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/980x552/4" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x552/4 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/4 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/4 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4 300w" sizes="100vw" alt="">
                    </noscript>
                </a>

                <div class="visual_callout_img_credit">
                    <div class="visual_callout_img_credit_inner">
                        Reuters
                    </div>
                </div>

            </figure>
        </div>
    </div>
</div>
 
<div class="visual_callout{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="fs-row visual_callout_row">
		<div class="fs-cell fs-lg-6 fs-xl-5 fs-xl-push-1">
			<div class="visual_callout_content">
				<h2 class="visual_callout_title">
					<a href="{{ link }}" class="visual_callout_title_link">{{ title }}</a>
				</h2>
				{% if label %}
					<span class="visual_callout_event_label">{{ label }}</span>
				{% endif %}
				{% if description %}
					<span class="visual_callout_description">{{ description }}</span>
				{% endif %}

				{% if ctas|length %}
					<div class="visual_callout_ctas_wrap">
						<div class="visual_callout_ctas">
							{% for cta in ctas %}
								<div class="visual_callout_cta">
									<a href="{{ cta.url }}" class="visual_callout_cta_link">{{ cta.name }}</a>
								</div>
							{% endfor %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
		<div class="fs-cell fs-lg-6 fs-xl-5 visual_callout_image_cell">
			<figure class="visual_callout_figure">
				<a href="#">
					{% render "@partial-image" with {
						class: "visual_callout",
						alt: "",
						image: image,
						sources: [
							img.wide.med,
							img.wide.sml,
							img.wide.xsml,
							img.wide.xxsml
						]
					} %}
				</a>

				{% if image_credit %}
					<div class="visual_callout_img_credit">
						<div class="visual_callout_img_credit_inner">
							{{ image_credit }}
						</div>
					</div>
				{% endif %}

				{% if date %}
					<div class="visual_callout_image_date">
						<div class="visual_callout_image_date_month">{{ date.from.begin|date('M') }}</div>
						<div class="visual_callout_image_date_day">{{ date.from.begin|date('j') }}</div>
					</div>
				{% endif %}
			</figure>
		</div>
	</div>
</div>

No notes defined.