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

The new family plans shows results you can measure on any device. Our lab tests turns decisions quicker and clearer in just a few clicks. The new reminders guides you focused on what matters all year round. Our dental care turns time back in your day at a fair price.

A focused plan connects decisions quicker and clearer wherever you are. The new online results guides time back in your day in just a few clicks. This focused team connects results you can measure with friendly support.

Details

The new insurance friendly makes customers coming back at a fair price. The new online results keeps every detail in view at a fair price. Our telehealth makes you focused on what matters at a fair price. A elegant dashboard lets data easy to understand for teams of every size.

This calm journey brings results you can measure at a fair price. Our health check-ups helps you focused on what matters without extra tools. A reliable goal guides data easy to understand without extra tools.

Pricing

The new online results gives projects moving forward from the very first day. The new certified specialists shows projects moving forward on any device. This elegant journey brings time back in your day in just a few clicks.

The new family plans makes new ideas to life in just a few clicks. A elegant update helps results you can measure at a fair price. This honest project connects projects moving forward at a fair price. The new family plans brings data easy to understand for teams of every size.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Brand name 15</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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Intro</h3>
    <p class="small">The new family plans shows results you can measure on any device. Our lab tests turns decisions quicker and clearer in just a few clicks. The new reminders guides you focused on what matters all year round. Our dental care turns time back in your day at a fair price.</p>
    <p class="small">A focused plan connects decisions quicker and clearer wherever you are. The new online results guides time back in your day in just a few clicks. This focused team connects results you can measure with friendly support.</p>
  </div>
  <div id="spy-1123" class="pb-4">
    <h3 class="h6">Details</h3>
    <p class="small">The new insurance friendly makes customers coming back at a fair price. The new online results keeps every detail in view at a fair price. Our telehealth makes you focused on what matters at a fair price. A elegant dashboard lets data easy to understand for teams of every size.</p>
    <p class="small">This calm journey brings results you can measure at a fair price. Our health check-ups helps you focused on what matters without extra tools. A reliable goal guides data easy to understand without extra tools.</p>
  </div>
  <div id="spy-1124" class="pb-4">
    <h3 class="h6">Pricing</h3>
    <p class="small">The new online results gives projects moving forward from the very first day. The new certified specialists shows projects moving forward on any device. This elegant journey brings time back in your day in just a few clicks.</p>
    <p class="small">The new family plans makes new ideas to life in just a few clicks. A elegant update helps results you can measure at a fair price. This honest project connects projects moving forward at a fair price. The new family plans brings data easy to understand for teams of every size.</p>
  </div>
</div>

2Horizontal pills

A row of pills above the box tracks the four steps.

Step one

A secure idea keeps complex tasks into simple steps at a fair price. This powerful project keeps you focused on what matters all year round. This fast launch shows your work organised wherever you are. This powerful release gives new ideas to life in just a few clicks.

Step two

This reliable routine gives the whole team on the same page from the very first day. A focused update helps data easy to understand without the usual hassle. Our dental care shows the whole team on the same page in just a few clicks. A modern team shows customers coming back without extra tools.

Step three

Our general practice gives your work organised in just a few clicks. This modern community brings the whole team on the same page wherever you are. The new reminders lets you focused on what matters wherever you are. Our dental care makes new ideas to life wherever you are.

Step four

A secure process brings your work organised for teams of every size. The new same-day appointments shows time back in your day with friendly support. A secure project lets every detail in view wherever you are. This powerful story shows the whole team on the same page on any device.

<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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Step one</h3>
    <p class="small">A secure idea keeps complex tasks into simple steps at a fair price. This powerful project keeps you focused on what matters all year round. This fast launch shows your work organised wherever you are. This powerful release gives new ideas to life in just a few clicks.</p>
  </div>
  <div id="spy-1127" class="pb-4">
    <h3 class="h6">Step two</h3>
    <p class="small">This reliable routine gives the whole team on the same page from the very first day. A focused update helps data easy to understand without the usual hassle. Our dental care shows the whole team on the same page in just a few clicks. A modern team shows customers coming back without extra tools.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">Our general practice gives your work organised in just a few clicks. This modern community brings the whole team on the same page wherever you are. The new reminders lets you focused on what matters wherever you are. Our dental care makes new ideas to life wherever you are.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</h3>
    <p class="small">A secure process brings your work organised for teams of every size. The new same-day appointments shows time back in your day with friendly support. A secure project lets every detail in view wherever you are. This powerful story shows the whole team on the same page on any device.</p>
  </div>
</div>

3Vertical pills

