Children and Screens Component Library

Explore By Research 

<div class="explore_research_banner">
    <div class="explore_research_banner_inner">
        <header class="explore_research_banner_header">
            <div class="fs-row fs-lg-justify-center">
                <div class="fs-cell fs-lg-10">
                    <div class="explore_research_banner_header_inner">
                        <h2 class="explore_research_banner_title">
                            Explore Research by Topic
                        </h2>
                        <div class="explore_research_banner_description">
                            <p>We provide a curation of research and resources for parents, policymakers, researchers, and clinicians around the most pressing issues affecting children today.</p>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="explore_research_banner_content">
            <div class="fs-row fs-lg-justify-center">
                <div class="fs-cell">
                    <div class="explore_research_banner_content_wrapper">
                        <div class="explore_research_banner_grid js-grid">

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_yellow">
                                        Advertising and Marketing
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_salmon">
                                        Games for Health
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_light_green">
                                        Digital Literacy
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_pink">
                                        Internet Gaming Disorder
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_light_blue">
                                        Cyberbullying Literacy
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_dark_green">
                                        Virtual Reality
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_yellow">
                                        Global Perspective
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_salmon">
                                        Media and Sex
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_light_green">
                                        Guidelines for Parents
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_pink">
                                        Family and Parenting
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_light_blue">
                                        Cognitive Impacts
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_dark_green">
                                        Participatory Politics
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_yellow">
                                        Early Childhood
                                    </div>
                                </div>
                            </div>

                            <div class="explore_research_banner_grid_item">
                                <div class="explore_research_banner_item_magnetize js-magnetize">
                                    <div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
                                    <div class="button theme_salmon">
                                        Media Multitasking
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{# 
	{% include '@component-explore-by-research' with {
		rows: 4,
		title: 'Explore Research by Topic',
		description:'We provide a curation of research and resources for parents, policymakers, researchers, and clinicians around the most pressing issues affecting children today.',
		items: [
			'Advertising and Marketing',
			'Games for Health',
			'Digital Literacy',
			'Internet Gaming Disorder',
			'Cyberbullying Literacy',
			'Virtual Reality',
			'Global Perspective',
			'Media and Sex',
			'Guidelines for Parents',
			'Family and Parenting',
			'Cognitive Impacts',
			'Participatory Politics',
			'Early Childhood',
			'Media Multitasking'
		]
	} %}
 #}

{% set banner_items = [] %}
{% set color_index = 0 %}

<div class="explore_research_banner">
	<div class="explore_research_banner_inner">
		<header class="explore_research_banner_header">
			<div class="fs-row fs-lg-justify-center">
				<div class="fs-cell fs-lg-10">
					<div class="explore_research_banner_header_inner">
						<h2 class="explore_research_banner_title">
							{{ title }}
						</h2>
						{% if description %}
							<div class="explore_research_banner_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</header>

		<div class="explore_research_banner_content">
			<div class="fs-row fs-lg-justify-center">
				<div class="fs-cell">
					<div class="explore_research_banner_content_wrapper">
						<div class="explore_research_banner_grid js-grid">
							{% set color_pattern = loop.index is odd ? color_patterns.secondary : color_patterns.primary %}

							{% for item in items %}
								{% set theme = get_theme_key(color_pattern, loop.index0) %}

								<div class="explore_research_banner_grid_item">
									<div class="explore_research_banner_item_magnetize js-magnetize">
										<div class="explore_research_banner_item_magnetize_target js-magnetize-target"></div>
										<div class="button theme_{{ theme }}">
											{{ item }}
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.