CCGA Component Library

Blog Detail Top 

<div class="blog_detail_top">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="blog_detail_top_inner">
                <div class="blog_detail_top_breadcrumbs">
                    <div class="breadcrumb">
                        <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                            <div class="breadcrumb_nav_header">
                                <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                            </div>
                            <ol class="breadcrumb_list multiple" aria-labelledby="breadcrumb_nav_title">
                                <li class="breadcrumb_item breadcrumb_item_home">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html" aria-label="Home">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                <svg class="icon icon_home">
                                                    <use href="/images/icons.svg#home" />
                                                </svg>
                                            </span>

                                            <span class="breadcrumb_pill_icon_back" aria-hidden="true" aria-label="Go Back">
                                                <svg class="icon icon_arrow_back_breadcrumbs">
                                                    <use href="/images/icons.svg#arrow_back_breadcrumbs" />
                                                </svg>
                                            </span>

                                            <span class="breadcrumb_pill_label">Home</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Commentary & Analysis</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Blogs</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <span class="breadcrumb_pill">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Page Title</span>
                                        </span>
                                    </span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>

                <header class="blog_detail_top_head">
                    <time class="blog_detail_top_date" datetime="2020-07-10">
                        July 10, 2020
                    </time>

                    <h1 class="blog_detail_top_title">
                        Will Canadians Tune In For Bubble Hockey?
                    </h1>

                    <div class="blog_detail_top_meta">
                        <div class="blog_detail_top_meta_img">
                            <span class="lazy_image_wrapper blog_detail_top_meta_image_wrapper">
                                <img class="js-lazy js-lazyload blog_detail_top_meta_image" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/100x100/1" alt="">
                            </span>
                            <noscript>
                                <img class="blog_detail_top_meta_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/100x100/1" alt="">
                            </noscript>
                        </div>

                        <div class="blog_detail_top_meta_content">
                            <div class="blog_detail_top_type">
                                <a class="blog_detail_top_type_link" href="#">
                                    Blog
                                </a>
                            </div>

                            <div class="blog_detail_top_other">
                                <a href="#">Running Numbers</a>

                                by Craig Kafura
                            </div>
                        </div>
                    </div>
                </header>

                <div class="blog_detail_top_content">
                    <div class="blog_detail_top_img_wrap_one">
                        <div class="blog_detail_top_img_wrap_two">
                            <div class="blog_detail_top_img_credit">
                                <div class="blog_detail_top_img_credit_inner">
                                    Reuters
                                </div>
                            </div>

                            <span class="lazy_image_wrapper blog_detail_top_img_image_wrapper">
                                <img class="js-lazy js-lazyload blog_detail_top_img_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5 980w" alt="">
                            </span>
                            <noscript>
                                <img class="blog_detail_top_img_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w" sizes="100vw" alt="">
                            </noscript>
                        </div>
                    </div>

                    <div class="blog_detail_top_text">
                        <div class="blog_detail_top_text_inner">
                            <p>Hockey’s back! After a long hiatus, the ice is set, the lines are painted, and 24 teams of NHL players and staff are ensconced in two bubble cities, Edmonton and Toronto.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set author_list = get_author_list(authors) %}

<div class="blog_detail_top">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="blog_detail_top_inner">
				<div class="blog_detail_top_breadcrumbs">
					{% render '@navigation-breadcrumb--blog-detail' %}
				</div>

				<header class="blog_detail_top_head">
					<time class="blog_detail_top_date" datetime="{{ date }}">
						{{ date|date("F j, Y") }}
					</time>

					<h1 class="blog_detail_top_title">
						{{ title }}
					</h1>

					<div class="blog_detail_top_meta">
						{% if author_image %}
							<div class="blog_detail_top_meta_img">
								{% render "@partial-image" with {
									class: "blog_detail_top_meta",
									image: author_image,
									sources: [
										img.square.thumb
									]
								} %}
							</div>
						{% endif %}

						<div class="blog_detail_top_meta_content">
							<div class="blog_detail_top_type">
								<a class="blog_detail_top_type_link" href="{{ type.href }}">
									{{ type.name }}
								</a>
							</div>

							<div class="blog_detail_top_other">
								{% if series %}
									<a href="#">{{ series.name }}</a>
								{% endif %}
								
								{% if author_list|length %}
									by {{ author_list }}
								{% endif %}
							</div>
						</div>
					</div>
				</header>

				<div class="blog_detail_top_content">
					<div class="blog_detail_top_img_wrap_one">
						<div class="blog_detail_top_img_wrap_two">
							{% if image_credit %}
								<div class="blog_detail_top_img_credit">
									<div class="blog_detail_top_img_credit_inner">
										{{ image_credit }}
									</div>
								</div>
							{% endif %}

							{% render "@partial-image" with {
								class: "blog_detail_top_img",
								image: image,
								sources: [
									img.wide.med,
									img.wide.sml,
									img.wide.xsml,
								]
							} %}
						</div>
					</div>

					<div class="blog_detail_top_text">
						<div class="blog_detail_top_text_inner">
							<p>{{ summary }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.