Scrollspy

Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.

1In a navbar

Scroll the box: the navbar pill for the visible section becomes active.

Intro

Children are welcome, and our paediatric team knows how to make them smile. Same-day appointments are available for urgent needs on weekdays. 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. Lab results arrive in your patient portal, usually within 48 hours. Friendly reminders make sure you never miss a check-up or a dose.

Details

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

Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email. Video consultations let you speak with a doctor from the comfort of home.

Pricing

Our team has done this many times, so you never have to guess. Our clinic is fully accessible, with free parking right outside. We measure success by how many patients come back and tell their friends.

Modern equipment means faster diagnoses and more comfortable treatment. Clear prices, honest advice and no surprises along the 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="#">Junoly Labs</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
  </ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Your records are private, secure and always available when you need them. Lab results arrive in your patient portal, usually within 48 hours. Friendly reminders make sure you never miss a check-up or a dose.</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. 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">Our specialists take time to listen and explain every step of your treatment. 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 id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Our clinic is fully accessible, with free parking right outside. We measure success by how many patients come back and tell their friends.</p>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Clear prices, honest advice and no surprises along the 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

Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Book online in two minutes and see a doctor as soon as today.

Step two

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

Step three

Same-day appointments are available for urgent needs on weekdays. Thousands of patients already trust us, and we work hard to keep it that way. Video consultations let you speak with a doctor from the comfort of home. Our clinic is fully accessible, with free parking right outside.

Step four

We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Book online in two minutes and see a doctor as soon as today.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</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. Friendly reminders make sure you never miss a check-up or a dose.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Same-day appointments are available for urgent needs on weekdays. Thousands of patients already trust us, and we work hard to keep it that way. Video consultations let you speak with a doctor from the comfort of home. Our clinic is fully accessible, with free parking right outside.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</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. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

3Vertical pills

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

General practice

Start in minutes and get help from a real person whenever you need it. Modern equipment means faster diagnoses and more comfortable treatment. Our specialists take time to listen and explain every step of your treatment. Your records are private, secure and always available when you need them.

Telehealth

We measure success by how many patients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Children are welcome, and our paediatric team knows how to make them smile.

Health check-ups

Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you. Book online in two minutes and see a doctor as soon as today. Our clinic is fully accessible, with free parking right outside.

Questions

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. 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-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">General practice</a><a class="nav-link" href="#spy-1132">Telehealth</a><a class="nav-link" href="#spy-1133">Health check-ups</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">General practice</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Modern equipment means faster diagnoses and more comfortable treatment. Our specialists take time to listen and explain every step of your treatment. Your records are private, secure and always available when you need them.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Telehealth</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Health check-ups</h3>
        <p class="small">Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you. 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 id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</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. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We measure success by how many patients come back and tell their friends. Our team has done this many times, so you never have to guess. Family plans cover check-ups and vaccinations for everyone under one roof.

Install

We listen first, then build a plan around what you actually need. We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you.

Configure

Every detail is handled by people who care about getting it right. Modern equipment means faster diagnoses and more comfortable treatment. Children are welcome, and our paediatric team knows how to make them smile.

Usage

Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Video consultations let you speak with a doctor from the comfort of home.

Examples

Start in minutes and get help from a real person whenever you need it. Same-day appointments are available for urgent needs on weekdays. Thousands of patients already trust us, and we work hard to keep it that way.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Our team has done this many times, so you never have to guess. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">We listen first, then build a plan around what you actually need. We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Modern equipment means faster diagnoses and more comfortable treatment. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</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. 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 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. Same-day appointments are available for urgent needs on weekdays. Thousands of patients already trust us, and we work hard to keep it that way.</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

Our specialists take time to listen and explain every step of your treatment. 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.

Midday

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

Afternoon

Clear prices, honest advice and no surprises along the way. Same-day appointments are available for urgent needs on weekdays. Modern equipment means faster diagnoses and more comfortable treatment.

Evening

Book online in two minutes and see a doctor as soon as today. Your records are private, secure and always available when you need them. Video consultations let you speak with a doctor from the comfort of home.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Our specialists take time to listen and explain every step of your treatment. 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.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. 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 id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Same-day appointments are available for urgent needs on weekdays. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. Your records are private, secure and always available when you need them. Video consultations let you speak with a doctor from the comfort of home.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Friendly people answer your questions quickly, by phone, chat or email. 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.

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. Lab results arrive in your patient portal, usually within 48 hours.