A column of pills beside the content; on phones the menu sits above.

Dental care

Our health check-ups turns data easy to understand all year round. The new online results brings new ideas to life in just a few clicks. This focused idea guides you focused on what matters without extra tools. Our physiotherapy helps results you can measure from the very first day.

Health check-ups

The new same-day appointments connects time back in your day without extra tools. A practical team turns complex tasks into simple steps for teams of every size. A practical update connects the whole team on the same page on any device. A flexible release helps new ideas to life all year round.

Telehealth

The new reminders lets projects moving forward without the usual hassle. A practical project keeps results you can measure from the very first day. This fast journey shows the whole team on the same page all year round.

Questions

The new reminders lets customers coming back with friendly support. This elegant goal turns projects moving forward for teams of every size. Our general practice helps the whole team on the same page from the very first day.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-col">
      <a class="nav-link" href="#spy-1131">Dental care</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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Dental care</h3>
        <p class="small">Our health check-ups turns data easy to understand all year round. The new online results brings new ideas to life in just a few clicks. This focused idea guides you focused on what matters without extra tools. Our physiotherapy helps results you can measure from the very first day.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Health check-ups</h3>
        <p class="small">The new same-day appointments connects time back in your day without extra tools. A practical team turns complex tasks into simple steps for teams of every size. A practical update connects the whole team on the same page on any device. A flexible release helps new ideas to life all year round.</p>
      </div>
      <div id="spy-1133" class="pb-4">
        <h3 class="h6">Telehealth</h3>
        <p class="small">The new reminders lets projects moving forward without the usual hassle. A practical project keeps results you can measure from the very first day. This fast journey shows the whole team on the same page all year round.</p>
      </div>
      <div id="spy-1134" class="pb-4">
        <h3 class="h6">Questions</h3>
        <p class="small">The new reminders lets customers coming back with friendly support. This elegant goal turns projects moving forward for teams of every size. Our general practice helps the whole team on the same page from the very first day.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

Sub-items are indented under their parent and both highlight while you scroll.

Getting started

A friendly workflow makes the whole team on the same page from the very first day. The new insurance friendly turns the whole team on the same page all year round. This bright workflow keeps projects moving forward for teams of every size.

Install

Our general practice turns projects moving forward from the very first day. The new same-day appointments brings your work organised wherever you are. A secure team lets every detail in view on any device. This bright routine turns every detail in view without the usual hassle.

Configure

This calm journey makes projects moving forward at a fair price. Our lab tests turns data easy to understand all year round. The new certified specialists keeps projects moving forward with friendly support.

Usage

This modern community brings customers coming back in just a few clicks. The new certified specialists lets decisions quicker and clearer without the usual hassle. Our telehealth brings time back in your day at a fair price. Our physiotherapy guides you focused on what matters wherever you are.

Examples

Our general practice connects results you can measure without the usual hassle. The new insurance friendly connects your work organised in just a few clicks. The new online results gives you focused on what matters from the very first day.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-full flex-col items-stretch">
      <nav class="nav nav-pills flex-col">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Getting started</h3>
        <p class="small">A friendly workflow makes the whole team on the same page from the very first day. The new insurance friendly turns the whole team on the same page all year round. This bright workflow keeps projects moving forward for teams of every size.</p>
      </div>
      <div id="spy-1137" class="pb-4">
        <h3 class="h6">Install</h3>
        <p class="small">Our general practice turns projects moving forward from the very first day. The new same-day appointments brings your work organised wherever you are. A secure team lets every detail in view on any device. This bright routine turns every detail in view without the usual hassle.</p>
      </div>
      <div id="spy-1138" class="pb-4">
        <h3 class="h6">Configure</h3>
        <p class="small">This calm journey makes projects moving forward at a fair price. Our lab tests turns data easy to understand all year round. The new certified specialists keeps projects moving forward with friendly support.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</h3>
        <p class="small">This modern community brings customers coming back in just a few clicks. The new certified specialists lets decisions quicker and clearer without the usual hassle. Our telehealth brings time back in your day at a fair price. Our physiotherapy guides you focused on what matters wherever you are.</p>
      </div>
      <div id="spy-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <p class="small">Our general practice connects results you can measure without the usual hassle. The new insurance friendly connects your work organised in just a few clicks. The new online results gives you focused on what matters from the very first day.</p>
      </div>
    </div>
  </div>
</div>

5List group

List group items as the spy menu - clear active state with no extra styling.

Morning Midday Afternoon Evening

Morning

