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

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. Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess.

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. Same-day appointments are available for urgent needs on weekdays.

Details

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. We work with most insurance providers and explain any costs upfront.

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. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.

Pricing

Friendly reminders make sure you never miss a check-up or a dose. Our specialists take time to listen and explain every step of your treatment. Start in minutes and get help from a real person whenever you need it.

Lab results arrive in your patient portal, usually within 48 hours. Modern equipment means faster diagnoses and more comfortable treatment. Thousands of patients already trust us, and we work hard to keep it that way. Same-day appointments are available for urgent needs on weekdays.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Orbi Studio</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">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. 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">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. Same-day appointments are available for urgent needs on weekdays.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">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. We work with most insurance providers and explain any costs upfront.</p>
    <p class="small">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. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Our specialists take time to listen and explain every step of your treatment. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Lab results arrive in your patient portal, usually within 48 hours. Modern equipment means faster diagnoses and more comfortable treatment. Thousands of patients already trust us, and we work hard to keep it that way. Same-day appointments are available for urgent needs on weekdays.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

Step two

Book online in two minutes and see a doctor as soon as today. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. We listen first, then build a plan around what you actually need.

Step three

Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Our specialists take time to listen and explain every step of your treatment.

Step four

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. We keep things simple, so you can focus on what matters to you. We work with most insurance providers and explain any costs upfront.

<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">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. 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 id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Book online in two minutes and see a doctor as soon as today. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. We listen first, then build a plan around what you actually need.</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. Our team has done this many times, so you never have to guess. Our specialists take time to listen and explain every step of your treatment.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">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. We keep things simple, so you can focus on what matters to you. We work with most insurance providers and explain any costs upfront.</p>
  </div>
</div>

3Vertical pills

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

Dental care

Our clinic is fully accessible, with free parking right outside. 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.

General practice

Book online in two minutes and see a doctor as soon as today. Lab results arrive in your patient portal, usually within 48 hours. Every detail is handled by people who care about getting it right.

Physiotherapy

Clear prices, honest advice and no surprises along the way. 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 measure success by how many patients come back and tell their friends.

Questions

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. Friendly people answer your questions quickly, by phone, chat or email. Video consultations let you speak with a doctor from the comfort of home.

<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">General practice</a><a class="nav-link" href="#spy-1133">Physiotherapy</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">Our clinic is fully accessible, with free parking right outside. 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-1132" class="pb-3">
        <h3 class="h6">General practice</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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Physiotherapy</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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 measure success by how many patients come back and tell their friends.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</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. Friendly people answer your questions quickly, by phone, chat or email. Video consultations let you speak with a doctor from the comfort of home.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Friendly reminders make sure you never miss a check-up or a dose. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. We work with most insurance providers and explain any costs upfront.

Install

Our clinic is fully accessible, with free parking right outside. Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it. Modern equipment means faster diagnoses and more comfortable treatment.

Configure

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. Clear prices, honest advice and no surprises along the way.

Usage

We work with most insurance providers and explain any costs upfront. 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. We measure success by how many patients come back and tell their friends.

Examples

Friendly reminders make sure you never miss a check-up or a dose. 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. 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">Friendly reminders make sure you never miss a check-up or a dose. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. We work with most insurance providers and explain any costs upfront.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Our clinic is fully accessible, with free parking right outside. Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">We work with most insurance providers and explain any costs upfront. 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. We measure success by how many patients come back and tell their friends.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Friendly reminders make sure you never miss a check-up or a dose. 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. 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

Family plans cover check-ups and vaccinations for everyone under one roof. Video consultations let you speak with a doctor from the comfort of home. Modern equipment means faster diagnoses and more comfortable treatment. Same-day appointments are available for urgent needs on weekdays.

Midday

Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email. Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need.

Afternoon

Thousands of patients already trust us, and we work hard to keep it that way. Our clinic is fully accessible, with free parking right outside. We keep things simple, so you can focus on what matters to you.

Evening

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. Family plans cover check-ups and vaccinations for everyone under one roof.

<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">Family plans cover check-ups and vaccinations for everyone under one roof. Video consultations let you speak with a doctor from the comfort of home. Modern equipment means faster diagnoses and more comfortable treatment. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email. Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Our clinic is fully accessible, with free parking right outside. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</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. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Modern equipment means faster diagnoses and more comfortable treatment. We work with most insurance providers and explain any costs upfront. Our clinic is fully accessible, with free parking right outside.

Beta

Every detail is handled by people who care about getting it right. 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.

Gamma

Children are welcome, and our paediatric team knows how to make them smile. Clear prices, honest advice and no surprises along the way. 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.

