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-bs-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

Start in minutes and get help from a real person whenever you need it. Friendly reminders make sure you never miss a check-up or a dose. We keep things simple, so you can focus on what matters to you.

Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home. Children are welcome, and our paediatric team knows how to make them smile.

Details

Family plans cover check-ups and vaccinations for everyone under one roof. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our clinic is fully accessible, with free parking right outside.

Book online in two minutes and see a doctor as soon as today. Same-day appointments are available for urgent needs on weekdays. Our team has done this many times, so you never have to guess.

Pricing

Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment.

Friendly people answer your questions quickly, by phone, chat or email. Thousands of patients already trust us, and we work hard to keep it that way. We work with most insurance providers and explain any costs upfront.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Solao Base</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Friendly reminders make sure you never miss a check-up or a dose. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home. Children are welcome, and our paediatric team knows how to make them smile.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our clinic is fully accessible, with free parking right outside.</p>
    <p class="small">Book online in two minutes and see a doctor as soon as today. Same-day appointments are available for urgent needs on weekdays. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Thousands of patients already trust us, and we work hard to keep it that way. We work with most insurance providers and explain any costs upfront.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Friendly reminders make sure you never miss a check-up or a dose. Our clinic is fully accessible, with free parking right outside. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment.

Step two

Children are welcome, and our paediatric team knows how to make them smile. We work with most insurance providers and explain any costs upfront. Same-day appointments are available for urgent needs on weekdays.

Step three

Start in minutes and get help from a real person whenever you need it. Video consultations let you speak with a doctor from the comfort of home. Your records are private, secure and always available when you need them. We measure success by how many patients come back and tell their friends.

Step four

Family plans cover check-ups and vaccinations for everyone under one roof. Our team has done this many times, so you never have to guess. Thousands of patients already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Our clinic is fully accessible, with free parking right outside. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Children are welcome, and our paediatric team knows how to make them smile. We work with most insurance providers and explain any costs upfront. Same-day appointments are available for urgent needs on weekdays.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Video consultations let you speak with a doctor from the comfort of home. Your records are private, secure and always available when you need them. We measure success by how many patients come back and tell their friends.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Our team has done this many times, so you never have to guess. Thousands of patients already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.</p>
  </div>
</div>

3Vertical pills

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

Dental care

Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Book online in two minutes and see a doctor as soon as today.

Lab tests

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Lab results arrive in your patient portal, usually within 48 hours.

General practice

Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home. Friendly reminders make sure you never miss a check-up or a dose.

Questions

Children are welcome, and our paediatric team knows how to make them smile. We work with most insurance providers and explain any costs upfront. Family plans cover check-ups and vaccinations for everyone under one roof. Clear prices, honest advice and no surprises along the way.

<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">Dental care</a><a class="nav-link" href="#spy-1132">Lab tests</a><a class="nav-link" href="#spy-1133">General practice</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-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Dental care</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Lab tests</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">General practice</h3>
        <p class="small">Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. We work with most insurance providers and explain any costs upfront. Family plans cover check-ups and vaccinations for everyone under one roof. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Our clinic is fully accessible, with free parking right outside. Thousands of patients already trust us, and we work hard to keep it that way. Lab results arrive in your patient portal, usually within 48 hours.

Install

Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Book online in two minutes and see a doctor as soon as today.

Configure

We measure success by how many patients come back and tell their friends. Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment means faster diagnoses and more comfortable treatment.

Usage

We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.

Examples

Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Lab results arrive in your patient portal, usually within 48 hours.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">Our clinic is fully accessible, with free parking right outside. Thousands of patients already trust us, and we work hard to keep it that way. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Lab results arrive in your patient portal, usually within 48 hours.</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

Thousands of patients already trust us, and we work hard to keep it that way. Children are welcome, and our paediatric team knows how to make them smile. Family plans cover check-ups and vaccinations for everyone under one roof.

Midday

We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Friendly reminders make sure you never miss a check-up or a dose.

Afternoon