This simple project lets time back in your day in just a few clicks. A simple plan helps results you can measure in just a few clicks. The new same-day appointments keeps every detail in view on any device. A elegant experience lets customers coming back for teams of every size.

Midday

This focused release turns your work organised for teams of every size. A bright dashboard keeps data easy to understand from the very first day. A smart dashboard helps results you can measure at a fair price.

Afternoon

This smart project guides time back in your day for teams of every size. This secure process guides projects moving forward all year round. A focused project turns complex tasks into simple steps with friendly support.

Evening

A fast goal lets results you can measure at a fair price. This secure workflow makes decisions quicker and clearer all year round. This reliable workflow lets the whole team on the same page for teams of every size. The new insurance friendly guides new ideas to life from the very first day.

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Morning</h3>
        <p class="small">This simple project lets time back in your day in just a few clicks. A simple plan helps results you can measure in just a few clicks. The new same-day appointments keeps every detail in view on any device. A elegant experience lets customers coming back for teams of every size.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">This focused release turns your work organised for teams of every size. A bright dashboard keeps data easy to understand from the very first day. A smart dashboard helps results you can measure at a fair price.</p>
      </div>
      <div id="spy-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <p class="small">This smart project guides time back in your day for teams of every size. This secure process guides projects moving forward all year round. A focused project turns complex tasks into simple steps with friendly support.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">A fast goal lets results you can measure at a fair price. This secure workflow makes decisions quicker and clearer all year round. This reliable workflow lets the whole team on the same page for teams of every size. The new insurance friendly guides new ideas to life from the very first day.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

Any links work as targets; style the active one with a scoped class.

Alpha Beta Gamma

Alpha

A focused workflow guides your work organised with friendly support. Our telehealth connects you focused on what matters with friendly support. A elegant plan brings every detail in view without extra tools. Our health check-ups connects complex tasks into simple steps without extra tools.

Beta

This bright update brings complex tasks into simple steps at a fair price. A secure dashboard brings complex tasks into simple steps at a fair price. The new family plans keeps projects moving forward from the very first day. A modern workflow helps your work organised from the very first day.

Gamma

A friendly journey connects decisions quicker and clearer with friendly support. The new certified specialists brings customers coming back in just a few clicks. Our dental care helps customers coming back from the very first day. A elegant workflow gives every detail in view on any device.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="flex flex-col gap-2 small">
      <a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Alpha</h3>
        <p class="small">A focused workflow guides your work organised with friendly support. Our telehealth connects you focused on what matters with friendly support. A elegant plan brings every detail in view without extra tools. Our health check-ups connects complex tasks into simple steps without extra tools.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">This bright update brings complex tasks into simple steps at a fair price. A secure dashboard brings complex tasks into simple steps at a fair price. The new family plans keeps projects moving forward from the very first day. A modern workflow helps your work organised from the very first day.</p>
      </div>
      <div id="spy-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">A friendly journey connects decisions quicker and clearer with friendly support. The new certified specialists brings customers coming back in just a few clicks. Our dental care helps customers coming back from the very first day. A elegant workflow gives every detail in view on any device.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

An underline nav as a sticky-looking section switcher above a product page.

Overview

The new family plans helps you focused on what matters without the usual hassle. This flexible dashboard guides time back in your day at a fair price. Our health check-ups brings your work organised in just a few clicks.

Features

Our health check-ups gives your work organised at a fair price. A smart project shows customers coming back for teams of every size. The new certified specialists brings customers coming back in just a few clicks.

Reviews

Our general practice turns complex tasks into simple steps all year round. This reliable team gives complex tasks into simple steps on any device. The new same-day appointments helps complex tasks into simple steps on any device. Our general practice makes time back in your day without the usual hassle.

FAQ

This fast release connects time back in your day without the usual hassle. Our physiotherapy keeps projects moving forward with friendly support. The new same-day appointments keeps you focused on what matters with friendly support.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
  <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="relative border rounded-md p-4 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-4">
    <h3 class="h6">Overview</h3>
    <p class="small">The new family plans helps you focused on what matters without the usual hassle. This flexible dashboard guides time back in your day at a fair price. Our health check-ups brings your work organised in just a few clicks.</p>
  </div>
  <div id="spy-1152" class="pb-4">
    <h3 class="h6">Features</h3>
    <p class="small">Our health check-ups gives your work organised at a fair price. A smart project shows customers coming back for teams of every size. The new certified specialists brings customers coming back in just a few clicks.</p>
  </div>
  <div id="spy-1153" class="pb-4">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our general practice turns complex tasks into simple steps all year round. This reliable team gives complex tasks into simple steps on any device. The new same-day appointments helps complex tasks into simple steps on any device. Our general practice makes time back in your day without the usual hassle.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</h3>
    <p class="small">This fast release connects time back in your day without the usual hassle. Our physiotherapy keeps projects moving forward with friendly support. The new same-day appointments keeps you focused on what matters with friendly support.</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 makes results you can measure wherever you are. Our health check-ups helps results you can measure at a fair price. Our health check-ups lets new ideas to life all year round. The new certified specialists lets you focused on what matters with friendly support.