Gamma

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. Children are welcome, and our paediatric team knows how to make them smile.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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-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. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">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. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Our clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.

Features

Every detail is handled by people who care about getting it right. Book online in two minutes and see a doctor as soon as today. Family plans cover check-ups and vaccinations for everyone under one roof. We measure success by how many patients come back and tell their friends.

Reviews

Our specialists take time to listen and explain every step of your treatment. 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. Clear prices, honest advice and no surprises along the way.

FAQ

Your records are private, secure and always available when you need them. 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. Same-day appointments are available for urgent needs on weekdays.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">Our clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Book online in two minutes and see a doctor as soon as today. Family plans cover check-ups and vaccinations for everyone under one roof. We measure success by how many patients come back and tell their friends.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our specialists take time to listen and explain every step of your treatment. 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. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Your records are private, secure and always available when you need them. 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. Same-day appointments are available for urgent needs on weekdays.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours.

Background

Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Family plans cover check-ups and vaccinations for everyone under one roof. Children are welcome, and our paediatric team knows how to make them smile.

Method

Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.

Results

Start in minutes and get help from a real person whenever you need it. Book online in two minutes and see a doctor as soon as today. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Family plans cover check-ups and vaccinations for everyone under one roof. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Book online in two minutes and see a doctor as soon as today. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.</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

Our clinic is fully accessible, with free parking right outside. Friendly reminders make sure you never miss a check-up or a dose. Your records are private, secure and always available when you need them. Lab results arrive in your patient portal, usually within 48 hours.

Set up your profile

Our specialists take time to listen and explain every step of your treatment. 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. We listen first, then build a plan around what you actually need.

Invite the team

Video consultations let you speak with a doctor from the comfort of home. 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. Same-day appointments are available for urgent needs on weekdays.

Go live

We keep things simple, so you can focus on what matters to you. Thousands of patients already trust us, and we work hard to keep it that way. Your records are private, secure and always available when you need them.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">Our clinic is fully accessible, with free parking right outside. Friendly reminders make sure you never miss a check-up or a dose. 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-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Our specialists take time to listen and explain every step of your treatment. 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. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. 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. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Thousands of patients already trust us, and we work hard to keep it that way. Your records are private, secure and always available when you need them.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

What to expect at your first dental visit

Clear prices, honest advice and no surprises along the way. Same-day appointments are available for urgent needs on weekdays. Family plans cover check-ups and vaccinations for everyone under one roof.

2024

A parent's guide to childhood vaccinations

Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment. 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.

2025

Understanding your blood test results

Lab results arrive in your patient portal, usually within 48 hours. 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. Book online in two minutes and see a doctor as soon as today.

2026

A simple monthly skin check

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. Modern equipment means faster diagnoses and more comfortable 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-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">What to expect at your first dental visit</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. Same-day appointments are available for urgent needs on weekdays. Family plans cover check-ups and vaccinations for everyone under one roof.</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">A parent&#39;s guide to childhood vaccinations</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment. 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-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">Understanding your blood test results</h3>
    <p class="small mb-0">Lab results arrive in your patient portal, usually within 48 hours. 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. Book online in two minutes and see a doctor as soon as today.</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 simple monthly skin check</h3>
    <p class="small mb-0">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. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Inside our new heart screening clinic?: Children are welcome, and our paediatric team knows how to make them smile.
What our patients asked us most?: Our team has done this many times, so you never have to guess.
Looking back at a busy season?: Our clinic is fully accessible, with free parking right outside.

Shipping

The small habits that make a big difference?: We work with most insurance providers and explain any costs upfront.
Our favourite tips for busy weeks?: Your records are private, secure and always available when you need them.
How often should you have a health check-up??: We keep things simple, so you can focus on what matters to you.

Returns

Staying active after an injury?: Our specialists take time to listen and explain every step of your treatment.
When to choose a video consultation?: Same-day appointments are available for urgent needs on weekdays.
How to choose the right service?: 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-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <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">What our patients asked us most?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Our clinic is fully accessible, with free parking right outside.</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">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">We work with most insurance providers and explain any costs upfront.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Your records are private, secure and always available when you need them.</dd>
          <dt class="small">How often should you have a health check-up??</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</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">Staying active after an injury?</dt>
          <dd class="small text-body-secondary">Our specialists take time to listen and explain every step of your treatment.</dd>
          <dt class="small">When to choose a video consultation?</dt>
          <dd class="small text-body-secondary">Same-day appointments are available for urgent needs on weekdays.</dd>
          <dt class="small">How to choose the right service?</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