We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Our specialists take time to listen and explain every step of your treatment.

Evening

Same-day appointments are available for urgent needs on weekdays. Every detail is handled by people who care about getting it right. We work with most insurance providers and explain any costs upfront. Book online in two minutes and see a doctor as soon as today.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Children are welcome, and our paediatric team knows how to make them smile. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Same-day appointments are available for urgent needs on weekdays. Every detail is handled by people who care about getting it right. We work with most insurance providers and explain any costs upfront. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Clear prices, honest advice and no surprises along the way. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside. Video consultations let you speak with a doctor from the comfort of home.

Beta

We measure success by how many patients come back and tell their friends. Thousands of patients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.

Gamma

We measure success by how many patients come back and tell their friends. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside. Video consultations let you speak with a doctor from the comfort of home.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Thousands of patients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need. Video consultations let you speak with a doctor from the comfort of home.

Features

Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. Our specialists take time to listen and explain every step of your treatment. We work with most insurance providers and explain any costs upfront.

Reviews

Same-day appointments are available for urgent needs on weekdays. Book online in two minutes and see a doctor as soon as today. Friendly reminders make sure you never miss a check-up or a dose.

FAQ

Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Lab results arrive in your patient portal, usually within 48 hours.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need. Video consultations let you speak with a doctor from the comfort of home.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. Our specialists take time to listen and explain every step of your treatment. We work with most insurance providers and explain any costs upfront.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Same-day appointments are available for urgent needs on weekdays. Book online in two minutes and see a doctor as soon as today. Friendly reminders make sure you never miss a check-up or a dose.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Lab results arrive in your patient portal, usually within 48 hours.</p>
  </div>
</div>

8Table of contents on the right

Documentation layout: content first, a small contents list on the right on larger screens.

Summary

Children are welcome, and our paediatric team knows how to make them smile. Every detail is handled by people who care about getting it right. Family plans cover check-ups and vaccinations for everyone under one roof. We keep things simple, so you can focus on what matters to you.

Background

Your records are private, secure and always available when you need them. Start in minutes and get help from a real person whenever you need it. Same-day appointments are available for urgent needs on weekdays.

Method

Video consultations let you speak with a doctor from the comfort of home. Our specialists take time to listen and explain every step of your treatment. Our clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront.

Results

Thousands of patients already trust us, and we work hard to keep it that way. Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess.

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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Every detail is handled by people who care about getting it right. Family plans cover check-ups and vaccinations for everyone under one roof. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Your records are private, secure and always available when you need them. Start in minutes and get help from a real person whenever you need it. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Our specialists take time to listen and explain every step of your treatment. Our clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess.</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 Set up your profile Invite the team Go live

Create an account

Clear prices, honest advice and no surprises along the way. Friendly reminders make sure you never miss a check-up or a dose. We measure success by how many patients come back and tell their friends.

Set up your profile

Modern equipment means faster diagnoses and more comfortable treatment. Children are welcome, and our paediatric team knows how to make them smile. Book online in two minutes and see a doctor as soon as today. Every detail is handled by people who care about getting it right.

Invite the team

Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Book online in two minutes and see a doctor as soon as today.

Go live

Every detail is handled by people who care about getting it right. Your records are private, secure and always available when you need them. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Friendly reminders make sure you never miss a check-up or a dose. We measure success by how many patients come back and tell their friends.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Children are welcome, and our paediatric team knows how to make them smile. Book online in two minutes and see a doctor as soon as today. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Your records are private, secure and always available when you need them. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Sleep tips our doctors actually use

We work with most insurance providers and explain any costs upfront. We listen first, then build a plan around what you actually need. We measure success by how many patients come back and tell their friends.

2024

The small habits that make a big difference

Family plans cover check-ups and vaccinations for everyone under one roof. Friendly reminders make sure you never miss a check-up or a dose. Children are welcome, and our paediatric team knows how to make them smile.

2025

Staying active after an injury

Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home.

2026

A beginner's guide to getting started