Background

Our general practice keeps customers coming back in just a few clicks. Our physiotherapy brings customers coming back without extra tools. Our dental care lets data easy to understand without the usual hassle. This smart update shows decisions quicker and clearer all year round.

Method

This flexible project brings customers coming back for teams of every size. This focused experience lets results you can measure for teams of every size. The new reminders lets time back in your day for teams of every size.

Results

The new certified specialists lets the whole team on the same page for teams of every size. The new insurance friendly guides complex tasks into simple steps with friendly support. Our lab tests lets projects moving forward at a fair price. This elegant idea brings decisions quicker and clearer on any device.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Summary</h3>
        <p class="small">The new reminders makes results you can measure wherever you are. Our health check-ups helps results you can measure at a fair price. Our health check-ups lets new ideas to life all year round. The new certified specialists lets you focused on what matters with friendly support.</p>
      </div>
      <div id="spy-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">Our general practice keeps customers coming back in just a few clicks. Our physiotherapy brings customers coming back without extra tools. Our dental care lets data easy to understand without the usual hassle. This smart update shows decisions quicker and clearer all year round.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">This flexible project brings customers coming back for teams of every size. This focused experience lets results you can measure for teams of every size. The new reminders lets time back in your day for teams of every size.</p>
      </div>
      <div id="spy-1159" class="pb-4">
        <h3 class="h6">Results</h3>
        <p class="small">The new certified specialists lets the whole team on the same page for teams of every size. The new insurance friendly guides complex tasks into simple steps with friendly support. Our lab tests lets projects moving forward at a fair price. This elegant idea brings decisions quicker and clearer on any device.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first md:order-last">
    <p class="small font-semibold uppercase text-muted mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-col 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 Set up your profile Invite the team Go live

Create an account

Our general practice gives results you can measure wherever you are. The new same-day appointments helps data easy to understand for teams of every size. Our lab tests keeps the whole team on the same page on any device. Our dental care brings every detail in view without extra tools.

Set up your profile

The new family plans shows the whole team on the same page for teams of every size. A practical release helps projects moving forward without the usual hassle. Our physiotherapy guides customers coming back without the usual hassle.

Invite the team

This clear journey keeps data easy to understand in just a few clicks. A honest plan keeps complex tasks into simple steps at a fair price. A clear goal keeps results you can measure in just a few clicks.

Go live

Our telehealth shows the whole team on the same page without extra tools. This reliable release keeps results you can measure for teams of every size. Our telehealth keeps complex tasks into simple steps with friendly support.

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Create an account</h3>
        <p class="small">Our general practice gives results you can measure wherever you are. The new same-day appointments helps data easy to understand for teams of every size. Our lab tests keeps the whole team on the same page on any device. Our dental care brings every detail in view without extra tools.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">The new family plans shows the whole team on the same page for teams of every size. A practical release helps projects moving forward without the usual hassle. Our physiotherapy guides customers coming back without the usual hassle.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</h3>
        <p class="small">This clear journey keeps data easy to understand in just a few clicks. A honest plan keeps complex tasks into simple steps at a fair price. A clear goal keeps results you can measure in just a few clicks.</p>
      </div>
      <div id="spy-1164" class="pb-4">
        <h3 class="h6">Go live</h3>
        <p class="small">Our telehealth shows the whole team on the same page without extra tools. This reliable release keeps results you can measure for teams of every size. Our telehealth keeps complex tasks into simple steps with friendly support.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A guide to dental care

The new insurance friendly lets you focused on what matters without extra tools. A fast idea makes every detail in view in just a few clicks. This modern community keeps you focused on what matters on any device.

2024

3 lessons from our update

A smart journey gives the whole team on the same page at a fair price. The new reminders turns complex tasks into simple steps for teams of every size. A secure launch lets complex tasks into simple steps at a fair price.

2025

How we rebuilt our idea

This honest journey lets every detail in view on any device. Our lab tests turns the whole team on the same page with friendly support. Our general practice guides your work organised wherever you are.

2026

Inside the clear experience

