CCGA Component Library

Event By Title: Default 

<div class="event_by_title">

    <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 class="event_by_title">

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

No notes defined.