<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">Modern equipment means faster diagnoses and more comfortable treatment. We work with most insurance providers and explain any costs upfront. Our clinic is fully accessible, with free parking right outside.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Every detail is handled by people who care about getting it right. 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-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Clear prices, honest advice and no surprises along the way. 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.</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. Thousands of patients already trust us, and we work hard to keep it that way.

Features

Friendly people answer your questions quickly, by phone, chat or email. Same-day appointments are available for urgent needs on weekdays. Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you.

Reviews

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. We measure success by how many patients come back and tell their friends. Start in minutes and get help from a real person whenever you need it.

FAQ

Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside.

<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. Thousands of patients already trust us, and we work hard to keep it that way.</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. Same-day appointments are available for urgent needs on weekdays. Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">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. We measure success by how many patients come back and tell their friends. Start in minutes and get help from a real person whenever you need it.</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. Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Thousands of patients already trust us, and we work hard to keep it that way. Book online in two minutes and see a doctor as soon as today. Our specialists take time to listen and explain every step of your treatment.

Background

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. Family plans cover check-ups and vaccinations for everyone under one roof.

Method

We keep things simple, so you can focus on what matters to you. Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. Same-day appointments are available for urgent needs on weekdays.

Results

Friendly people answer your questions quickly, by phone, chat or email. Children are welcome, and our paediatric team knows how to make them smile. Lab results arrive in your patient portal, usually within 48 hours. We listen first, then build a plan around what you actually need.

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">Thousands of patients already trust us, and we work hard to keep it that way. Book online in two minutes and see a doctor as soon as today. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">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. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Friendly reminders make sure you never miss a check-up or a dose. 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-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Children are welcome, and our paediatric team knows how to make them smile. Lab results arrive in your patient portal, usually within 48 hours. We listen first, then build a plan around what you actually need.</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

Modern equipment means faster diagnoses and more comfortable treatment. Same-day appointments are available for urgent needs on weekdays. 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.

Set up your profile

Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment. Every detail is handled by people who care about getting it right.

Invite the team

Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Friendly reminders make sure you never miss a check-up or a dose.

Go live

Our clinic is fully accessible, with free parking right outside. We listen first, then build a plan around what you actually need. Modern equipment means faster diagnoses and more comfortable treatment.

<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">Modern equipment means faster diagnoses and more comfortable treatment. Same-day appointments are available for urgent needs on weekdays. 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.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment. 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">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Our clinic is fully accessible, with free parking right outside. We listen first, then build a plan around what you actually need. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Sleep tips our doctors actually use

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. Lab results arrive in your patient portal, usually within 48 hours. We work with most insurance providers and explain any costs upfront.

2024

Five things we learned this year

We keep things simple, so you can focus on what matters to you. We measure success by how many patients come back and tell their friends. Children are welcome, and our paediatric team knows how to make them smile.

2025

What to expect at your first dental visit

Family plans cover check-ups and vaccinations for everyone under one roof. Your records are private, secure and always available when you need them. Lab results arrive in your patient portal, usually within 48 hours.

2026

Inside our new heart screening clinic

We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. We work with most insurance providers and explain any costs upfront. Friendly reminders make sure you never miss a check-up or a dose.

<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">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. Lab results arrive in your patient portal, usually within 48 hours. We work with most insurance providers and explain any costs upfront.</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">Five things we learned this year</h3>
    <p class="small mb-0">We keep things simple, so you can focus on what matters to you. We measure success by how many patients come back and tell their friends. 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">What to expect at your first dental visit</h3>
    <p class="small mb-0">Family plans cover check-ups and vaccinations for everyone under one roof. Your records are private, secure and always available when you need them. Lab results arrive in your patient portal, usually within 48 hours.</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">Inside our new heart screening clinic</h3>
    <p class="small mb-0">We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. We work with most insurance providers and explain any costs upfront. Friendly reminders make sure you never miss a check-up or a dose.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our favourite tips for busy weeks?: We measure success by how many patients come back and tell their friends.
Understanding your blood test results?: Start in minutes and get help from a real person whenever you need it.
How often should you have a health check-up??: Book online in two minutes and see a doctor as soon as today.

Shipping

The small habits that make a big difference?: Family plans cover check-ups and vaccinations for everyone under one roof.
What our patients asked us most?: Modern equipment means faster diagnoses and more comfortable treatment.
How to choose the right service?: Our clinic is fully accessible, with free parking right outside.

Returns

A parent's guide to childhood vaccinations?: Friendly people answer your questions quickly, by phone, chat or email.
Simple habits for a healthier back?: Your records are private, secure and always available when you need them.
Staying active after an injury?: Same-day appointments are available for urgent needs on weekdays.

