Topic Highlight

WIP

HTML
View
Info
Notes


        
        <div class="topic_highlight js-topic-highlight">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="topic_highlight_inner">
                <header class="topic_highlight_head">
                    <div class="topic_highlight_group_label">
                        Topic Highlight
                    </div>
                </header>

                <div class="topic_highlight_content_wrap">
                    <div class="topic_highlight_grid">
                        <div class="topic_highlight_grid_item is_left">
                            <h2 class="topic_highlight_title">
                                Digital Literacy
                            </h2>

                            <div class="topic_highlight_desc">
                                <p>In today’s global culture and economy, where individuals have access to information 24/7 and literally, at their fingertips, digital and media literacy are essential to participate in society. But what specific competencies must young citizens acquire?</p>
                            </div>

                            <div class="topic_highlight_cta_wrap">

                                <a href="#" class="button button_link theme_off_black">
                                    <span class="button_inner">
                                        <span class="button_icon">

                                            <svg class="icon icon_arrow_right_long">
                                                <use href="/images/icons.svg#arrow_right_long" />
                                            </svg>

                                        </span>

                                        <span class="button_text">
                                            See Related Research
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>

                        <div class="topic_highlight_grid_item is_right">
                            <figure class="topic_highlight_quote">
                                <div class="topic_highlight_quote_wrap">
                                    <div class="topic_highlight_quote_grid">
                                        <div class="topic_highlight_quote_grid_item is_media">

                                            <picture class="topic_highlight_quote_picture">
                                                <source media="(min-width: 1394px)" srcset="https://images.fastspot.com/framework/555x740/1" width="555" height="740">
                                                <source media="(min-width: 0px)" srcset="https://images.fastspot.com/framework/980x552/1" width="980" height="552">
                                                <img class="topic_highlight_quote_image" src="//images.fastspot.com/framework/980x552/1" alt="" loading="lazy" width="980" height="552">
                                            </picture>
                                        </div>

                                        <div class="topic_highlight_quote_grid_item is_quote">
                                            <blockquote class="topic_highlight_quote_content">
                                                <span class="topic_highlight_quote_icon" aria-hidden="true">

                                                    <svg class="icon icon_open_quote">
                                                        <use href="/images/icons.svg#open_quote" />
                                                    </svg>

                                                </span>

                                                <p>Moving the phone away when studying increases efficacy, while muting notifications can decrease interruptions and help with concentration when studying.</p>
                                            </blockquote>
                                        </div>

                                        <div class="topic_highlight_quote_grid_item is_btn">
                                            <button type="button" class="topic_highlight_play_btn js-btn">
                                                <span class="topic_highlight_play_btn_inner">
                                                    <span class="topic_highlight_play_btn_inner_icon">

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

                                                    </span>

                                                    <span class="topic_highlight_play_btn_inner_text">
                                                        Play Video
                                                    </span>
                                                </span>
                                            </button>
                                        </div>

                                        <div class="topic_highlight_quote_grid_item is_video js-video-wrap">

                                            <div class="topic_highlight_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>

                                <figcaption class="topic_highlight_quote_caption">
                                    <span class="topic_highlight_quote_caption_name">Nicol Howard, PhD</span>
                                    <span class="topic_highlight_quote_caption_title">Assistant Professor, Coordinator of the MALT Program, Co-Director of the REAL Lab, University of Redlands School of Education</span>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>

                <div class="topic_highlight_cards_wrap">
                    <header class="topic_highlight_cards_header">
                        <h2 class="topic_highlight_cards_header_title">
                            On Digital Literacy
                        </h2>

                        <div class="topic_highlight_cards_header_pagination">
                            <div class="topic_highlight-1_pagination"></div>
                        </div>
                    </header>
                    <div class="topic_highlight_cards js-carousel" data-carousel-options='{"contained":false,"show":{"0px":1,"740px":2,"1220px":3},"pagination":".topic_highlight-1_pagination","controls":{"container":".topic_highlight-1_controls","previous":".topic_highlight-1_controls_previous","next":".topic_highlight-1_controls_next"}}'>
                        <div class="card type_default theme_">
                            <figure class="card_figure">
                                <a href="#">

                                    <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
                                </a>
                            </figure>

                            <div class="card_content">
                                <div class="card_category">Ask the Experts</div>

                                <h3 class="card_title">
                                    <a href="#" class="card_title_link">
                                        On Boredom: Screen Time. Free Time. and Child Development
                                    </a>
                                </h3>

                                <div class="card_desc">
                                    <p>What are the benefits and harms of “bored time” for children and has digital media displaced the space to let minds wander?</p>
                                </div>

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

                                            <div class="pill">
                                                Mental & Behavioral Health
                                            </div>
                                        </div>
                                        <div class="pill_item">

                                            <div class="pill">
                                                Something Else
                                            </div>
                                        </div>
                                        <div class="pill_item">

                                            <div class="pill">
                                                One More
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card type_default theme_">
                            <figure class="card_figure">
                                <a href="#">

                                    <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/2 740w, https://images.fastspot.com/framework/500x282/2 500w, https://images.fastspot.com/framework/300x169/2 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/2" alt="" loading="lazy" width="300" height="169">
                                </a>
                            </figure>

                            <div class="card_content">
                                <div class="card_category">Ask the Experts</div>

                                <h3 class="card_title">
                                    <a href="#" class="card_title_link">
                                        On Boredom: Screen Time. Free Time. and Child Development
                                    </a>
                                </h3>

                                <div class="card_time_wrap">
                                    <time class="card_time" datetime="">
                                        <span class="card_time_date">June 16</span>
                                        <span class="card_time_time">8:00 PM UTC</span>
                                    </time>
                                </div>

                                <div class="card_desc">
                                    <p>What are the benefits and harms of “bored time” for children and has digital media displaced the space to let minds wander?</p>
                                </div>

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

                                            <div class="pill">
                                                Mental & Behavioral Health
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card type_default theme_">
                            <figure class="card_figure">
                                <a href="#">

                                    <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/3 740w, https://images.fastspot.com/framework/500x282/3 500w, https://images.fastspot.com/framework/300x169/3 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/3" alt="" loading="lazy" width="300" height="169">
                                </a>
                            </figure>

                            <div class="card_content">
                                <div class="card_category">Ask the Experts</div>

                                <h3 class="card_title">
                                    <a href="#" class="card_title_link">
                                        On Boredom: Screen Time. Free Time. and Child Development
                                    </a>
                                </h3>

                                <div class="card_desc">
                                    <p>What are the benefits and harms of “bored time” for children and has digital media displaced the space to let minds wander?</p>
                                </div>

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

                                            <div class="pill">
                                                Mental & Behavioral Health
                                            </div>
                                        </div>
                                        <div class="pill_item">

                                            <div class="pill">
                                                Another
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card type_default theme_">
                            <figure class="card_figure">
                                <a href="#">

                                    <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/4 740w, https://images.fastspot.com/framework/500x282/4 500w, https://images.fastspot.com/framework/300x169/4 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/4" alt="" loading="lazy" width="300" height="169">
                                </a>
                            </figure>

                            <div class="card_content">
                                <div class="card_category">Ask the Experts</div>

                                <h3 class="card_title">
                                    <a href="#" class="card_title_link">
                                        On Boredom: Screen Time. Free Time. and Child Development
                                    </a>
                                </h3>

                                <div class="card_time_wrap">
                                    <time class="card_time" datetime="">
                                        <span class="card_time_date">June 16</span>
                                        <span class="card_time_time">8:00 PM UTC</span>
                                    </time>
                                </div>

                                <div class="card_desc">
                                    <p>What are the benefits and harms of “bored time” for children and has digital media displaced the space to let minds wander?</p>
                                </div>

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

                                            <div class="pill">
                                                Mental & Behavioral Health
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="topic_highlight-1_controls">
                        <button type="button" class="topic_highlight-1_controls_previous" aria-label="Previous">

                            <svg class="icon icon_arrow_left_long">
                                <use href="/images/icons.svg#arrow_left_long" />
                            </svg>

                        </button>

                        <button type="button" class="topic_highlight-1_controls_next" aria-label="Next">

                            <svg class="icon icon_arrow_right_long">
                                <use href="/images/icons.svg#arrow_right_long" />
                            </svg>

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        {% set unique_base_class = uniqid("topic_highlight") %}