Same-day appointments are available for urgent needs on weekdays. Our clinic is fully accessible, with free parking right outside. Modern equipment means faster diagnoses and more comfortable treatment. Our specialists take time to listen and explain every step of your treatment.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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">Sleep tips our doctors actually use</h3>
    <p class="small mb-0">We work with most insurance providers and explain any costs upfront. We listen first, then build a plan around what you actually need. We measure success by how many patients come back and tell their friends.</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 small habits that make a big difference</h3>
    <p class="small mb-0">Family plans cover check-ups and vaccinations for everyone under one roof. Friendly reminders make sure you never miss a check-up or a dose. Children are welcome, and our paediatric team knows how to make them smile.</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">Staying active after an injury</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home.</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">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">Same-day appointments are available for urgent needs on weekdays. Our clinic is fully accessible, with free parking right outside. Modern equipment means faster diagnoses and more comfortable treatment. Our specialists take time to listen and explain every step of your treatment.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Looking back at a busy season?: Thousands of patients already trust us, and we work hard to keep it that way.
When to choose a video consultation?: We keep things simple, so you can focus on what matters to you.
What to expect at your first dental visit?: Video consultations let you speak with a doctor from the comfort of home.

Shipping

A simple monthly skin check?: Lab results arrive in your patient portal, usually within 48 hours.
How often should you have a health check-up??: Clear prices, honest advice and no surprises along the way.
What our patients asked us most?: Start in minutes and get help from a real person whenever you need it.

Returns

Our favourite tips for busy weeks?: Thousands of patients already trust us, and we work hard to keep it that way.
Inside our new heart screening clinic?: Children are welcome, and our paediatric team knows how to make them smile.
Five things we learned this year?: Friendly reminders make sure you never miss a check-up or a dose.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Thousands of patients already trust us, and we work hard to keep it that way.</dd>
          <dt class="small">When to choose a video consultation?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">What to expect at your first dental visit?</dt>
          <dd class="small text-body-secondary">Video consultations let you speak with a doctor from the comfort of home.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">A simple monthly skin check?</dt>
          <dd class="small text-body-secondary">Lab results arrive in your patient portal, usually within 48 hours.</dd>
          <dt class="small">How often should you have a health check-up??</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">What our patients asked us most?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Thousands of patients already trust us, and we work hard to keep it that way.</dd>
          <dt class="small">Inside our new heart screening clinic?</dt>
          <dd class="small text-body-secondary">Children are welcome, and our paediatric team knows how to make them smile.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Friendly reminders make sure you never miss a check-up or a dose.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Book online in two minutes and see a doctor as soon as today. Modern equipment means faster diagnoses and more comfortable treatment. Same-day appointments are available for urgent needs on weekdays. Your records are private, secure and always available when you need them.

Battery

We keep things simple, so you can focus on what matters to you. Our specialists take time to listen and explain every step of your treatment. We listen first, then build a plan around what you actually need.

Connectivity

Friendly people answer your questions quickly, by phone, chat or email. We work with most insurance providers and explain any costs upfront. Every detail is handled by people who care about getting it right.

Security

Family plans cover check-ups and vaccinations for everyone under one roof. Our clinic is fully accessible, with free parking right outside. Our team has done this many times, so you never have to guess.

<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" 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-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. Modern equipment means faster diagnoses and more comfortable treatment. Same-day appointments are available for urgent needs on weekdays. Your records are private, secure and always available when you need them.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Our specialists take time to listen and explain every step of your treatment. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We work with most insurance providers and explain any costs upfront. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Our clinic is fully accessible, with free parking right outside. Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$11.54 / mo

Insurance friendly
Online results
Family plans

Team

$31.53 / mo

Insurance friendly
Insurance friendly
Same-day appointments

Business

$78.44 / mo

Same-day appointments
Certified specialists
Reminders

