Citizen University Component Library

Homepage Feature: Video 

<div class="home_feat" style="--anim-delay-increment: 200ms;" data-anim-parent="home-feat">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="home_feat_wrap is_desktop">
                <div class="home_feat_inner">
                    <div class="home_feat_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
                        <div class="fs-row fs-lg-align-center">
                            <div class="fs-cell fs-lg-6">
                                <header class="home_feat_head">
                                    <h1 class="home_feat_title">
                                        Building a culture of powerful, responsible citizenship
                                    </h1>
                                </header>
                            </div>

                            <div class="fs-cell fs-lg-6">
                                <div class="home_feat_main_media">
                                    <div class="home_feat_main_video_wrap">
                                        <div class="home_feat_main_video js-youtube-video" data-video-id="Q5inzkIwY5M"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="home_feat_bottom">
                        <div class="fs-row">
                            <div class="fs-cell fs-lg-4">
                                <div class="home_feat_content" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
                                    <div class="home_feat_desc">
                                        <p><strong>Our dream</strong> is a country in which Americans are steeped in a sense of civic character and educated in the tools of civic power. Where each of us are problem-solving contributors in our communities. Our mission is to build this culture of powerful, responsible citizenship across the country.</p>
                                    </div>

                                    <div class="home_feat_cta">
                                        <a href="#" class="button theme_white ">
                                            <span class="button_text">
                                                About Citizen University
                                            </span>

                                            <span class="button_icon">

                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>

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

                            <div class="fs-cell fs-lg-8">
                                <div class="home_feat_small_images">
                                    <div class="home_feat_small_images_item is_left" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 3;">
                                        <span class="lazy_image_wrapper home_feat_small_one_image_wrapper">
                                            <img class="js-lazy js-lazyload home_feat_small_one_image" src="//images.fastspot.com/citizen-university/555x740/1" data-src="//images.fastspot.com/citizen-university/555x740/1" alt="">
                                        </span>
                                        <noscript>
                                            <img class="home_feat_small_one_image" src="https://images.fastspot.com/citizen-university/555x740/1" alt="">
                                        </noscript>
                                    </div>

                                    <div class="home_feat_small_images_item is_right">
                                        <div class="home_feat_small_images_other">
                                            <div class="home_feat_small_images_other_item is_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 2;">
                                                <span class="lazy_image_wrapper home_feat_small_two_image_wrapper">
                                                    <img class="js-lazy js-lazyload home_feat_small_two_image" src="//images.fastspot.com/citizen-university/740x555/3" data-src="//images.fastspot.com/citizen-university/740x555/3" alt="">
                                                </span>
                                                <noscript>
                                                    <img class="home_feat_small_two_image" src="https://images.fastspot.com/citizen-university/740x555/3" alt="">
                                                </noscript>
                                            </div>

                                            <div class="home_feat_small_images_other_item is_bottom is_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 2;">
                                                <span class="lazy_image_wrapper home_feat_small_three_image_wrapper">
                                                    <img class="js-lazy js-lazyload home_feat_small_three_image" src="//images.fastspot.com/citizen-university/740x740/4" data-src="//images.fastspot.com/citizen-university/740x740/4" alt="">
                                                </span>
                                                <noscript>
                                                    <img class="home_feat_small_three_image" src="https://images.fastspot.com/citizen-university/740x740/4" alt="">
                                                </noscript>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="home_feat_wrap is_mobile">
                <div class="home_feat_top">
                    <header class="home_feat_head">
                        <h1 class="home_feat_title">
                            Building a culture of powerful, responsible citizenship
                        </h1>
                    </header>
                </div>

                <div class="home_feat_mobile_images_top">
                    <div class="home_feat_mobile_images_top_item is_one">
                        <span class="lazy_image_wrapper home_feat_small_three_image_wrapper">
                            <img class="js-lazy js-lazyload home_feat_small_three_image" src="//images.fastspot.com/citizen-university/740x740/4" data-src="//images.fastspot.com/citizen-university/740x740/4" alt="">
                        </span>
                        <noscript>
                            <img class="home_feat_small_three_image" src="https://images.fastspot.com/citizen-university/740x740/4" alt="">
                        </noscript>
                    </div>

                    <div class="home_feat_mobile_images_top_item is_two">
                        <div class="home_feat_main_media">
                            <div class="home_feat_main_video_wrap">
                                <div class="home_feat_main_video js-youtube-video" data-video-id="Q5inzkIwY5M"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="home_feat_mobile_images_bottom">
                    <div class="home_feat_mobile_images_bottom_item is_one">
                        <span class="lazy_image_wrapper home_feat_small_two_image_wrapper">
                            <img class="js-lazy js-lazyload home_feat_small_two_image" src="//images.fastspot.com/citizen-university/740x555/3" data-src="//images.fastspot.com/citizen-university/740x555/3" alt="">
                        </span>
                        <noscript>
                            <img class="home_feat_small_two_image" src="https://images.fastspot.com/citizen-university/740x555/3" alt="">
                        </noscript>
                    </div>

                    <div class="home_feat_mobile_images_bottom_item is_two">
                        <span class="lazy_image_wrapper home_feat_small_one_image_wrapper">
                            <img class="js-lazy js-lazyload home_feat_small_one_image" src="//images.fastspot.com/citizen-university/555x740/1" data-src="//images.fastspot.com/citizen-university/555x740/1" alt="">
                        </span>
                        <noscript>
                            <img class="home_feat_small_one_image" src="https://images.fastspot.com/citizen-university/555x740/1" alt="">
                        </noscript>
                    </div>
                </div>

                <div class="home_feat_bottom">
                    <div class="home_feat_content ">
                        <div class="home_feat_desc">
                            <p><strong>Our dream</strong> is a country in which Americans are steeped in a sense of civic character and educated in the tools of civic power. Where each of us are problem-solving contributors in our communities. Our mission is to build this culture of powerful, responsible citizenship across the country.</p>
                        </div>

                        <div class="home_feat_cta">
                            <a href="#" class="button theme_white ">
                                <span class="button_text">
                                    About Citizen University
                                </span>

                                <span class="button_icon">

                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>

                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="home_feat" style="--anim-delay-increment: 200ms;" data-anim-parent="home-feat">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="home_feat_wrap is_desktop">
				<div class="home_feat_inner">
					<div class="home_feat_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
						<div class="fs-row fs-lg-align-center">
							<div class="fs-cell fs-lg-6">
								<header class="home_feat_head">
									<h1 class="home_feat_title">
										{{ title }}
									</h1>
								</header>
							</div>

							<div class="fs-cell fs-lg-6">
								<div class="home_feat_main_media">
									{% if video %}
										<div class="home_feat_main_video_wrap">
											<div class="home_feat_main_video js-youtube-video" data-video-id="{{ video }}"></div>
										</div>
									{% else %}
										{% include "@partial-image" with {
											class: "home_feat",
											alt: "",
											image: main_image,
											sources: [
												img.wide.med,
												img.wide.sml,
												img.wide.xsml,
											]
										} %}
									{% endif %}
								</div>
							</div>
						</div>
					</div>

					<div class="home_feat_bottom">
						<div class="fs-row">
							<div class="fs-cell fs-lg-4">
								<div class="home_feat_content" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
									<div class="home_feat_desc">
										<p>{{ desc }}</p>
									</div>

									{% if cta %}
										<div class="home_feat_cta">
											{% include "@component-button" with {
												theme: "white",
												text: cta.title,
												href: cta.url,
												icon: "arrow_right"
											} %}
										</div>
									{% endif %}
								</div>
							</div>

							<div class="fs-cell fs-lg-8">
								<div class="home_feat_small_images">
									{% if small_image_one %}
										<div class="home_feat_small_images_item is_left" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 3;">
											{% include "@partial-image" with {
												class: "home_feat_small_one",
												alt: "",
												image: small_image_one,
												sources: [
													img.portraitFull.sml,
												]
											} %}
										</div>
									{% endif %}

									{% if small_image_two or small_image_three %}
										<div class="home_feat_small_images_item is_right">
											<div class="home_feat_small_images_other">
												{% if small_image_two %}
													<div class="home_feat_small_images_other_item is_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 2;">
														{% include "@partial-image" with {
															class: "home_feat_small_two",
															alt: "",
															image: small_image_two,
															sources: [
																img.full.sml,
															]
														} %}
													</div>
												{% endif %}

												{% if small_image_three %}
													<div class="home_feat_small_images_other_item is_bottom is_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 2;">
														{% include "@partial-image" with {
															class: "home_feat_small_three",
															alt: "",
															image: small_image_three,
															sources: [
																img.square.sml,
															]
														} %}
													</div>
												{% endif %}
											</div>
										</div>
									{% endif %}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="home_feat_wrap is_mobile">
				<div class="home_feat_top">
					<header class="home_feat_head">
						<h1 class="home_feat_title">
							{{ title }}
						</h1>
					</header>
				</div>

				<div class="home_feat_mobile_images_top">
					{% if small_image_three %}
						<div class="home_feat_mobile_images_top_item is_one">
							{% include "@partial-image" with {
								class: "home_feat_small_three",
								alt: "",
								image: small_image_three,
								sources: [
									img.square.sml,
								]
							} %}
						</div>
					{% endif %}

					<div class="home_feat_mobile_images_top_item is_two">
						<div class="home_feat_main_media">
							{% if video %}
								<div class="home_feat_main_video_wrap">
									<div class="home_feat_main_video js-youtube-video" data-video-id="{{ video }}"></div>
								</div>
							{% else %}
								{% include "@partial-image" with {
									class: "home_feat",
									alt: "",
									image: main_image,
									sources: [
										img.wide.med,
										img.wide.sml,
										img.wide.xsml,
									]
								} %}
							{% endif %}
						</div>
					</div>
				</div>

				<div class="home_feat_mobile_images_bottom">
					{% if small_image_two %}
						<div class="home_feat_mobile_images_bottom_item is_one">
							{% include "@partial-image" with {
								class: "home_feat_small_two",
								alt: "",
								image: small_image_two,
								sources: [
									img.full.sml,
								]
							} %}
						</div>
					{% endif %}

					{% if small_image_one %}
						<div class="home_feat_mobile_images_bottom_item is_two">
							{% include "@partial-image" with {
								class: "home_feat_small_one",
								alt: "",
								image: small_image_one,
								sources: [
									img.portraitFull.sml,
								]
							} %}
						</div>
					{% endif %}
				</div>

				<div class="home_feat_bottom">
					<div class="home_feat_content ">
						<div class="home_feat_desc">
							<p>{{ desc }}</p>
						</div>

						{% if cta %}
							<div class="home_feat_cta">
								{% include "@component-button" with {
									theme: "white",
									text: cta.title,
									href: cta.url,
									icon: "arrow_right"
								} %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.