Children and Screens Component Library

Jump Links 

<div class="jump_links">
    <div class="fs-row fs-lg-justify-center">
        <div class="fs-cell fs-lg-10 fs-xl-8">
            <div class="jump_links_inner">
                <div class="jump_links_content_wrap">
                    <header class="jump_links_header">
                        <h2 class="jump_links_title">
                            On This Page
                        </h2>
                    </header>

                    <div class="jump_links_grid_items">
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">What is digital health literacy?</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">Tip: Lean on family dialogue, not controls.</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">What does misinformation look like?</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">Tip: Help children establish appropriate boundaries with peers.</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">Beware of algorithms and echo chambers.</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">Tip: Identify resources before they need them.</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">Tip: Stress accuracy and verify resources.</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="jump_links_grid_item">
                            <div class="jump_links_item">

                                <a href="#" class="jump_links_item_link theme_">
                                    <span class="jump_links_item_link_inner">
                                        <span class="jump_links_item_link_label">Tip: What to do when your child self-diagnoses using online information.</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="jump_links">
	<div class="fs-row fs-lg-justify-center">
		<div class="fs-cell fs-lg-10 fs-xl-8">
			<div class="jump_links_inner">
				<div class="jump_links_content_wrap">
					<header class="jump_links_header">
						<h2 class="jump_links_title">
							{{ title }}
						</h2>
					</header>

					<div class="jump_links_grid_items">
						{% for item in items %}
							<div class="jump_links_grid_item">
								<div class="jump_links_item">
									{% include "@partial-link" with {
										title: item.title,
										url: item.url,
										class: 'jump_links_item',
									} %}
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.