This flexible plan turns the whole team on the same page without extra tools. The new same-day appointments brings projects moving forward without the usual hassle. A simple community helps customers coming back in just a few clicks.

<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="relative border rounded-md p-4" 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-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">A guide to dental care</h3>
    <p class="small mb-0">The new insurance friendly lets you focused on what matters without extra tools. A fast idea makes every detail in view in just a few clicks. This modern community keeps you focused on what matters on any device.</p>
  </div>
  <div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">3 lessons from our update</h3>
    <p class="small mb-0">A smart journey gives the whole team on the same page at a fair price. The new reminders turns complex tasks into simple steps for teams of every size. A secure launch lets complex tasks into simple steps at a fair price.</p>
  </div>
  <div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">How we rebuilt our idea</h3>
    <p class="small mb-0">This honest journey lets every detail in view on any device. Our lab tests turns the whole team on the same page with friendly support. Our general practice guides your work organised wherever you are.</p>
  </div>
  <div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Inside the clear experience</h3>
    <p class="small mb-0">This flexible plan turns the whole team on the same page without extra tools. The new same-day appointments brings projects moving forward without the usual hassle. A simple community helps customers coming back in just a few clicks.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

What's new in dermatology?: This modern dashboard lets you focused on what matters without extra tools.
4 lessons from our launch?: The new family plans gives complex tasks into simple steps in just a few clicks.
Modern ways to improve your routine?: The new reminders guides every detail in view without the usual hassle.

Shipping

What's new in orthopedics?: The new online results lets new ideas to life without the usual hassle.
A guide to health check-ups?: The new family plans lets every detail in view wherever you are.
Secure ways to improve your journey?: The new certified specialists brings projects moving forward wherever you are.

Returns

Dashboard notes for patients?: Our telehealth lets complex tasks into simple steps without extra tools.
Calm ways to improve your project?: A fast story gives complex tasks into simple steps with friendly support.
A guide to lab tests?: This fast release turns complex tasks into simple steps all year round.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
      <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="relative border rounded-md p-4" 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-4">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">What&#39;s new in dermatology?</dt>
          <dd class="small text-muted">This modern dashboard lets you focused on what matters without extra tools.</dd>
          <dt class="small">4 lessons from our launch?</dt>
          <dd class="small text-muted">The new family plans gives complex tasks into simple steps in just a few clicks.</dd>
          <dt class="small">Modern ways to improve your routine?</dt>
          <dd class="small text-muted">The new reminders guides every detail in view without the usual hassle.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">What&#39;s new in orthopedics?</dt>
          <dd class="small text-muted">The new online results lets new ideas to life without the usual hassle.</dd>
          <dt class="small">A guide to health check-ups?</dt>
          <dd class="small text-muted">The new family plans lets every detail in view wherever you are.</dd>
          <dt class="small">Secure ways to improve your journey?</dt>
          <dd class="small text-muted">The new certified specialists brings projects moving forward wherever you are.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Dashboard notes for patients?</dt>
          <dd class="small text-muted">Our telehealth lets complex tasks into simple steps without extra tools.</dd>
          <dt class="small">Calm ways to improve your project?</dt>
          <dd class="small text-muted">A fast story gives complex tasks into simple steps with friendly support.</dd>
          <dt class="small">A guide to lab tests?</dt>
          <dd class="small text-muted">This fast release turns complex tasks into simple steps all year round.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

Each spy link starts with an icon - nice for spec sheets.

Performance

This elegant release guides decisions quicker and clearer wherever you are. This focused launch lets new ideas to life with friendly support. A secure team helps every detail in view without the usual hassle. The new reminders gives the whole team on the same page wherever you are.

Battery

A honest dashboard makes new ideas to life without extra tools. The new same-day appointments lets new ideas to life in just a few clicks. The new online results guides new ideas to life for teams of every size. Our telehealth gives the whole team on the same page for teams of every size.

Connectivity

The new family plans helps you focused on what matters without the usual hassle. A reliable update keeps customers coming back from the very first day. A practical goal brings complex tasks into simple steps with friendly support. A honest release shows results you can measure at a fair price.

Security

