CCGA Component Library

Media Article By Title: Default 

<div class="media_article_title">

    <div class="media_article_title_inner">

        <div class="media_article_title_header">
            <h2 class="media_article_title_title">Featured Media</h2>
        </div>

        <div class="media_article_title_wrapper">

            <figure class="media_article_title_figure">
                <span class="lazy_image_wrapper media_article_title_image_wrapper">
                    <img class="js-lazy js-lazyload media_article_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="media_article_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>
                <span class="media_article_title_image_tag">Global Politics</span>
                <div class="media_article_title_img_credit">
                    <div class="media_article_title_img_credit_inner">
                        Reuters
                    </div>
                </div>
            </figure>

            <div class="media_article_title_body">
                <a href="#" class="media_article_title_headline_link">
                    <span class="media_article_title_headline_label">As West Fears the Rise of Autocrats, Hungary Shows What's Possible</span>
                    <span class="media_article_title_headline_icon">
                        <svg class="icon icon_external">
                            <use href="/images/icons.svg#external" />
                        </svg>
                    </span>
                </a>

                <div class="media_article_title_meta">
                    <span class="media_article_title_meta_tag">
                        In The News
                    </span>
                    <span class="media_article_title_meta_label">
                        <span>Patrick Kingsley</span>
                    </span>
                </div>
                <span class="media_article_title_description">The senior leaders of Fidesz gathered on the backs of the Danube, in a building known as the Hungarian White House, stunned by the scale fo their good fortune.</span>
            </div>

        </div>

    </div>

</div>
 
<div class="media_article_title{% if item.podcast %} js-media-article-title-podcast{% endif %}">

	<div class="media_article_title_inner">

		<div class="media_article_title_header">
			<h2 class="media_article_title_title">{{ title }}</h2>
		</div>

		<div class="media_article_title_wrapper">

			<figure class="media_article_title_figure">
				{% render "@partial-image" with {
					class: "media_article_title",
					alt: "",
					image: item.image,
					sources: [
						img.wide.sml,
						img.wide.xsml,
						img.wide.xxsml
					]
				} %}
				{% if item.image_tag %}
				<span class="media_article_title_image_tag">{{ item.image_tag }}</span>
				{% endif %}
				{% if item.image_credit %}
					<div class="media_article_title_img_credit">
						<div class="media_article_title_img_credit_inner">
							{{ item.image_credit }}
						</div>
					</div>
				{% endif %}
				{% if item.video %}
					<a href="{{ item.video }}" class="media_article_title_video_link js-video-appender">
						<span class="media_article_title_video_link_label">Play the video</span>
						<span class="media_article_title_video_link_icon">{{ icon("podcast_play") }}</span>
					</a>
				{% endif %}
				{% if item.podcast %}
					<a href="{{ item.podcast }}"
						class="media_article_title_podcast_link js-podcast-link"
						data-series="{{ item.podcast_series }}"
						data-title="{{ item.podcast_title }}">
						<span class="media_article_title_podcast_link_label">Play the podcast</span>
						<span class="media_article_title_podcast_link_icon_play">{{ icon("podcast_play") }}</span>
						<span class="media_article_title_podcast_link_icon_pause">{{ icon("pause") }}</span>
					</a>
				{% endif %}
			</figure>

			<div class="media_article_title_body">
				<a href="{{ item.href }}" class="media_article_title_headline_link">
					<span class="media_article_title_headline_label">{{ item.title }}</span>
					{% if item.external %}
					<span class="media_article_title_headline_icon">{{ icon("external") }}</span>
					{% endif %}
				</a>

				{% if item.tag or item.labels %}
				<div class="media_article_title_meta">
					{% if item.tag %}
					<span class="media_article_title_meta_tag">
						{{ item.tag }}
					</span>
					{% endif %}
					{% if item.labels %}
					{% for label in item.labels %}
						<span class="media_article_title_meta_label">
							<span>{{ label }}</span>
							{% if not loop.last %}, {% endif %}
						</span>
					{% endfor %}
					{% endif %}
				</div>
				{% endif %}
				{% if item.description %}
				<span class="media_article_title_description">{{ item.description }}</span>
				{% endif %}
			</div>

		</div>

	</div>

</div>

No notes defined.