CCGA Component Library

Visual Callout: Event 

<div class="visual_callout js-checkpoint-fade-up" data-checkpoint-animation="fade-up">

    <div class="fs-row visual_callout_row">

        <div class="fs-cell fs-lg-6">
            <div class="visual_callout_content">
                <h2 class="visual_callout_title">
                    <a href="#" class="visual_callout_title_link">Become a YP Member Today!</a>
                </h2>

                <div class="visual_callout_event_meta">
                    <span class="visual_callout_event_label">Live Stream</span>

                    <span class="visual_callout_event_label_two">Women, Equity, and Global Development Forum</span>
                </div>

                <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>

                <a class="button theme_white visual_callout_description_link button--with-icon" href="#">
                    <span class="button_text">
                        Register Today
                    </span>

                    <span class="button_icon">

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

                    </span>
                </a>
            </div>
        </div>
        <div class="fs-cell fs-lg-6 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>
                <div class="visual_callout_image_date">
                    <div class="visual_callout_image_date_month">Apr</div>
                    <div class="visual_callout_image_date_day">9</div>
                </div>
            </figure>
        </div>

    </div>

</div>
 
<div class="visual_callout{% if theme %} theme_{{ theme }}{% endif %} js-checkpoint-fade-up" data-checkpoint-animation="fade-up">

	<div class="fs-row visual_callout_row">

		<div class="fs-cell fs-lg-6">
			<div class="visual_callout_content">
				<h2 class="visual_callout_title">
					<a href="{{ link }}" class="visual_callout_title_link">{{ title }}</a>
				</h2>

				<div class="visual_callout_event_meta">
					<span class="visual_callout_event_label">{{ label }}</span>

					{% if label_two %}
						<span class="visual_callout_event_label_two">{{ label_two }}</span>
					{% endif %}
				</div>

				{% if description %}
				<span class="visual_callout_description">{{ description }}</span>
				{% endif %}
				{% if register_link %}
					{% render "@partial-button--white" with {
						class: 'visual_callout_description_link',
						href: register_link.url,
						text: register_link.name
					} %}
				{% endif %}
			</div>
		</div>
		<div class="fs-cell fs-lg-6 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.begin.from|date('M') }}</div>
					<div class="visual_callout_image_date_day">{{ date.begin.from|date('j') }}</div>
				</div>
				{% endif %}
			</figure>
		</div>

	</div>

</div>

No notes defined.