CCGA Component Library

Listing Teaser: Interactives 

<div class="listing_teaser">
    <div class="listing_teaser_inner">
        <div class="listing_teaser_content">
            <time class="listing_teaser_date" datetime="2020-08-12">
                August 12, 2020
            </time>

            <h2 class="listing_teaser_title">
                <a href="#" class="listing_teaser_title_link">
                    <span class="listing_teaser_title_text">
                        How Serious Is the North Korea Nuclear Threat?
                    </span>

                </a>
            </h2>

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

            </div>

            <div class="listing_teaser_blurb">
                <p>North Korea launched its largest and most powerful missile yet, the Hwasong-15, on November 29. Here’s what you should know about the North Korean nuclear threat and the consequences of a preemptive strike by the United States.</p>
            </div>
        </div>

        <div class="listing_teaser_media">
            <div class="listing_teaser_img_wrap">
                <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 class="listing_teaser_issue">
                    Global Cities
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set issue = get_issue_text(issues) %}

<div class="listing_teaser">
	<div class="listing_teaser_inner">
		<div class="listing_teaser_content">
			<time class="listing_teaser_date" datetime="{{ date.from.begin }}">
				{{ date.from.begin|date("F j, Y") }}
			</time>

			<h2 class="listing_teaser_title">
				<a href="{{ headline.href }}" class="listing_teaser_title_link">
					<span class="listing_teaser_title_text">
						{{ headline.name }}
					</span>

					{% if headline.icon %}
						<span class="listing_teaser_title_icon">
							{{ icon(headline.icon) }}
						</span>
					{% endif %}
				</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 %}
				{% if expert %}
					<div class="listing_teaser_meta_other">
						{{ expert.name }}
					</div>
				{% endif %}
			</div>

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

		<div class="listing_teaser_media">
			<div class="listing_teaser_img_wrap">
				<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 %}
			</div>
		</div>
	</div>
</div>

No notes defined.