CCGA Component Library

Live Stream 

<div class="live_stream ">
    <div class="live_stream_inner">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="live_stream_meta_wrap">
                    <div class="live_stream_meta_icon" aria-hidden="true">

                        <svg class="icon icon_video_camera">
                            <use href="/images/icons.svg#video_camera" />
                        </svg>

                    </div>
                    <div class="live_stream_meta_series">
                        Live Stream
                    </div>
                    <div class="live_stream_meta_type">
                        In Progress
                    </div>
                </div>
            </div>

            <div class="live_stream_left_side fs-cell fs-lg-8">
                <div class="live_stream_title_wrap">
                    <h2 class="live_stream_title">
                        <a href="">
                            Re-opening the Economy, Putin’s Power, China and 2020
                        </a>
                    </h2>
                </div>

                <div class="live_stream_label">
                    <a href="#">
                        #ASKIVO
                    </a>
                </div>

                <div class="live_stream_video_wrap">
                    <iframe class="js-background-video-iframe live_stream_video_iframe" src="//youtube.com/embed/gnRfP9oIDsg?autoplay=0&mute=0&controls=1&rel=0&playsinline=0" title="Video Title video" allow="autoplay fullscreen"></iframe>
                </div>
            </div>

            <div class="live_stream_right_side fs-cell fs-lg-4">
                <div class="live_stream_right_meta">
                    <div class="live_stream_right_meta_item">
                        <div class="event_grouping_top">
                            <div class="event_grouping_top_title">
                                About
                            </div>

                            <div class="event_grouping_top_content">
                                The New Yorker’s Susan Glasser, POLITICO’s Matt Kaminski, and The Financial Times’ Peter Spiegel joined Council President Ivo Daalder to look at what we know (and don’t know) about re-opening the global economy, how global strongmen from Putin to Xi Jinping are seeking to maintain their power while negotiating COVID-19.

                                <p>

                                    <a class="button theme_mint_green live_stream_meta_link button--with-icon" href="#">
                                        <span class="button_text">
                                            More About This Live Stream
                                        </span>

                                        <span class="button_icon">

                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>

                                        </span>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="live_stream_right_meta_item">
                        <div class="event_grouping_top">
                            <div class="event_grouping_top_title">
                                Participate
                            </div>

                            <div class="event_grouping_top_content">
                                <div class="button_full_width">

                                    <a class="button theme_white_opaque  button--with-icon" href="#">
                                        <span class="button_text">
                                            Submit a Question
                                        </span>

                                        <span class="button_icon">

                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>

                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="live_stream_right_meta_item">
                        <div class="event_grouping_top">
                            <div class="event_grouping_top_title">
                                Speakers
                            </div>

                            <div class="event_grouping_top_content">
                                <div>Susan Glasser, The New Yorker</div>
                                <div>Matt Kaminski, Politico</div>
                                <div>Peter Spiegel, The Financial Times</div>
                                <div><a href="#">Ivo Daalder</a>, Council President</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="live_stream {{class}}">
	<div class="live_stream_inner">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="live_stream_meta_wrap">
					<div class="live_stream_meta_icon" aria-hidden="true">
						{{icon('video_camera')}}
					</div>
					<div class="live_stream_meta_series">
						{{ type.name }}
					</div>
					<div class="live_stream_meta_type">
						{{ series.name }}
					</div>
				</div>
			</div>

			<div class="live_stream_left_side fs-cell fs-lg-8">
				<div class="live_stream_title_wrap">
					<h2 class="live_stream_title">
						<a href="{{ title.href }}">
							{{ title.name }}
						</a>
					</h2>
				</div>

				<div class="live_stream_label">
					<a href="{{ red_label.href }}">
						{{ red_label.name }}
					</a>
				</div>

				<div class="live_stream_video_wrap">
					<iframe class="js-background-video-iframe live_stream_video_iframe" src="//youtube.com/embed/{{ youtubeID }}?autoplay=0&mute=0&controls=1&rel=0&playsinline=0" title="{{ video_title }} video" allow="autoplay fullscreen"></iframe>
				</div>
			</div>

			<div class="live_stream_right_side fs-cell fs-lg-4">
				<div class="live_stream_right_meta">
					<div class="live_stream_right_meta_item">
						<div class="event_grouping_top">
							<div class="event_grouping_top_title">
								About
							</div>

							<div class="event_grouping_top_content">
								{{ about_blurb }}

								<p>
									{% render "@partial-button--mint-green" with {
										class: "live_stream_meta_link",
										text: about_link.name,
									} %}
								</p>
							</div>
						</div>
					</div>

					<div class="live_stream_right_meta_item">
						<div class="event_grouping_top">
							<div class="event_grouping_top_title">
								Participate
							</div>

							<div class="event_grouping_top_content">
								<div class="button_full_width">
									{% render "@partial-button--white-opaque" with {
										text: "Submit a Question",
									} %}
								</div>
							</div>
						</div>
					</div>

					<div class="live_stream_right_meta_item">
						<div class="event_grouping_top">
							<div class="event_grouping_top_title">
								Speakers
							</div>

							<div class="event_grouping_top_content">
								{% for speaker in speaker_list %}
									<div>{{ speaker }}</div>
								{% endfor %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.