<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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-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">$11.54<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Insurance friendly</li>
        <li>Online results</li>
        <li>Family plans</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">$31.53<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Insurance friendly</li>
        <li>Insurance friendly</li>
        <li>Same-day appointments</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">$78.44<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Same-day appointments</li>
        <li>Certified specialists</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: How to choose the right service

We measure success by how many patients come back and tell their friends. We keep things simple, so you can focus on what matters to you. Family plans cover check-ups and vaccinations for everyone under one roof. Our specialists take time to listen and explain every step of your treatment.

We work with most insurance providers and explain any costs upfront. Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it.

Chapter 2: Understanding your blood test results

Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.

Your records are private, secure and always available when you need them. Our clinic is fully accessible, with free parking right outside. We measure success by how many patients come back and tell their friends.

Chapter 3: Simple habits for a healthier back

Clear prices, honest advice and no surprises along the way. Children are welcome, and our paediatric team knows how to make them smile. Friendly people answer your questions quickly, by phone, chat or email.

Same-day appointments are available for urgent needs on weekdays. Modern equipment means faster diagnoses and more comfortable treatment. Every detail is handled by people who care about getting it right.

Chapter 4: A parent's guide to childhood vaccinations

Book online in two minutes and see a doctor as soon as today. Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess.

Children are welcome, and our paediatric team knows how to make them smile. Book online in two minutes and see a doctor as soon as today. Our clinic is fully accessible, with free parking right outside.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: How to choose the right service</h3>
    <p class="small">We measure success by how many patients come back and tell their friends. We keep things simple, so you can focus on what matters to you. Family plans cover check-ups and vaccinations for everyone under one roof. Our specialists take time to listen and explain every step of your treatment.</p>
    <p class="small">We work with most insurance providers and explain any costs upfront. Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Understanding your blood test results</h3>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Your records are private, secure and always available when you need them. Our clinic is fully accessible, with free parking right outside. We measure success by how many patients come back and tell their friends.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Simple habits for a healthier back</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Children are welcome, and our paediatric team knows how to make them smile. Friendly people answer your questions quickly, by phone, chat or email.</p>
    <p class="small">Same-day appointments are available for urgent needs on weekdays. Modern equipment means faster diagnoses and more comfortable treatment. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: A parent&#39;s guide to childhood vaccinations</h3>
    <p class="small">Book online in two minutes and see a doctor as soon as today. Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Book online in two minutes and see a doctor as soon as today. Our clinic is fully accessible, with free parking right outside.</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

Start in minutes and get help from a real person whenever you need it. Your records are private, secure and always available when you need them. We measure success by how many patients come back and tell their friends. Clear prices, honest advice and no surprises along the way.

Notifications

Product news

Weekly digest

Friendly people answer your questions quickly, by phone, chat or email. Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home. Every detail is handled by people who care about getting it right.

Privacy

Hide my profile from search

Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess. Friendly reminders make sure you never miss a check-up or a dose.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Elena Brennan">
        </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">Start in minutes and get help from a real person whenever you need it. Your records are private, secure and always available when you need them. We measure success by how many patients come back and tell their friends. Clear prices, honest advice and no surprises along the way.</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">Friendly people answer your questions quickly, by phone, chat or email. Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home. Every detail is handled by people who care about getting it right.</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">Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Sales

Noah Fischer
QA Engineer
Nadia Silva
Product Designer
Mia Tanaka
Project Manager

Marketing

Felix Quinn
Art Director
Omar Rossi
Project Manager
Tariq Ashford
Support Specialist

Legal

Maya Lindqvist
HR Partner
Samir Whitaker
Support Specialist
Amara Okafor
Marketing Lead

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Marketing</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Sales</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="Noah Fischer"><div><div class="small fw-semibold">Noah Fischer</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-11.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">Product Designer</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="Mia Tanaka"><div><div class="small fw-semibold">Mia Tanaka</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Felix Quinn"><div><div class="small fw-semibold">Felix Quinn</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-6.svg" class="rounded-circle" width="36" height="36" alt="Omar Rossi"><div><div class="small fw-semibold">Omar Rossi</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Tariq Ashford"><div><div class="small fw-semibold">Tariq Ashford</div><div class="small text-body-secondary">Support Specialist</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-7.svg" class="rounded-circle" width="36" height="36" alt="Maya Lindqvist"><div><div class="small fw-semibold">Maya Lindqvist</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-1.svg" class="rounded-circle" width="36" height="36" alt="Samir Whitaker"><div><div class="small fw-semibold">Samir Whitaker</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Amara Okafor"><div><div class="small fw-semibold">Amara Okafor</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Orthopedics