<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-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">We measure success by how many patients come back and tell their friends.</dd>
          <dt class="small">Understanding your blood test results?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">How often should you have a health check-up??</dt>
          <dd class="small text-body-secondary">Book online in two minutes and see a doctor as soon as today.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Family plans cover check-ups and vaccinations for everyone under one roof.</dd>
          <dt class="small">What our patients asked us most?</dt>
          <dd class="small text-body-secondary">Modern equipment means faster diagnoses and more comfortable treatment.</dd>
          <dt class="small">How to choose the right service?</dt>
          <dd class="small text-body-secondary">Our clinic is fully accessible, with free parking right outside.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">A parent&#39;s guide to childhood vaccinations?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">Simple habits for a healthier back?</dt>
          <dd class="small text-body-secondary">Your records are private, secure and always available when you need them.</dd>
          <dt class="small">Staying active after an injury?</dt>
          <dd class="small text-body-secondary">Same-day appointments are available for urgent needs on weekdays.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Every detail is handled by people who care about getting it right. 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.

Battery

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. We keep things simple, so you can focus on what matters to you.

Connectivity

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. We work with most insurance providers and explain any costs upfront. Family plans cover check-ups and vaccinations for everyone under one roof.

Security

We measure success by how many patients come back and tell their friends. 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.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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">Every detail is handled by people who care about getting it right. 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.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</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. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">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. We work with most insurance providers and explain any costs upfront. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. 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>
  </div>
</div>

13Pricing plans

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

Starter

$9.72 / mo

Online results
Same-day appointments
Online results

Team

$30.53 / mo

Certified specialists
Same-day appointments
Insurance friendly

Business

$58.04 / mo

Family plans
Insurance friendly
Family plans

<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">$9.72<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Online results</li>
        <li>Same-day appointments</li>
        <li>Online results</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">$30.53<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Certified specialists</li>
        <li>Same-day appointments</li>
        <li>Insurance friendly</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">$58.04<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Family plans</li>
        <li>Insurance friendly</li>
        <li>Family plans</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: A simple monthly skin check

Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment.

Our clinic is fully accessible, with free parking right outside. Every detail is handled by people who care about getting it right. Thousands of patients already trust us, and we work hard to keep it that way.

Chapter 2: When to choose a video consultation

Same-day appointments are available for urgent needs on weekdays. Children are welcome, and our paediatric team knows how to make them smile. Clear prices, honest advice and no surprises along the way.

Friendly reminders make sure you never miss a check-up or a dose. 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.

Chapter 3: A beginner's guide to getting started

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. Lab results arrive in your patient portal, usually within 48 hours. Our clinic is fully accessible, with free parking right outside.

Start in minutes and get help from a real person whenever you need it. We measure success by how many patients come back and tell their friends. Book online in two minutes and see a doctor as soon as today.

Chapter 4: Looking back at a busy season

Friendly reminders make sure you never miss a check-up or a dose. Family plans cover check-ups and vaccinations for everyone under one roof. Lab results arrive in your patient portal, usually within 48 hours. 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. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Same-day appointments are available for urgent needs on weekdays.

<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: A simple monthly skin check</h3>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment.</p>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Every detail is handled by people who care about getting it right. Thousands of patients already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: When to choose a video consultation</h3>
    <p class="small">Same-day appointments are available for urgent needs on weekdays. Children are welcome, and our paediatric team knows how to make them smile. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. 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.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: A beginner&#39;s guide to getting started</h3>
    <p class="small">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. Lab results arrive in your patient portal, usually within 48 hours. Our clinic is fully accessible, with free parking right outside.</p>
    <p class="small">Start in minutes and get help from a real person whenever you need it. We measure success by how many patients come back and tell their friends. Book online in two minutes and see a doctor as soon as today.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Looking back at a busy season</h3>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Family plans cover check-ups and vaccinations for everyone under one roof. Lab results arrive in your patient portal, usually within 48 hours. Our specialists take time to listen and explain every step of your treatment.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Same-day appointments are available for urgent needs on weekdays.</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

We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.

Notifications

Product news

Weekly digest

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. Your records are private, secure and always available when you need them.

Privacy

Hide my profile from search

Modern equipment means faster diagnoses and more comfortable treatment. Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way. We measure success by how many patients come back and tell their friends.

<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="Hana 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="Porto">
        </div>
        <p class="small">We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.</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">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. Your records are private, secure and always available when you need them.</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">Modern equipment means faster diagnoses and more comfortable treatment. Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way. We measure success by how many patients come back and tell their friends.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Legal

Aria Mensah
Operations Manager
Liam Carter
Project Manager
Zoe Nguyen
QA Engineer