Thousands of patients already trust us, and we work hard to keep it that way. Video consultations let you speak with a doctor from the comfort of home. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email.

Battery

Book online in two minutes and see a doctor as soon as today. Start in minutes and get help from a real person whenever you need it. Children are welcome, and our paediatric team knows how to make them smile. We listen first, then build a plan around what you actually need.

Connectivity

Lab results arrive in your patient portal, usually within 48 hours. Every detail is handled by people who care about getting it right. Our clinic is fully accessible, with free parking right outside. We measure success by how many patients come back and tell their friends.

Security

We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

<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-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Video consultations let you speak with a doctor from the comfort of home. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. Start in minutes and get help from a real person whenever you need it. Children are welcome, and our paediatric team knows how to make them smile. 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">Lab results arrive in your patient portal, usually within 48 hours. Every detail is handled by people who care about getting it right. 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-1178" class="pb-3">
        <h3 class="h6">Security</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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$16.27 / mo

Reminders
Same-day appointments
Family plans

Team

$46.19 / mo

Same-day appointments
Reminders
Family plans

Business

$57.12 / mo

Certified specialists
Insurance friendly
Same-day appointments

<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
  <a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1180" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="fs-4 fw-bold mb-1">$16.27<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Reminders</li>
        <li>Same-day appointments</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">$46.19<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Same-day appointments</li>
        <li>Reminders</li>
        <li>Family plans</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">$57.12<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Certified specialists</li>
        <li>Insurance friendly</li>
        <li>Same-day appointments</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Five things we learned this year

Modern equipment means faster diagnoses and more comfortable treatment. Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside.

Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you.

Chapter 2: A beginner's guide to getting started

Start in minutes and get help from a real person whenever you need it. Our specialists take time to listen and explain every step of your treatment. Book online in two minutes and see a doctor as soon as today.

Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email. Video consultations let you speak with a doctor from the comfort of home.

Chapter 3: Sleep tips our doctors actually use

Children are welcome, and our paediatric team knows how to make them smile. We listen first, then build a plan around what you actually need. Same-day appointments are available for urgent needs on weekdays. Family plans cover check-ups and vaccinations for everyone under one roof.

Thousands of patients already trust us, and we work hard to keep it that way. 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.

Chapter 4: Simple habits for a healthier back

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. We listen first, then build a plan around what you actually need.

Our clinic is fully accessible, with free parking right outside. Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way. Friendly reminders make sure you never miss a check-up or a dose.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: Five things we learned this year</h3>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside.</p>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. 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-1185" class="pb-3">
    <h3 class="h6">Chapter 2: A beginner&#39;s guide to getting started</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Our specialists take time to listen and explain every step of your treatment. Book online in two minutes and see a doctor as soon as today.</p>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. 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 id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Sleep tips our doctors actually use</h3>
    <p class="small">Children are welcome, and our paediatric team knows how to make them smile. We listen first, then build a plan around what you actually need. Same-day appointments are available for urgent needs on weekdays. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
    <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. 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.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Simple habits for a healthier back</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. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Video consultations let you speak with a doctor from the comfort of home. 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>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

Thousands of patients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. 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.

Notifications

Product news

Weekly digest

Same-day appointments are available for urgent needs on weekdays. Every detail is handled by people who care about getting it right. Modern equipment means faster diagnoses and more comfortable treatment. Your records are private, secure and always available when you need them.

Privacy

Hide my profile from search

Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Owen Harlow">
        </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">Thousands of patients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. 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>
      </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">Same-day appointments are available for urgent needs on weekdays. Every detail is handled by people who care about getting it right. Modern equipment means faster diagnoses and more comfortable treatment. 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">Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Sales

Ruby Hughes
Customer Success
Priya Brennan
Sales Executive
Noah Quinn
HR Partner

Operations

Omar Ibrahim
Content Writer
Nora Morgan
Frontend Engineer
Ruby Tanaka
Project Manager

Engineering

Lea Hughes
Finance Lead
Leo Novak
Operations Manager
Theo Haddad
QA Engineer