Vaccination$34.00
Blood test$50.00
Skin check$88.00

Cardiology

Teeth whitening$243.99
Blood test$47.00
Sports injury clinic$109.99

Pediatrics

Teeth whitening$229.00
Annual check-up$150.00
Physio session$67.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Orthopedics</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-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Orthopedics</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vaccination</span><span class="fw-semibold">$34.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Blood test</span><span class="fw-semibold">$50.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Skin check</span><span class="fw-semibold">$88.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>Teeth whitening</span><span class="fw-semibold">$243.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Blood test</span><span class="fw-semibold">$47.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Sports injury clinic</span><span class="fw-semibold">$109.99</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>Teeth whitening</span><span class="fw-semibold">$229.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$150.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Physio session</span><span class="fw-semibold">$67.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Our specialists take time to listen and explain every step of your treatment. We listen first, then build a plan around what you actually need. Family plans cover check-ups and vaccinations for everyone under one roof.

This week

We keep things simple, so you can focus on what matters to you. We work with most insurance providers and explain any costs upfront. Thousands of patients already trust us, and we work hard to keep it that way.

Later

Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Your records are private, secure and always available when you need them.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Our specialists take time to listen and explain every step of your treatment. We listen first, then build a plan around what you actually need. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. We work with most insurance providers and explain any costs upfront. Thousands of patients already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Your records are private, secure and always available when you need them.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Family plans cover check-ups and vaccinations for everyone under one roof. Book online in two minutes and see a doctor as soon as today. Video consultations let you speak with a doctor from the comfort of home. Children are welcome, and our paediatric team knows how to make them smile.

Orbit

Our specialists take time to listen and explain every step of your treatment. We measure success by how many patients come back and tell their friends. Friendly reminders make sure you never miss a check-up or a dose.

Landing

We work with most insurance providers and explain any costs upfront. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Book online in two minutes and see a doctor as soon as today. Video consultations let you speak with a doctor from the comfort of home. Children are welcome, and our paediatric team knows how to make them smile.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Our specialists take time to listen and explain every step of your treatment. We measure success by how many patients come back and tell their friends. Friendly reminders make sure you never miss a check-up or a dose.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">We work with most insurance providers and explain any costs upfront. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Dec 9, 2025

NewWe keep things simple, so you can focus on what matters to you.
ImprovedSame-day appointments are available for urgent needs on weekdays.
FixedThousands of patients already trust us, and we work hard to keep it that way.

v3.1 Oct 13, 2026

NewOur clinic is fully accessible, with free parking right outside.
ImprovedOur team has done this many times, so you never have to guess.
FixedModern equipment means faster diagnoses and more comfortable treatment.

v3.0 Mar 16, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedWe listen first, then build a plan around what you actually need.

v2.9 Sep 1, 2026

NewFamily plans cover check-ups and vaccinations for everyone under one roof.
ImprovedWe listen first, then build a plan around what you actually need.
FixedYour records are private, secure and always available when you need them.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Dec 9, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Same-day appointments are available for urgent needs on weekdays.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of patients already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 13, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our clinic is fully accessible, with free parking right outside.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Modern equipment means faster diagnoses and more comfortable treatment.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 16, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Sep 1, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Family plans cover check-ups and vaccinations for everyone under one roof.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We listen first, then build a plan around what you actually need.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Your records are private, secure and always available when you need them.</li>
        </ul>
      </div>
    </div>
  </div>
</div>