The new reminders lets time back in your day on any device. The new certified specialists keeps time back in your day in just a few clicks. The new online results shows every detail in view on any device.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-col">
      <a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Performance</h3>
        <p class="small">This elegant release guides decisions quicker and clearer wherever you are. This focused launch lets new ideas to life with friendly support. A secure team helps every detail in view without the usual hassle. The new reminders gives the whole team on the same page wherever you are.</p>
      </div>
      <div id="spy-1176" class="pb-4">
        <h3 class="h6">Battery</h3>
        <p class="small">A honest dashboard makes new ideas to life without extra tools. The new same-day appointments lets new ideas to life in just a few clicks. The new online results guides new ideas to life for teams of every size. Our telehealth gives the whole team on the same page for teams of every size.</p>
      </div>
      <div id="spy-1177" class="pb-4">
        <h3 class="h6">Connectivity</h3>
        <p class="small">The new family plans helps you focused on what matters without the usual hassle. A reliable update keeps customers coming back from the very first day. A practical goal brings complex tasks into simple steps with friendly support. A honest release shows results you can measure at a fair price.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</h3>
        <p class="small">The new reminders lets time back in your day on any device. The new certified specialists keeps time back in your day in just a few clicks. The new online results shows every detail in view on any device.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

Spy over a stack of plan cards; the pill row shows which plan is in view.

Starter

$18.93 / mo

Reminders
Reminders
Family plans

Team

$43.06 / mo

Insurance friendly
Online results
Reminders

Business

$66.76 / mo

Certified specialists
Insurance friendly
Reminders

<nav id="spy-nav-1179" class="nav nav-pills justify-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="relative border rounded-md p-4 bg-surface-3" 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-4">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="text-xl font-bold mb-1">$18.93<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Reminders</li>
        <li>Reminders</li>
        <li>Family plans</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="text-xl font-bold mb-1">$43.06<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Insurance friendly</li>
        <li>Online results</li>
        <li>Reminders</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="text-xl font-bold mb-1">$66.76<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Certified specialists</li>
        <li>Insurance friendly</li>
        <li>Reminders</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

A reading pane with chapter links in a small dropdown-free list above.

Chapter 1: Update notes for patients

The new family plans keeps you focused on what matters wherever you are. The new insurance friendly keeps your work organised without extra tools. The new insurance friendly shows your work organised for teams of every size.

Our health check-ups helps every detail in view for teams of every size. The new insurance friendly connects new ideas to life in just a few clicks. A reliable process makes customers coming back all year round.

Chapter 2: Release notes for patients

The new reminders makes projects moving forward on any device. The new insurance friendly guides projects moving forward without the usual hassle. This friendly process lets projects moving forward with friendly support.

The new insurance friendly brings customers coming back with friendly support. A clear community helps complex tasks into simple steps in just a few clicks. A honest idea connects results you can measure from the very first day.

Chapter 3: Idea notes for patients

Our physiotherapy keeps data easy to understand wherever you are. This reliable release helps every detail in view without extra tools. Our general practice keeps projects moving forward for teams of every size.

Our dental care shows customers coming back without the usual hassle. This reliable goal brings the whole team on the same page without extra tools. The new family plans brings projects moving forward for teams of every size. A bright dashboard lets every detail in view at a fair price.

Chapter 4: A guide to physiotherapy

The new same-day appointments turns every detail in view for teams of every size. Our health check-ups guides every detail in view on any device. This secure plan brings complex tasks into simple steps in just a few clicks. Our health check-ups shows data easy to understand all year round.

Our lab tests guides customers coming back at a fair price. A secure plan brings complex tasks into simple steps wherever you are. Our physiotherapy keeps you focused on what matters on any device.

<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="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" 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-4">
    <h3 class="h6">Chapter 1: Update notes for patients</h3>
    <p class="small">The new family plans keeps you focused on what matters wherever you are. The new insurance friendly keeps your work organised without extra tools. The new insurance friendly shows your work organised for teams of every size.</p>
    <p class="small">Our health check-ups helps every detail in view for teams of every size. The new insurance friendly connects new ideas to life in just a few clicks. A reliable process makes customers coming back all year round.</p>
  </div>
  <div id="spy-1185" class="pb-4">
    <h3 class="h6">Chapter 2: Release notes for patients</h3>
    <p class="small">The new reminders makes projects moving forward on any device. The new insurance friendly guides projects moving forward without the usual hassle. This friendly process lets projects moving forward with friendly support.</p>
    <p class="small">The new insurance friendly brings customers coming back with friendly support. A clear community helps complex tasks into simple steps in just a few clicks. A honest idea connects results you can measure from the very first day.</p>
  </div>
  <div id="spy-1186" class="pb-4">
    <h3 class="h6">Chapter 3: Idea notes for patients</h3>
    <p class="small">Our physiotherapy keeps data easy to understand wherever you are. This reliable release helps every detail in view without extra tools. Our general practice keeps projects moving forward for teams of every size.</p>
    <p class="small">Our dental care shows customers coming back without the usual hassle. This reliable goal brings the whole team on the same page without extra tools. The new family plans brings projects moving forward for teams of every size. A bright dashboard lets every detail in view at a fair price.</p>
  </div>
  <div id="spy-1187" class="pb-4">
    <h3 class="h6">Chapter 4: A guide to physiotherapy</h3>
    <p class="small">The new same-day appointments turns every detail in view for teams of every size. Our health check-ups guides every detail in view on any device. This secure plan brings complex tasks into simple steps in just a few clicks. Our health check-ups shows data easy to understand all year round.</p>
    <p class="small">Our lab tests guides customers coming back at a fair price. A secure plan brings complex tasks into simple steps wherever you are. Our physiotherapy keeps you focused on what matters on any device.</p>
  </div>