<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">Operations</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Ruby Hughes"><div><div class="small fw-semibold">Ruby Hughes</div><div class="small text-body-secondary">Customer Success</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="Priya Brennan"><div><div class="small fw-semibold">Priya Brennan</div><div class="small text-body-secondary">Sales Executive</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Noah Quinn"><div><div class="small fw-semibold">Noah Quinn</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Operations</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Omar Ibrahim"><div><div class="small fw-semibold">Omar Ibrahim</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-8.svg" class="rounded-circle" width="36" height="36" alt="Nora Morgan"><div><div class="small fw-semibold">Nora Morgan</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-1.svg" class="rounded-circle" width="36" height="36" alt="Ruby Tanaka"><div><div class="small fw-semibold">Ruby Tanaka</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Engineering</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="Lea Hughes"><div><div class="small fw-semibold">Lea Hughes</div><div class="small text-body-secondary">Finance Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Leo Novak"><div><div class="small fw-semibold">Leo Novak</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-12.svg" class="rounded-circle" width="36" height="36" alt="Theo Haddad"><div><div class="small fw-semibold">Theo Haddad</div><div class="small text-body-secondary">QA Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Dental

Vaccination$37.00
Annual check-up$164.00
Video consult$39.00

Pediatrics

Video consult$36.00
Child check-up$74.99
Dental cleaning$87.00

Dermatology

Heart screening$203.00
Physio session$82.00
Dental cleaning$91.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Dental</a><a class="nav-link" href="#spy-1203">Pediatrics</a><a class="nav-link" href="#spy-1204">Dermatology</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Dental</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vaccination</span><span class="fw-semibold">$37.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$164.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Video consult</span><span class="fw-semibold">$39.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Video consult</span><span class="fw-semibold">$36.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Child check-up</span><span class="fw-semibold">$74.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Dental cleaning</span><span class="fw-semibold">$87.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>Heart screening</span><span class="fw-semibold">$203.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Physio session</span><span class="fw-semibold">$82.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Dental cleaning</span><span class="fw-semibold">$91.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Book online in two minutes and see a doctor as soon as today. We measure success by how many patients come back and tell their friends. We work with most insurance providers and explain any costs upfront.

This week

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.

Later

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

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. We measure success by how many patients come back and tell their friends. We work with most insurance providers and explain any costs upfront.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</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.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Your records are private, secure and always available when you need them. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Our specialists take time to listen and explain every step of your treatment. Clear prices, honest advice and no surprises along the way. Friendly reminders make sure you never miss a check-up or a dose.

Orbit

Same-day appointments are available for urgent needs on weekdays. Book online in two minutes and see a doctor as soon as today. We listen first, then build a plan around what you actually need. Children are welcome, and our paediatric team knows how to make them smile.

Landing

Video consultations let you speak with a doctor from the comfort of home. Modern equipment means faster diagnoses and more comfortable treatment. Family plans cover check-ups and vaccinations for everyone under one roof.

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Our specialists take time to listen and explain every step of your treatment. 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-1211" class="pb-3">
      <h3 class="h6">Orbit</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. We listen first, then build a plan around what you actually need. Children are welcome, and our paediatric team knows how to make them smile.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Video consultations let you speak with a doctor from the comfort of home. Modern equipment means faster diagnoses and more comfortable treatment. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Sep 6, 2026

NewWe keep things simple, so you can focus on what matters to you.
ImprovedOur team has done this many times, so you never have to guess.
FixedOur clinic is fully accessible, with free parking right outside.

v3.1 Dec 29, 2025

NewWe work with most insurance providers and explain any costs upfront.
ImprovedWe measure success by how many patients come back and tell their friends.
FixedThousands of patients already trust us, and we work hard to keep it that way.

v3.0 Feb 14, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedVideo consultations let you speak with a doctor from the comfort of home.
FixedChildren are welcome, and our paediatric team knows how to make them smile.

v2.9 Jun 22, 2026

NewLab results arrive in your patient portal, usually within 48 hours.
ImprovedClear prices, honest advice and no surprises along the way.
FixedModern equipment means faster diagnoses and more comfortable treatment.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Sep 6, 2026</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>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>Our clinic is fully accessible, with free parking right outside.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Dec 29, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We work with most insurance providers and explain any costs upfront.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We measure success by how many patients come back and tell their friends.</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-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Feb 14, 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>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>Children are welcome, and our paediatric team knows how to make them smile.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jun 22, 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>Clear prices, honest advice and no surprises along the way.</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>
  </div>
</div>