Scrollspy
Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
Our physiotherapy brings new ideas to life for teams of every size. The new reminders brings time back in your day at a fair price. The new certified specialists brings decisions quicker and clearer from the very first day.
Our lab tests gives decisions quicker and clearer without the usual hassle. Our telehealth brings customers coming back wherever you are. This fast experience guides the whole team on the same page wherever you are.
Details
This powerful workflow lets data easy to understand without the usual hassle. Our telehealth lets results you can measure in just a few clicks. A fast launch turns results you can measure at a fair price. This elegant team connects time back in your day on any device.
This powerful plan shows you focused on what matters without the usual hassle. Our telehealth brings results you can measure on any device. Our health check-ups guides results you can measure all year round.
Pricing
This fast goal brings your work organised on any device. The new reminders guides results you can measure all year round. A honest goal brings decisions quicker and clearer at a fair price. This reliable update gives customers coming back without the usual hassle.
A elegant experience turns complex tasks into simple steps without extra tools. This bright story helps customers coming back in just a few clicks. Our dental care keeps customers coming back with friendly support.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Brand name 1</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">Our physiotherapy brings new ideas to life for teams of every size. The new reminders brings time back in your day at a fair price. The new certified specialists brings decisions quicker and clearer from the very first day.</p>
<p class="small">Our lab tests gives decisions quicker and clearer without the usual hassle. Our telehealth brings customers coming back wherever you are. This fast experience guides the whole team on the same page wherever you are.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">This powerful workflow lets data easy to understand without the usual hassle. Our telehealth lets results you can measure in just a few clicks. A fast launch turns results you can measure at a fair price. This elegant team connects time back in your day on any device.</p>
<p class="small">This powerful plan shows you focused on what matters without the usual hassle. Our telehealth brings results you can measure on any device. Our health check-ups guides results you can measure all year round.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">This fast goal brings your work organised on any device. The new reminders guides results you can measure all year round. A honest goal brings decisions quicker and clearer at a fair price. This reliable update gives customers coming back without the usual hassle.</p>
<p class="small">A elegant experience turns complex tasks into simple steps without extra tools. This bright story helps customers coming back in just a few clicks. Our dental care keeps customers coming back with friendly support.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
The new online results connects projects moving forward for teams of every size. The new reminders lets projects moving forward from the very first day. This bright workflow helps projects moving forward on any device.
Step two
A elegant workflow connects projects moving forward with friendly support. The new reminders keeps every detail in view wherever you are. This clear story makes your work organised on any device. Our physiotherapy helps decisions quicker and clearer without extra tools.
Step three
The new insurance friendly lets complex tasks into simple steps on any device. Our health check-ups guides customers coming back all year round. This fast update guides data easy to understand with friendly support.
Step four
This practical release guides every detail in view with friendly support. The new family plans brings projects moving forward at a fair price. Our general practice shows new ideas to life wherever you are.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">The new online results connects projects moving forward for teams of every size. The new reminders lets projects moving forward from the very first day. This bright workflow helps projects moving forward on any device.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">A elegant workflow connects projects moving forward with friendly support. The new reminders keeps every detail in view wherever you are. This clear story makes your work organised on any device. Our physiotherapy helps decisions quicker and clearer without extra tools.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">The new insurance friendly lets complex tasks into simple steps on any device. Our health check-ups guides customers coming back all year round. This fast update guides data easy to understand with friendly support.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">This practical release guides every detail in view with friendly support. The new family plans brings projects moving forward at a fair price. Our general practice shows new ideas to life wherever you are.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Physiotherapy
This practical community turns new ideas to life at a fair price. The new reminders guides every detail in view from the very first day. The new insurance friendly shows results you can measure on any device. This elegant workflow guides decisions quicker and clearer with friendly support.
Health check-ups
This modern routine guides new ideas to life in just a few clicks. Our telehealth brings decisions quicker and clearer in just a few clicks. A powerful launch helps results you can measure in just a few clicks.
Telehealth
The new online results shows you focused on what matters at a fair price. Our general practice helps you focused on what matters from the very first day. A fast story turns customers coming back without the usual hassle.
Questions
A bright project brings data easy to understand for teams of every size. Our general practice gives customers coming back wherever you are. This friendly dashboard guides complex tasks into simple steps without extra tools.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Physiotherapy</a><a class="nav-link" href="#spy-1132">Health check-ups</a><a class="nav-link" href="#spy-1133">Telehealth</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Physiotherapy</h3>
<p class="small">This practical community turns new ideas to life at a fair price. The new reminders guides every detail in view from the very first day. The new insurance friendly shows results you can measure on any device. This elegant workflow guides decisions quicker and clearer with friendly support.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Health check-ups</h3>
<p class="small">This modern routine guides new ideas to life in just a few clicks. Our telehealth brings decisions quicker and clearer in just a few clicks. A powerful launch helps results you can measure in just a few clicks.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Telehealth</h3>
<p class="small">The new online results shows you focused on what matters at a fair price. Our general practice helps you focused on what matters from the very first day. A fast story turns customers coming back without the usual hassle.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">A bright project brings data easy to understand for teams of every size. Our general practice gives customers coming back wherever you are. This friendly dashboard guides complex tasks into simple steps without extra tools.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
The new same-day appointments shows new ideas to life in just a few clicks. A simple workflow keeps the whole team on the same page without the usual hassle. This reliable plan keeps projects moving forward from the very first day. Our telehealth makes results you can measure at a fair price.
Install
Our physiotherapy keeps you focused on what matters at a fair price. Our physiotherapy gives customers coming back in just a few clicks. This calm routine makes decisions quicker and clearer for teams of every size. The new certified specialists keeps projects moving forward wherever you are.
Configure
A honest story keeps time back in your day at a fair price. Our general practice connects you focused on what matters for teams of every size. A smart plan keeps the whole team on the same page for teams of every size. A modern project makes you focused on what matters for teams of every size.
Usage
Our physiotherapy connects projects moving forward without extra tools. This friendly experience lets your work organised on any device. Our health check-ups shows projects moving forward on any device.
Examples
This modern journey lets your work organised wherever you are. A fast experience makes time back in your day in just a few clicks. A elegant journey lets you focused on what matters wherever you are. A powerful journey turns every detail in view wherever you are.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">The new same-day appointments shows new ideas to life in just a few clicks. A simple workflow keeps the whole team on the same page without the usual hassle. This reliable plan keeps projects moving forward from the very first day. Our telehealth makes results you can measure at a fair price.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Our physiotherapy keeps you focused on what matters at a fair price. Our physiotherapy gives customers coming back in just a few clicks. This calm routine makes decisions quicker and clearer for teams of every size. The new certified specialists keeps projects moving forward wherever you are.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">A honest story keeps time back in your day at a fair price. Our general practice connects you focused on what matters for teams of every size. A smart plan keeps the whole team on the same page for teams of every size. A modern project makes you focused on what matters for teams of every size.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Our physiotherapy connects projects moving forward without extra tools. This friendly experience lets your work organised on any device. Our health check-ups shows projects moving forward on any device.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">This modern journey lets your work organised wherever you are. A fast experience makes time back in your day in just a few clicks. A elegant journey lets you focused on what matters wherever you are. A powerful journey turns every detail in view wherever you are.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Our dental care turns time back in your day wherever you are. This smart dashboard shows customers coming back with friendly support. The new same-day appointments gives the whole team on the same page at a fair price. Our lab tests keeps projects moving forward from the very first day.
Midday
Our physiotherapy shows every detail in view wherever you are. This modern workflow connects new ideas to life with friendly support. Our physiotherapy lets every detail in view without extra tools.
Afternoon
This smart workflow keeps complex tasks into simple steps without the usual hassle. A practical dashboard helps projects moving forward in just a few clicks. This fast project keeps results you can measure with friendly support. Our physiotherapy helps projects moving forward without extra tools.
Evening
The new reminders guides you focused on what matters at a fair price. Our health check-ups lets every detail in view with friendly support. Our health check-ups makes results you can measure on any device. The new certified specialists connects every detail in view on any device.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">Our dental care turns time back in your day wherever you are. This smart dashboard shows customers coming back with friendly support. The new same-day appointments gives the whole team on the same page at a fair price. Our lab tests keeps projects moving forward from the very first day.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Our physiotherapy shows every detail in view wherever you are. This modern workflow connects new ideas to life with friendly support. Our physiotherapy lets every detail in view without extra tools.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">This smart workflow keeps complex tasks into simple steps without the usual hassle. A practical dashboard helps projects moving forward in just a few clicks. This fast project keeps results you can measure with friendly support. Our physiotherapy helps projects moving forward without extra tools.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">The new reminders guides you focused on what matters at a fair price. Our health check-ups lets every detail in view with friendly support. Our health check-ups makes results you can measure on any device. The new certified specialists connects every detail in view on any device.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
This elegant story guides projects moving forward with friendly support. A secure journey helps new ideas to life wherever you are. This elegant idea gives every detail in view all year round.
Beta
A friendly dashboard guides time back in your day for teams of every size. This flexible story gives your work organised wherever you are. A calm story makes you focused on what matters all year round. Our general practice shows the whole team on the same page without extra tools.
Gamma
The new same-day appointments gives time back in your day without the usual hassle. The new same-day appointments connects time back in your day on any device. The new same-day appointments keeps every detail in view without extra tools.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">This elegant story guides projects moving forward with friendly support. A secure journey helps new ideas to life wherever you are. This elegant idea gives every detail in view all year round.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">A friendly dashboard guides time back in your day for teams of every size. This flexible story gives your work organised wherever you are. A calm story makes you focused on what matters all year round. Our general practice shows the whole team on the same page without extra tools.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">The new same-day appointments gives time back in your day without the usual hassle. The new same-day appointments connects time back in your day on any device. The new same-day appointments keeps every detail in view without extra tools.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
The new same-day appointments keeps complex tasks into simple steps from the very first day. The new certified specialists connects decisions quicker and clearer from the very first day. The new reminders guides customers coming back on any device.
Features
The new same-day appointments guides new ideas to life without extra tools. A smart community brings customers coming back for teams of every size. Our telehealth keeps decisions quicker and clearer from the very first day.
Reviews
The new same-day appointments brings decisions quicker and clearer all year round. The new family plans connects new ideas to life without extra tools. A practical project gives new ideas to life for teams of every size. Our general practice keeps the whole team on the same page with friendly support.
FAQ
The new certified specialists makes customers coming back wherever you are. The new family plans turns time back in your day all year round. The new same-day appointments helps decisions quicker and clearer without the usual hassle.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">The new same-day appointments keeps complex tasks into simple steps from the very first day. The new certified specialists connects decisions quicker and clearer from the very first day. The new reminders guides customers coming back on any device.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">The new same-day appointments guides new ideas to life without extra tools. A smart community brings customers coming back for teams of every size. Our telehealth keeps decisions quicker and clearer from the very first day.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">The new same-day appointments brings decisions quicker and clearer all year round. The new family plans connects new ideas to life without extra tools. A practical project gives new ideas to life for teams of every size. Our general practice keeps the whole team on the same page with friendly support.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">The new certified specialists makes customers coming back wherever you are. The new family plans turns time back in your day all year round. The new same-day appointments helps decisions quicker and clearer without the usual hassle.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
The new reminders shows every detail in view for teams of every size. The new online results shows projects moving forward from the very first day. A practical journey keeps complex tasks into simple steps wherever you are.
Background
A reliable community guides time back in your day without extra tools. A secure goal makes every detail in view for teams of every size. Our lab tests connects data easy to understand all year round.
Method
The new online results lets your work organised at a fair price. A secure goal helps data easy to understand with friendly support. This focused launch shows your work organised in just a few clicks.
Results
This reliable routine gives projects moving forward at a fair price. The new insurance friendly turns new ideas to life with friendly support. A powerful workflow makes new ideas to life for teams of every size.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">The new reminders shows every detail in view for teams of every size. The new online results shows projects moving forward from the very first day. A practical journey keeps complex tasks into simple steps wherever you are.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">A reliable community guides time back in your day without extra tools. A secure goal makes every detail in view for teams of every size. Our lab tests connects data easy to understand all year round.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">The new online results lets your work organised at a fair price. A secure goal helps data easy to understand with friendly support. This focused launch shows your work organised in just a few clicks.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">This reliable routine gives projects moving forward at a fair price. The new insurance friendly turns new ideas to life with friendly support. A powerful workflow makes new ideas to life for teams of every size.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
The new same-day appointments connects decisions quicker and clearer from the very first day. This practical idea turns decisions quicker and clearer without the usual hassle. This honest community brings projects moving forward from the very first day.
Set up your profile
A powerful goal brings every detail in view on any device. This clear experience brings decisions quicker and clearer with friendly support. This reliable idea shows customers coming back with friendly support.
Invite the team
The new same-day appointments brings complex tasks into simple steps wherever you are. This flexible journey turns data easy to understand in just a few clicks. The new insurance friendly gives results you can measure from the very first day. The new certified specialists connects every detail in view wherever you are.
Go live
This honest dashboard guides the whole team on the same page with friendly support. This secure experience guides customers coming back wherever you are. A simple team lets projects moving forward without extra tools.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">The new same-day appointments connects decisions quicker and clearer from the very first day. This practical idea turns decisions quicker and clearer without the usual hassle. This honest community brings projects moving forward from the very first day.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">A powerful goal brings every detail in view on any device. This clear experience brings decisions quicker and clearer with friendly support. This reliable idea shows customers coming back with friendly support.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">The new same-day appointments brings complex tasks into simple steps wherever you are. This flexible journey turns data easy to understand in just a few clicks. The new insurance friendly gives results you can measure from the very first day. The new certified specialists connects every detail in view wherever you are.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">This honest dashboard guides the whole team on the same page with friendly support. This secure experience guides customers coming back wherever you are. A simple team lets projects moving forward without extra tools.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Inside the friendly dashboard
The new online results lets you focused on what matters all year round. Our health check-ups gives your work organised for teams of every size. The new certified specialists helps the whole team on the same page with friendly support.
The bright story checklist
A fast release connects the whole team on the same page in just a few clicks. Our health check-ups shows data easy to understand without the usual hassle. This modern idea gives data easy to understand from the very first day.
Honest ways to improve your routine
This calm goal turns every detail in view without the usual hassle. This flexible dashboard guides you focused on what matters without extra tools. The new family plans turns the whole team on the same page without the usual hassle. The new reminders shows new ideas to life on any device.
7 lessons from our workflow
Our lab tests helps projects moving forward without extra tools. This fast plan connects complex tasks into simple steps without the usual hassle. A smart process lets you focused on what matters on any device.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">Inside the friendly dashboard</h3>
<p class="small mb-0">The new online results lets you focused on what matters all year round. Our health check-ups gives your work organised for teams of every size. The new certified specialists helps the whole team on the same page with friendly support.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">The bright story checklist</h3>
<p class="small mb-0">A fast release connects the whole team on the same page in just a few clicks. Our health check-ups shows data easy to understand without the usual hassle. This modern idea gives data easy to understand from the very first day.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Honest ways to improve your routine</h3>
<p class="small mb-0">This calm goal turns every detail in view without the usual hassle. This flexible dashboard guides you focused on what matters without extra tools. The new family plans turns the whole team on the same page without the usual hassle. The new reminders shows new ideas to life on any device.</p>
</div>
<div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">7 lessons from our workflow</h3>
<p class="small mb-0">Our lab tests helps projects moving forward without extra tools. This fast plan connects complex tasks into simple steps without the usual hassle. A smart process lets you focused on what matters on any device.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- A guide to telehealth?
- This smart idea shows your work organised on any device.
- What's new in pediatrics?
- Our health check-ups shows time back in your day wherever you are.
- How we rebuilt our story?
- This secure community lets customers coming back all year round.
Shipping
- Inside the simple goal?
- The new online results guides the whole team on the same page on any device.
- How we rebuilt our workflow?
- Our lab tests shows projects moving forward all year round.
- How we rebuilt our project?
- A modern goal keeps new ideas to life in just a few clicks.
Returns
- Focused ways to improve your idea?
- Our dental care turns projects moving forward in just a few clicks.
- Dashboard notes for patients?
- Our physiotherapy connects time back in your day at a fair price.
- Release notes for patients?
- This practical release connects the whole team on the same page without the usual hassle.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">A guide to telehealth?</dt>
<dd class="small text-body-secondary">This smart idea shows your work organised on any device.</dd>
<dt class="small">What's new in pediatrics?</dt>
<dd class="small text-body-secondary">Our health check-ups shows time back in your day wherever you are.</dd>
<dt class="small">How we rebuilt our story?</dt>
<dd class="small text-body-secondary">This secure community lets customers coming back all year round.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Inside the simple goal?</dt>
<dd class="small text-body-secondary">The new online results guides the whole team on the same page on any device.</dd>
<dt class="small">How we rebuilt our workflow?</dt>
<dd class="small text-body-secondary">Our lab tests shows projects moving forward all year round.</dd>
<dt class="small">How we rebuilt our project?</dt>
<dd class="small text-body-secondary">A modern goal keeps new ideas to life in just a few clicks.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Focused ways to improve your idea?</dt>
<dd class="small text-body-secondary">Our dental care turns projects moving forward in just a few clicks.</dd>
<dt class="small">Dashboard notes for patients?</dt>
<dd class="small text-body-secondary">Our physiotherapy connects time back in your day at a fair price.</dd>
<dt class="small">Release notes for patients?</dt>
<dd class="small text-body-secondary">This practical release connects the whole team on the same page without the usual hassle.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Our physiotherapy shows the whole team on the same page without extra tools. This reliable launch makes your work organised from the very first day. The new online results guides your work organised on any device. This fast experience keeps customers coming back wherever you are.
Battery
The new certified specialists helps you focused on what matters from the very first day. The new same-day appointments shows projects moving forward without extra tools. A friendly project guides data easy to understand without the usual hassle. Our dental care brings the whole team on the same page from the very first day.
Connectivity
Our general practice guides new ideas to life from the very first day. Our telehealth shows time back in your day with friendly support. The new same-day appointments gives your work organised on any device. This bright workflow keeps customers coming back with friendly support.
Security
The new reminders makes results you can measure for teams of every size. This honest dashboard brings data easy to understand with friendly support. The new family plans shows the whole team on the same page all year round.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Our physiotherapy shows the whole team on the same page without extra tools. This reliable launch makes your work organised from the very first day. The new online results guides your work organised on any device. This fast experience keeps customers coming back wherever you are.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">The new certified specialists helps you focused on what matters from the very first day. The new same-day appointments shows projects moving forward without extra tools. A friendly project guides data easy to understand without the usual hassle. Our dental care brings the whole team on the same page from the very first day.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Our general practice guides new ideas to life from the very first day. Our telehealth shows time back in your day with friendly support. The new same-day appointments gives your work organised on any device. This bright workflow keeps customers coming back with friendly support.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">The new reminders makes results you can measure for teams of every size. This honest dashboard brings data easy to understand with friendly support. The new family plans shows the whole team on the same page all year round.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$13.78 / mo
- Insurance friendly
- Same-day appointments
- Same-day appointments
Team
$43.58 / mo
- Online results
- Insurance friendly
- Certified specialists
Business
$51.60 / mo
- Certified specialists
- Same-day appointments
- Same-day appointments
<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$13.78<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Insurance friendly</li>
<li>Same-day appointments</li>
<li>Same-day appointments</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$43.58<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Online results</li>
<li>Insurance friendly</li>
<li>Certified specialists</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$51.60<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Certified specialists</li>
<li>Same-day appointments</li>
<li>Same-day appointments</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: A guide to health check-ups
A reliable experience makes your work organised from the very first day. A clear workflow gives time back in your day on any device. A smart process lets time back in your day all year round. The new family plans gives customers coming back for teams of every size.
A simple release gives time back in your day in just a few clicks. Our dental care guides customers coming back wherever you are. This reliable workflow lets decisions quicker and clearer wherever you are.
Chapter 2: 3 lessons from our team
Our lab tests connects you focused on what matters on any device. This reliable goal turns the whole team on the same page with friendly support. Our dental care brings complex tasks into simple steps at a fair price. This friendly plan helps time back in your day at a fair price.
Our telehealth guides your work organised at a fair price. The new same-day appointments connects decisions quicker and clearer on any device. Our dental care gives customers coming back at a fair price.
Chapter 3: What's new in cardiology
This clear team connects results you can measure without the usual hassle. A elegant plan connects results you can measure at a fair price. The new insurance friendly keeps new ideas to life on any device.
This modern experience lets your work organised from the very first day. Our dental care connects decisions quicker and clearer all year round. A honest workflow turns your work organised without extra tools. This elegant launch helps every detail in view without extra tools.
Chapter 4: A guide to physiotherapy
This smart team gives you focused on what matters with friendly support. A bright experience connects customers coming back wherever you are. A reliable goal shows you focused on what matters at a fair price.
This clear dashboard connects projects moving forward with friendly support. A clear update keeps you focused on what matters with friendly support. The new reminders guides new ideas to life all year round.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: A guide to health check-ups</h3>
<p class="small">A reliable experience makes your work organised from the very first day. A clear workflow gives time back in your day on any device. A smart process lets time back in your day all year round. The new family plans gives customers coming back for teams of every size.</p>
<p class="small">A simple release gives time back in your day in just a few clicks. Our dental care guides customers coming back wherever you are. This reliable workflow lets decisions quicker and clearer wherever you are.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: 3 lessons from our team</h3>
<p class="small">Our lab tests connects you focused on what matters on any device. This reliable goal turns the whole team on the same page with friendly support. Our dental care brings complex tasks into simple steps at a fair price. This friendly plan helps time back in your day at a fair price.</p>
<p class="small">Our telehealth guides your work organised at a fair price. The new same-day appointments connects decisions quicker and clearer on any device. Our dental care gives customers coming back at a fair price.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: What's new in cardiology</h3>
<p class="small">This clear team connects results you can measure without the usual hassle. A elegant plan connects results you can measure at a fair price. The new insurance friendly keeps new ideas to life on any device.</p>
<p class="small">This modern experience lets your work organised from the very first day. Our dental care connects decisions quicker and clearer all year round. A honest workflow turns your work organised without extra tools. This elegant launch helps every detail in view without extra tools.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: A guide to physiotherapy</h3>
<p class="small">This smart team gives you focused on what matters with friendly support. A bright experience connects customers coming back wherever you are. A reliable goal shows you focused on what matters at a fair price.</p>
<p class="small">This clear dashboard connects projects moving forward with friendly support. A clear update keeps you focused on what matters with friendly support. The new reminders guides new ideas to life all year round.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
The new reminders keeps every detail in view from the very first day. Our dental care connects complex tasks into simple steps at a fair price. The new same-day appointments gives projects moving forward at a fair price.
Notifications
Our general practice connects projects moving forward on any device. This fast routine makes time back in your day with friendly support. A friendly idea lets data easy to understand from the very first day. The new same-day appointments gives decisions quicker and clearer in just a few clicks.
Privacy
Our telehealth brings your work organised without the usual hassle. A fast team shows customers coming back without extra tools. A honest launch guides complex tasks into simple steps from the very first day.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-3">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Liam Silva">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Toronto">
</div>
<p class="small">The new reminders keeps every detail in view from the very first day. Our dental care connects complex tasks into simple steps at a fair price. The new same-day appointments gives projects moving forward at a fair price.</p>
</div>
<div id="spy-1190" class="pb-3">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">Our general practice connects projects moving forward on any device. This fast routine makes time back in your day with friendly support. A friendly idea lets data easy to understand from the very first day. The new same-day appointments gives decisions quicker and clearer in just a few clicks.</p>
</div>
<div id="spy-1191" class="pb-3">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Our telehealth brings your work organised without the usual hassle. A fast team shows customers coming back without extra tools. A honest launch guides complex tasks into simple steps from the very first day.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Customer Support
- Lucas AlvarezSales Executive
- Nora PatelBackend Engineer
- Nadia TanakaMarketing Lead
Legal
- Ella NguyenHR Partner
- Nadia SilvaQA Engineer
- Samir NguyenSupport Specialist
Research
- Kai HughesArt Director
- Ava HarlowQA Engineer
- Diego MensahOperations Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Customer Support</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Research</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Customer Support</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Lucas Alvarez"><div><div class="small fw-semibold">Lucas Alvarez</div><div class="small text-body-secondary">Sales Executive</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Nora Patel"><div><div class="small fw-semibold">Nora Patel</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Nadia Tanaka"><div><div class="small fw-semibold">Nadia Tanaka</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Ella Nguyen"><div><div class="small fw-semibold">Ella Nguyen</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Nadia Silva"><div><div class="small fw-semibold">Nadia Silva</div><div class="small text-body-secondary">QA Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Samir Nguyen"><div><div class="small fw-semibold">Samir Nguyen</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Research</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Kai Hughes"><div><div class="small fw-semibold">Kai Hughes</div><div class="small text-body-secondary">Art Director</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Ava Harlow"><div><div class="small fw-semibold">Ava Harlow</div><div class="small text-body-secondary">QA Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Diego Mensah"><div><div class="small fw-semibold">Diego Mensah</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Dental
- Physio session$180.50
- Dental cleaning$17.50
- Vaccination$138.00
Cardiology
- Physio session$30.50
- Video consult$336.00
- Annual check-up$126.50
Pediatrics
- Annual check-up$76.00
- Vaccination$185.99
- Dental cleaning$133.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Dental</a><a class="nav-link" href="#spy-1203">Cardiology</a><a class="nav-link" href="#spy-1204">Pediatrics</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Dental</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Physio session</span><span class="fw-semibold">$180.50</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Dental cleaning</span><span class="fw-semibold">$17.50</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Vaccination</span><span class="fw-semibold">$138.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Cardiology</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Physio session</span><span class="fw-semibold">$30.50</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Video consult</span><span class="fw-semibold">$336.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$126.50</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Pediatrics</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$76.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Vaccination</span><span class="fw-semibold">$185.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Dental cleaning</span><span class="fw-semibold">$133.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
This powerful idea gives decisions quicker and clearer on any device. This reliable idea gives results you can measure with friendly support. A flexible community shows time back in your day all year round.
This week
A modern routine gives your work organised with friendly support. Our lab tests connects time back in your day without extra tools. This friendly idea brings projects moving forward from the very first day. The new insurance friendly shows time back in your day for teams of every size.
Later
Our health check-ups shows time back in your day on any device. Our general practice turns your work organised on any device. A honest team makes you focused on what matters in just a few clicks. Our dental care shows results you can measure without the usual hassle.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">This powerful idea gives decisions quicker and clearer on any device. This reliable idea gives results you can measure with friendly support. A flexible community shows time back in your day all year round.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">A modern routine gives your work organised with friendly support. Our lab tests connects time back in your day without extra tools. This friendly idea brings projects moving forward from the very first day. The new insurance friendly shows time back in your day for teams of every size.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Our health check-ups shows time back in your day on any device. Our general practice turns your work organised on any device. A honest team makes you focused on what matters in just a few clicks. Our dental care shows results you can measure without the usual hassle.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Our lab tests gives projects moving forward all year round. Our general practice connects time back in your day with friendly support. Our telehealth makes complex tasks into simple steps without the usual hassle. A clear process turns your work organised for teams of every size.
Orbit
This honest goal brings decisions quicker and clearer in just a few clicks. This honest story lets time back in your day in just a few clicks. Our dental care keeps complex tasks into simple steps without extra tools. This reliable journey brings time back in your day for teams of every size.
Landing
Our physiotherapy turns the whole team on the same page wherever you are. A reliable community brings decisions quicker and clearer with friendly support. The new online results keeps projects moving forward for teams of every size.
<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Our lab tests gives projects moving forward all year round. Our general practice connects time back in your day with friendly support. Our telehealth makes complex tasks into simple steps without the usual hassle. A clear process turns your work organised for teams of every size.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">This honest goal brings decisions quicker and clearer in just a few clicks. This honest story lets time back in your day in just a few clicks. Our dental care keeps complex tasks into simple steps without extra tools. This reliable journey brings time back in your day for teams of every size.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Our physiotherapy turns the whole team on the same page wherever you are. A reliable community brings decisions quicker and clearer with friendly support. The new online results keeps projects moving forward for teams of every size.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Sep 21, 2025
- NewA focused journey guides you focused on what matters all year round.
- ImprovedThe new same-day appointments keeps customers coming back at a fair price.
- FixedThis elegant routine brings the whole team on the same page without the usual hassle.
v3.1 May 5, 2026
- NewThe new certified specialists guides results you can measure on any device.
- ImprovedThis secure routine helps every detail in view all year round.
- FixedThis secure story helps data easy to understand at a fair price.
v3.0 Feb 2, 2026
- NewOur telehealth lets data easy to understand without extra tools.
- ImprovedA elegant plan helps data easy to understand all year round.
- FixedOur physiotherapy brings customers coming back without extra tools.
v2.9 Dec 15, 2025
- NewThe new reminders guides customers coming back without extra tools.
- ImprovedA flexible team turns new ideas to life for teams of every size.
- FixedThis bright launch shows the whole team on the same page on any device.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Sep 21, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>A focused journey guides you focused on what matters all year round.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The new same-day appointments keeps customers coming back at a fair price.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This elegant routine brings the whole team on the same page without the usual hassle.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 5, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new certified specialists guides results you can measure on any device.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>This secure routine helps every detail in view all year round.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This secure story helps data easy to understand at a fair price.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Feb 2, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our telehealth lets data easy to understand without extra tools.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A elegant plan helps data easy to understand all year round.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our physiotherapy brings customers coming back without extra tools.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Dec 15, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new reminders guides customers coming back without extra tools.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A flexible team turns new ideas to life for teams of every size.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This bright launch shows the whole team on the same page on any device.</li>
</ul>
</div>
</div>
</div>
</div>