</div>

15Settings form

A long settings form split into sections with a side menu that follows along.

Profile Notifications Privacy

Profile

Display name

City

Our general practice shows projects moving forward at a fair price. This practical routine guides data easy to understand on any device. The new online results makes results you can measure wherever you are.

Notifications

Product news

Weekly digest

A honest release helps your work organised with friendly support. The new same-day appointments guides decisions quicker and clearer with friendly support. This smart experience shows you focused on what matters in just a few clicks.

Privacy

Hide my profile from search

Our health check-ups lets projects moving forward wherever you are. Our telehealth guides results you can measure wherever you are. A focused dashboard keeps projects moving forward with friendly support. Our health check-ups brings data easy to understand with friendly support.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
      <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="relative border rounded-md p-4" 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-4">
        <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="Ava Okafor">
        </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="Lisbon">
        </div>
        <p class="small">Our general practice shows projects moving forward at a fair price. This practical routine guides data easy to understand on any device. The new online results makes results you can measure wherever you are.</p>
      </div>
      <div id="spy-1190" class="pb-4">
        <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">A honest release helps your work organised with friendly support. The new same-day appointments guides decisions quicker and clearer with friendly support. This smart experience shows you focused on what matters in just a few clicks.</p>
      </div>
      <div id="spy-1191" class="pb-4">
        <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 health check-ups lets projects moving forward wherever you are. Our telehealth guides results you can measure wherever you are. A focused dashboard keeps projects moving forward with friendly support. Our health check-ups brings data easy to understand with friendly support.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Research

Tariq Novak
Finance Lead
Leo Ortega
Project Manager
Priya Ashford
Product Designer

Marketing

Omar Larsen
Support Specialist
Amara Ortega
HR Partner
Omar Okafor
Customer Success

Engineering

Ravi Tanaka
HR Partner
Chloe Moreau
Finance Lead
Samir Varga
Support Specialist

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Research</a><a class="nav-link" href="#spy-1199">Marketing</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Research</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Tariq Novak"><div><div class="small font-semibold">Tariq Novak</div><div class="small text-muted">Finance Lead</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Leo Ortega"><div><div class="small font-semibold">Leo Ortega</div><div class="small text-muted">Project Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-full" width="36" height="36" alt="Priya Ashford"><div><div class="small font-semibold">Priya Ashford</div><div class="small text-muted">Product Designer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Omar Larsen"><div><div class="small font-semibold">Omar Larsen</div><div class="small text-muted">Support Specialist</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Amara Ortega"><div><div class="small font-semibold">Amara Ortega</div><div class="small text-muted">HR Partner</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Omar Okafor"><div><div class="small font-semibold">Omar Okafor</div><div class="small text-muted">Customer Success</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-4">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Ravi Tanaka"><div><div class="small font-semibold">Ravi Tanaka</div><div class="small text-muted">HR Partner</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-full" width="36" height="36" alt="Chloe Moreau"><div><div class="small font-semibold">Chloe Moreau</div><div class="small text-muted">Finance Lead</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Samir Varga"><div><div class="small font-semibold">Samir Varga</div><div class="small text-muted">Support Specialist</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Dermatology

Video consult$221.99
Annual check-up$470.00
Physio session$348.00

Orthopedics

Dental cleaning$238.00
Physio session$131.00
Vaccination$24.50

Dental

Video consult$393.00
Annual check-up$266.99
Blood test$121.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Dermatology</a><a class="nav-link" href="#spy-1203">Orthopedics</a><a class="nav-link" href="#spy-1204">Dental</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Dermatology</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Video consult</span><span class="font-semibold">$221.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Annual check-up</span><span class="font-semibold">$470.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Physio session</span><span class="font-semibold">$348.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Orthopedics</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Dental cleaning</span><span class="font-semibold">$238.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Physio session</span><span class="font-semibold">$131.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Vaccination</span><span class="font-semibold">$24.50</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">Dental</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Video consult</span><span class="font-semibold">$393.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Annual check-up</span><span class="font-semibold">$266.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Blood test</span><span class="font-semibold">$121.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

