Children and Screens Component Library

Featured Past Event 

<div class="feat_past_event">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="feat_past_event_inner">
                <div class="feat_past_event_grid">
                    <div class="feat_past_event_grid_item is_media">
                        <h2 class="feat_past_event_subtitle">
                            Latest Webinar
                        </h2>

                        <div class="feat_past_event_media_wrap">

                            <figure class="feat_past_event_figure">

                                <img class="media_image" srcset="https://images.fastspot.com/framework/1220x686/ 1220w, https://images.fastspot.com/framework/980x552/ 980w, https://images.fastspot.com/framework/740x416/ 740w, https://images.fastspot.com/framework/500x282/ 500w, https://images.fastspot.com/framework/300x169/ 300w" sizes="(min-width: 1394px) 746px, (min-width: 1220px) 651px, (min-width: 980px) 920px, (min-width: 740px) 690px, 90vw" src="https://images.fastspot.com/framework/300x169/" alt="" loading="lazy" width="300" height="169">
                            </figure>

                            <div class="_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"FCk9jdoJyZA","type":"youtube","title":"","display":"inline","autoplay":false,"playerVars":{}}'>
                                <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=FCk9jdoJyZA" aria-label="Play ">

                                    <svg class="icon icon_video_play">
                                        <use href="/images/icons.svg#video_play" />
                                    </svg>

                                </a>
                                <div class="lazy_video_iframe_wrap">
                                    <div class="lazy_video_iframe_target js-iframe-target"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="feat_past_event_grid_item is_content">
                        <div class="feat_past_event_subtitle">
                            Ask the Experts
                        </div>

                        <div class="feat_past_event_content_wrap">
                            <h3 class="feat_past_event_title">
                                <a href="#" class="feat_past_event_title_link">
                                    Engaged for Change: Youth, Digital Spaces, and Social Movements
                                </a>
                            </h3>

                            <div class="feat_past_event_desc">
                                <p>Join our panel of experts as they explore the development of civic engagement in youth, provide examples of online youth leadership and community, review challenges and risks youth encounter, and provide tips for parents, caregivers, and educators to support positive online civic engagement.</p>
                            </div>

                            <div class="feat_past_event_topics_wrap">
                                <div class="pill_list theme_yellow">
                                    <div class="pill_item">

                                        <div class="pill">
                                            Civic Engagement
                                        </div>
                                    </div>
                                    <div class="pill_item">

                                        <div class="pill">
                                            Another
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="feat_past_event_speakers_wrap">

                                <div class="speakers_list ">
                                    <div class="speakers_list_title">
                                        Speakers
                                    </div>

                                    <div class="speakers_list_grid_items">

                                        <div class="speakers_list_grid_item theme_yellow">
                                            <div id="speakers_list_item-1_1_item" class="speakers_list_item js-speaker-tooltip">
                                                <div id="speakers_list_item-1_1_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                    <h4 id="speakers_list_item-1_1_title" class="speakers_list_item_title">
                                                        Caley Arzamarski, PhD, NCSP
                                                    </h4>

                                                    <div class="speakers_list_item_desc">
                                                        <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                                                    </div>
                                                </div>

                                                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-1_1_item" data-swap-group="speakers_list_item-1" aria-controls="speakers_list_item-1_1_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                    <figure class="speakers_list_item_figure">

                                                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                                    </figure>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="speakers_list_grid_item theme_salmon">
                                            <div id="speakers_list_item-1_2_item" class="speakers_list_item js-speaker-tooltip">
                                                <div id="speakers_list_item-1_2_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                    <h4 id="speakers_list_item-1_2_title" class="speakers_list_item_title">
                                                        Caley Arzamarski, PhD, NCSP
                                                    </h4>

                                                    <div class="speakers_list_item_desc">
                                                        <p>Est duis proident cillum excepteur ex sint aliquip amet.</p>
                                                    </div>
                                                </div>

                                                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-1_2_item" data-swap-group="speakers_list_item-1" aria-controls="speakers_list_item-1_2_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                    <figure class="speakers_list_item_figure">

                                                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/2" alt="" loading="lazy" width="100" height="100">
                                                    </figure>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="speakers_list_grid_item theme_light_green">
                                            <div id="speakers_list_item-1_3_item" class="speakers_list_item js-speaker-tooltip">
                                                <div id="speakers_list_item-1_3_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                    <h4 id="speakers_list_item-1_3_title" class="speakers_list_item_title">
                                                        Caley Arzamarski, PhD, NCSP
                                                    </h4>

                                                    <div class="speakers_list_item_desc">
                                                        <p>Consequat consectetur velit tempor consequat est reprehenderit duis nostrud labore in nisi dolor cillum ad.</p>
                                                    </div>
                                                </div>

                                                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-1_3_item" data-swap-group="speakers_list_item-1" aria-controls="speakers_list_item-1_3_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                    <figure class="speakers_list_item_figure">

                                                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/3" alt="" loading="lazy" width="100" height="100">
                                                    </figure>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="speakers_list_grid_item theme_pink">
                                            <div id="speakers_list_item-1_4_item" class="speakers_list_item js-speaker-tooltip">
                                                <div id="speakers_list_item-1_4_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                    <h4 id="speakers_list_item-1_4_title" class="speakers_list_item_title">
                                                        Caley Arzamarski, PhD, NCSP
                                                    </h4>

                                                    <div class="speakers_list_item_desc">
                                                        <p>Quis velit adipisicing esse officia ea.</p>
                                                    </div>
                                                </div>

                                                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-1_4_item" data-swap-group="speakers_list_item-1" aria-controls="speakers_list_item-1_4_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                    <figure class="speakers_list_item_figure">

                                                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/4" alt="" loading="lazy" width="100" height="100">
                                                    </figure>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="speakers_list_grid_item theme_light_blue">
                                            <div id="speakers_list_item-1_5_item" class="speakers_list_item js-speaker-tooltip">
                                                <div id="speakers_list_item-1_5_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                                    <h4 id="speakers_list_item-1_5_title" class="speakers_list_item_title">
                                                        Caley Arzamarski, PhD, NCSP
                                                    </h4>

                                                    <div class="speakers_list_item_desc">
                                                        <p>Ipsum aute ullamco velit ut culpa do voluptate.</p>
                                                    </div>
                                                </div>

                                                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-1_5_item" data-swap-group="speakers_list_item-1" aria-controls="speakers_list_item-1_5_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                                    <figure class="speakers_list_item_figure">

                                                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                                    </figure>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="feat_past_event">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="feat_past_event_inner">
				<div class="feat_past_event_grid">
					<div class="feat_past_event_grid_item is_media">
						<h2 class="feat_past_event_subtitle">
							{{ title }}
						</h2>
						
						<div class="feat_past_event_media_wrap">
							
							{% if event.image %}
								<figure class="feat_past_event_figure">
									{% include '@partial-image' with {
										class: 'media',
										alt: '',
										image: event.image,
										loading: 'lazy',
										sources: [
											img.wide.lrg,
											img.wide.med,
											img.wide.sml,
											img.wide.xsml,
											img.wide.xxsml
										],
										sizes: [
											'(min-width: 1394px) 746px',
											'(min-width: 1220px) 651px',
											'(min-width: 980px) 920px',
											'(min-width: 740px) 690px',
											'90vw'
										]
									} %}
								</figure>
							{% endif %}
							
							{% if event.video.id %}
								<figure class="feat_past_event_figure">
									{% include '@partial-image' with {
										class: 'media',
										alt: '',
										image: image,
										loading: 'lazy',
										sources: [
											img.wide.lrg,
											img.wide.med,
											img.wide.sml,
											img.wide.xsml,
											img.wide.xxsml
										],
										sizes: [
											'(min-width: 1394px) 746px',
											'(min-width: 1220px) 651px',
											'(min-width: 980px) 920px',
											'(min-width: 740px) 690px',
											'90vw'
										]
									} %}
								</figure>

								{% include "@partial-lazy-video" with {
									class: '',
									id: event.video.id,
									type: event.video.type,
									title: video.title|default(''),
									display: "inline",
									autoplay: false,
									playerVars: {}
								} %}
							{% endif %}
						</div>
					</div>

					<div class="feat_past_event_grid_item is_content">
						<div class="feat_past_event_subtitle">
							{{ event.pretitle }}
						</div>

						<div class="feat_past_event_content_wrap">
							<h3 class="feat_past_event_title">
								<a href="#" class="feat_past_event_title_link">
									{{ event.title }}
								</a>
							</h3>

							{% if event.description %}
								<div class="feat_past_event_desc">
									<p>{{ event.description }}</p>
								</div>
							{% endif %}

							{% if event.topics|length %}
								<div class="feat_past_event_topics_wrap">
									{% include "@partial-pill-list" with {
										items: event.topics,
										theme: "yellow"
									} %}
								</div>
							{% endif %}

							{% if event.speakers %}
								<div class="feat_past_event_speakers_wrap">
									{% render "@partial-speakers-list" %}
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.