CCGA Component Library

Listing Teaser: Event 

<div class="listing_teaser past">
    <div class="listing_teaser_inner">
        <div class="listing_teaser_content">
            <h2 class="listing_teaser_title">
                <a href="#" class="listing_teaser_title_link">
                    <span class="listing_teaser_title_text">Young Professionals In-Depth on Covid-19 and the Future of Work</span>
                </a>
            </h2>

            <div class="listing_teaser_meta">
                <div class="listing_teaser_type">
                    Zoom
                </div>

            </div>

            <div class="listing_teaser_blurb">
                <p>As governments scramble to develop re-opening strategies, organizations are grappling with existential questions.</p>
            </div>

            <div class="listing_teaser_cta_wrap">

                <a class="button theme_deep_sea_blue  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>

                <button type="button" class="button_status theme_deep-sea-blue" disabled="true">
                    <span class="button_status_icon">

                        <svg class="icon icon_alert-button">
                            <use href="/images/icons.svg#alert-button" />
                        </svg>

                    </span>

                    <span class="button_status_text">
                        This event is sold out.
                    </span>
                </button>
            </div>
        </div>

        <div class="listing_teaser_media">
            <div class="listing_teaser_img_wrap">
                <div class="listing_teaser_content_date">
                    <span class="listing_teaser_content_date_month">Jul</span>
                    <span class="listing_teaser_content_date_day">17</span>
                </div>

                <a href="#">
                    <span class="lazy_image_wrapper listing_teaser_image_wrapper">
                        <img class="js-lazy js-lazyload listing_teaser_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w" alt="">
                    </span>
                    <noscript>
                        <img class="listing_teaser_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1 300w" sizes="100vw" alt="">
                    </noscript>
                </a>

                <div class="listing_teaser_img_credit">
                    <div class="listing_teaser_img_credit_inner">
                        Reuters
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 
{% set issue = get_issue_text(issues) %}
{% set meta_other = get_meta_text({
	authors: authors,
	series: series
}) %}

<div class="listing_teaser{% if kind %} {{ kind }}{% endif %}">
	<div class="listing_teaser_inner">
		<div class="listing_teaser_content">
			<h2 class="listing_teaser_title">
				<a href="{{ headline.href }}" class="listing_teaser_title_link">
					<span class="listing_teaser_title_text">{{ headline.name }}</span>
				</a>
			</h2>

			<div class="listing_teaser_meta">
				{% if type %}
					<div class="listing_teaser_type">
						{{ type.name }}
					</div>
				{% endif %}

				{% if series %}
					<div class="listing_teaser_meta_other">
						{{ series.name }}
					</div>
				{% endif %}
			</div>

			{% if blurb %}
			<div class="listing_teaser_blurb">
				<p>{{ blurb }}</p>
			</div>
			{% endif %}

			{% if cta_link %}
				<div class="listing_teaser_cta_wrap">
					{% render "@partial-button--deep-sea-blue" %}

					{% include "@partial-button-status" with {
						theme: "deep-sea-blue",
						text: "This event is sold out.",
						icon: "alert-button"
					} %}
				</div>
			{% endif %}
		</div>

		<div class="listing_teaser_media">
			<div class="listing_teaser_img_wrap">
				<div class="listing_teaser_content_date"{% if kind != "past" %} aria-hidden="true"{% endif %}>
					<span class="listing_teaser_content_date_month">{{ date.from.begin|date('M') }}</span>
					<span class="listing_teaser_content_date_day">{{ date.from.begin|date('j') }}</span>
				</div>

				<a href="#">
					{% render "@partial-image" with {
						image: image,
						class: "listing_teaser",
						sources: [
							img.wide.sml,
							img.wide.xsml,
							img.wide.xxsml
						]
					} %}
				</a>

				{% if image_credit %}
					<div class="listing_teaser_img_credit">
						<div class="listing_teaser_img_credit_inner">
							{{ image_credit }}
						</div>
					</div>
				{% endif %}

				{% if issue %}
					<div class="listing_teaser_issue">
						{{ issue.name }}
					</div>
				{% endif %}

				{% if date and kind != "past" %}
					<div class="listing_teaser_image_date">
						<div class="listing_teaser_image_date_month">
							{{ date.from.begin|date('M') }}
						</div>
						<div class="listing_teaser_image_date_day">
							{{ date.from.begin|date('j') }}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>

No notes defined.