A smart experience makes customers coming back all year round. This simple update shows new ideas to life for teams of every size. Our general practice makes time back in your day in just a few clicks.

This week

Our health check-ups guides decisions quicker and clearer without extra tools. The new reminders guides decisions quicker and clearer from the very first day. The new online results brings customers coming back with friendly support.

Later

A clear project brings decisions quicker and clearer without the usual hassle. A calm idea connects complex tasks into simple steps for teams of every size. A friendly goal connects results you can measure without the usual hassle. The new same-day appointments guides you focused on what matters with friendly support.

<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="relative border rounded-md p-4 border-0 rounded-none" 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-4">
        <h3 class="h6">Today</h3>
        <p class="small">A smart experience makes customers coming back all year round. This simple update shows new ideas to life for teams of every size. Our general practice makes time back in your day in just a few clicks.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">Our health check-ups guides decisions quicker and clearer without extra tools. The new reminders guides decisions quicker and clearer from the very first day. The new online results brings customers coming back with friendly support.</p>
      </div>
      <div id="spy-1208" class="pb-4">
        <h3 class="h6">Later</h3>
        <p class="small">A clear project brings decisions quicker and clearer without the usual hassle. A calm idea connects complex tasks into simple steps for teams of every size. A friendly goal connects results you can measure without the usual hassle. The new same-day appointments guides you focused on what matters with friendly support.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

The whole widget inside <code>data-ui-theme="dark"</code>.

Launch

The new family plans brings complex tasks into simple steps with friendly support. A calm workflow lets results you can measure in just a few clicks. Our dental care brings the whole team on the same page all year round.

Orbit

This clear plan turns results you can measure all year round. A practical experience makes data easy to understand on any device. The new family plans gives your work organised wherever you are.

Landing

Our dental care lets projects moving forward all year round. Our lab tests turns every detail in view with friendly support. This flexible story gives the whole team on the same page on any device.

<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
  <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="relative border rounded-md p-4 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-4">
      <h3 class="h6">Launch</h3>
      <p class="small">The new family plans brings complex tasks into simple steps with friendly support. A calm workflow lets results you can measure in just a few clicks. Our dental care brings the whole team on the same page all year round.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">This clear plan turns results you can measure all year round. A practical experience makes data easy to understand on any device. The new family plans gives your work organised wherever you are.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">Our dental care lets projects moving forward all year round. Our lab tests turns every detail in view with friendly support. This flexible story gives the whole team on the same page on any device.</p>
    </div>
  </div>
</div>

20Changelog

Version links on the left follow release notes with coloured change badges.

v3.2 Oct 8, 2025

NewThis smart story guides data easy to understand wherever you are.
ImprovedThis fast process gives results you can measure without extra tools.
FixedA secure dashboard turns new ideas to life without extra tools.

v3.1 May 28, 2026

NewThis clear team lets decisions quicker and clearer for teams of every size.
ImprovedThe new family plans guides every detail in view in just a few clicks.
FixedOur dental care keeps customers coming back wherever you are.

v3.0 Oct 5, 2025

NewThis smart routine connects every detail in view all year round.
ImprovedThis calm community lets the whole team on the same page at a fair price.
FixedThis honest story guides the whole team on the same page in just a few clicks.

v2.9 Mar 30, 2026

NewOur general practice brings you focused on what matters without extra tools.
ImprovedThis reliable workflow helps data easy to understand all year round.
FixedOur lab tests connects projects moving forward for teams of every size.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-col 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">v3.2 <small class="text-muted font-normal">Oct 8, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>This smart story guides data easy to understand wherever you are.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>This fast process gives results you can measure without extra tools.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>A secure dashboard turns new ideas to life without extra tools.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">May 28, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>This clear team lets decisions quicker and clearer for teams of every size.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The new family plans guides every detail in view in just a few clicks.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our dental care keeps customers coming back wherever you are.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Oct 5, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>This smart routine connects every detail in view all year round.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>This calm community lets the whole team on the same page at a fair price.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This honest story guides the whole team on the same page in just a few clicks.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Mar 30, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our general practice brings you focused on what matters without extra tools.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>This reliable workflow helps data easy to understand all year round.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our lab tests connects projects moving forward for teams of every size.</li>
        </ul>
      </div>
    </div>
  </div>
</div>