{% set carousel_options_json = {
	contained: false,
	show: {
		"0px": 1,
		"740px": 2,
		"1220px": 3
	},
	pagination: "." ~ unique_base_class ~ "_pagination",
	controls: {
		container: "." ~  unique_base_class ~ "_controls",
		previous:  "." ~ unique_base_class ~ "_controls_previous",
		next:  "." ~ unique_base_class ~ "_controls_next"
	}
}|json_encode() %}

<div class="topic_highlight js-topic-highlight">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="topic_highlight_inner">
				<header class="topic_highlight_head">
					<div class="topic_highlight_group_label">
						{{ group_label }}
					</div>
				</header>

				<div class="topic_highlight_content_wrap">
					<div class="topic_highlight_grid">
						<div class="topic_highlight_grid_item is_left">
							<h2 class="topic_highlight_title">
								{{ title }}
							</h2>

							{% if description %}
								<div class="topic_highlight_desc">
									<p>{{ description }}</p>
								</div>
							{% endif %}

							<div class="topic_highlight_cta_wrap">
								{% include "@partial-button-link" with cta %}
							</div>
						</div>

						<div class="topic_highlight_grid_item is_right">
							<figure class="topic_highlight_quote">
								<div class="topic_highlight_quote_wrap">
									<div class="topic_highlight_quote_grid">
										<div class="topic_highlight_quote_grid_item is_media">
											{% include "@partial-picture" with {
												class: "topic_highlight_quote",
												image: image,
												loading: 'lazy',
												default: img.wide.med,
												sources: {
													'1394px': img.portraitFull.sml,
													'0px': img.wide.med,
												}
											} %}
										</div>

										<div class="topic_highlight_quote_grid_item is_quote">
											<blockquote class="topic_highlight_quote_content">
												<span class="topic_highlight_quote_icon" aria-hidden="true">
													{{ icon("open_quote" )}}
												</span>

												<p>{{ quotation.quote }}</p>
											</blockquote>
										</div>

										<div class="topic_highlight_quote_grid_item is_btn">
											<button type="button" class="topic_highlight_play_btn js-btn">
												<span class="topic_highlight_play_btn_inner">
													<span class="topic_highlight_play_btn_inner_icon">
														{{ icon("video_play") }}
													</span>

													<span class="topic_highlight_play_btn_inner_text">
														Play Video
													</span>
												</span>
											</button>
										</div>

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

								<figcaption class="topic_highlight_quote_caption">
									<span class="topic_highlight_quote_caption_name">{{ quotation.name }}</span>
									<span class="topic_highlight_quote_caption_title">{{ quotation.title }}</span>
								</figcaption>
							</figure>
						</div>
					</div>
				</div>

				<div class="topic_highlight_cards_wrap">
					<header class="topic_highlight_cards_header">
						<h2 class="topic_highlight_cards_header_title">
							{{ cards.title }}
						</h2>

						<div class="topic_highlight_cards_header_pagination">
							<div class="{{ unique_base_class }}_pagination"></div>
						</div>
					</header>
					<div class="topic_highlight_cards js-carousel" data-carousel-options='{{ carousel_options_json }}'>
						{% for card in cards.items %}
							{% include "@partial-card" with {
								type: "default",
								pill_theme: 'yellow',
								item: card,
								sources: [
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml
								],
								sizes: [
									'(min-width: 500px) 400px',
									'50vw'
								]
							} %}
						{% endfor %}
					</div>

					<div class="{{ unique_base_class }}_controls">
						<button type="button" class="{{ unique_base_class }}_controls_previous" aria-label="Previous">
							{{ icon("arrow_left_long") }}
						</button>

						<button type="button" class="{{ unique_base_class }}_controls_next" aria-label="Next">
							{{ icon("arrow_right_long") }}
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Handle: @component-topic-highlight
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/topic-highlight/topic-highlight.twig
References (4): @partial-button-link, @partial-picture, @partial-lazy-video, @partial-card
Referenced by (1): @template-home

No notes defined.