CCGA Component Library

Event By Title Microsite 

<div class="event_by_title">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8 fs-lg-justify-center">
            <div class="event_by_title_inner">

                <div class="event_by_title_header">
                    <h2 class="event_by_title_title">Featured Event</h2>
                </div>

                <div class="event_by_title_wrapper">

                    <figure class="event_by_title_figure">
                        <span class="lazy_image_wrapper event_by_title_image_wrapper">
                            <img class="js-lazy js-lazyload event_by_title_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w" alt="">
                        </span>
                        <noscript>
                            <img class="event_by_title_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5 300w" sizes="100vw" alt="">
                        </noscript>
                        <div class="event_by_title_image_date">
                            <div class="event_by_title_image_date_month">Aug</div>
                            <div class="event_by_title_image_date_day">12</div>
                        </div>
                        <div class="event_by_title_img_credit">
                            <div class="event_by_title_img_credit_inner">
                                Reuters
                            </div>
                        </div>
                    </figure>

                    <div class="event_by_title_body">
                        <div class="event_by_title_headline_label">
                            <a class="event_by_title_headline_link" href="#">
                                <span class="event_by_title_headline_link_label">
                                    Young Professionals In-Depth on Covid-19 and the Future of Work
                                </span>
                            </a>
                        </div>

                        <div class="event_by_title_meta">
                            <span class="event_by_title_meta_tag">
                                Virtual
                            </span>
                            <span class="event_by_title_meta_label">
                                <span>Julie Jeffson</span>
                            </span>
                        </div>
                        <span class="event_by_title_description">As governments scramble to develop re-opening strategies, organizations are grappling with existential questions.</span>
                        <a href="#" class="event_by_title_link">Register Today</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="event_by_title">
	<div class="fs-row">
		<div class="fs-cell {{ cell }} fs-lg-justify-center">
			<div class="event_by_title_inner">

				<div class="event_by_title_header">
					<h2 class="event_by_title_title">{{ title }}</h2>
				</div>

				<div class="event_by_title_wrapper">

					<figure class="event_by_title_figure">
						{% render "@partial-image" with {
							class: "event_by_title",
							alt: "",
							image: item.image,
							sources: [
								img.wide.sml,
								img.wide.xsml,
								img.wide.xxsml
							]
						} %}
						{% if item.date %}
							<div class="event_by_title_image_date">
								<div class="event_by_title_image_date_month">{{ item.date|date('M') }}</div>
								<div class="event_by_title_image_date_day">{{ item.date|date('j') }}</div>
							</div>
						{% endif %}
						{% if item.image_credit %}
							<div class="event_by_title_img_credit">
								<div class="event_by_title_img_credit_inner">
									{{ item.image_credit }}
								</div>
							</div>
						{% endif %}
					</figure>

					<div class="event_by_title_body">
						<div class="event_by_title_headline_label">
							<a class="event_by_title_headline_link" href="{{ item.title.href }}">
								<span class="event_by_title_headline_link_label">
									{{ item.title.name }}
								</span>
							</a>
						</div>

						{% if item.tag or item.labels %}
							<div class="event_by_title_meta">
								{% if item.tag %}
									<span class="event_by_title_meta_tag">
										{{ item.tag }}
									</span>
								{% endif %}
								{% if item.labels %}
									{% for label in item.labels %}
										<span class="event_by_title_meta_label">
											<span>{{ label }}</span>
											{% if not loop.last %},
											{% endif %}
										</span>
									{% endfor %}
								{% endif %}
							</div>
						{% endif %}
						{% if item.description %}
							<span class="event_by_title_description">{{ item.description }}</span>
						{% endif %}
						{% if item.link %}
							<a href="{{ item.link.url }}" class="event_by_title_link">{{ item.link.name }}</a>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.