Sales

Ethan Hughes
Frontend Engineer
Kenji Quinn
Data Analyst
Ella Alvarez
Customer Success

Human Resources

Chloe Moreau
Data Analyst
Tariq Sato
Content Writer
Sofia Duarte
Marketing Lead

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Human Resources</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">Legal</h3>
    <ul class="list-unstyled">
      <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="Aria Mensah"><div><div class="small fw-semibold">Aria Mensah</div><div class="small text-body-secondary">Operations Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Liam Carter"><div><div class="small fw-semibold">Liam Carter</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-5.svg" class="rounded-circle" width="36" height="36" alt="Zoe Nguyen"><div><div class="small fw-semibold">Zoe Nguyen</div><div class="small text-body-secondary">QA Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" 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-12.svg" class="rounded-circle" width="36" height="36" alt="Ethan Hughes"><div><div class="small fw-semibold">Ethan Hughes</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Kenji Quinn"><div><div class="small fw-semibold">Kenji Quinn</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Ella Alvarez"><div><div class="small fw-semibold">Ella Alvarez</div><div class="small text-body-secondary">Customer Success</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <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="Chloe Moreau"><div><div class="small fw-semibold">Chloe Moreau</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Tariq Sato"><div><div class="small fw-semibold">Tariq Sato</div><div class="small text-body-secondary">Content Writer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Sofia Duarte"><div><div class="small fw-semibold">Sofia Duarte</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Dermatology

Video consult$40.00
Vaccination$35.00
Annual check-up$141.99

Cardiology

Skin check$96.00
Video consult$38.99
Child check-up$63.00

Orthopedics

Child check-up$62.00
Blood test$45.00
Dental cleaning$89.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">Cardiology</a><a class="nav-link" href="#spy-1204">Orthopedics</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">Dermatology</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Video consult</span><span class="fw-semibold">$40.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vaccination</span><span class="fw-semibold">$35.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$141.99</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>Skin check</span><span class="fw-semibold">$96.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Video consult</span><span class="fw-semibold">$38.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Child check-up</span><span class="fw-semibold">$63.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>Child check-up</span><span class="fw-semibold">$62.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Blood test</span><span class="fw-semibold">$45.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Dental cleaning</span><span class="fw-semibold">$89.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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

This week

Your records are private, secure and always available when you need them. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Our specialists take time to listen and explain every step of your treatment.

Later

Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today. We work with most insurance providers and explain any costs upfront. Start in minutes and get help from a real person whenever you need it.

<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 clinic is fully accessible, with free parking right outside. Thousands of patients already trust us, and we work hard to keep it that way. 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>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Your records are private, secure and always available when you need them. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Our specialists take time to listen and explain every step of your treatment.</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. Book online in two minutes and see a doctor as soon as today. We work with most insurance providers and explain any costs upfront. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the 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.

Orbit

Friendly people answer your questions quickly, by phone, chat or email. Same-day appointments are available for urgent needs on weekdays. We listen first, then build a plan around what you actually need.

Landing

Lab results arrive in your patient portal, usually within 48 hours. We measure success by how many patients come back and tell their friends. Start in minutes and get help from a real person whenever you need it.

<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">Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the 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-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Same-day appointments are available for urgent needs on weekdays. We listen first, then build a plan around what you actually need.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Lab results arrive in your patient portal, usually within 48 hours. We measure success by how many patients come back and tell their friends. Start in minutes and get help from a real person whenever you need it.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Apr 16, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
FixedClear prices, honest advice and no surprises along the way.

v3.1 Jun 3, 2026

NewLab results arrive in your patient portal, usually within 48 hours.
ImprovedVideo consultations let you speak with a doctor from the comfort of home.
FixedOur clinic is fully accessible, with free parking right outside.

v3.0 Oct 12, 2025

NewOur team has done this many times, so you never have to guess.
ImprovedWe listen first, then build a plan around what you actually need.
FixedWe keep things simple, so you can focus on what matters to you.

v2.9 Jul 7, 2026

NewFamily plans cover check-ups and vaccinations for everyone under one roof.
ImprovedOur specialists take time to listen and explain every step of your treatment.
FixedBook online in two minutes and see a doctor as soon as today.

<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">Apr 16, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jun 3, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Lab results arrive in your patient portal, usually within 48 hours.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Video consultations let you speak with a doctor from the comfort of home.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our clinic is fully accessible, with free parking right outside.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Oct 12, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</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>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jul 7, 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>Our specialists take time to listen and explain every step of your treatment.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Book online in two minutes and see a doctor as soon as today.</li>
        </ul>
      </div>
    </div>
  </div>
</div>