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

Lab results arrive in your patient portal, usually within 48 hours. We listen first, then build a plan around what you actually need. 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. Book online in two minutes and see a doctor as soon as today. 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.

Details

Our clinic is fully accessible, with free parking right outside. Friendly people answer your questions quickly, by phone, chat or email. We work with most insurance providers and explain any costs upfront.

Modern equipment means faster diagnoses and more comfortable treatment. 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. Clear prices, honest advice and no surprises along the way.

Pricing

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

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

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Junoly</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">Lab results arrive in your patient portal, usually within 48 hours. We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose.</p>
    <p class="small">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. 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 id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Friendly people answer your questions quickly, by phone, chat or email. We work with most insurance providers and explain any costs upfront.</p>
    <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. Family plans cover check-ups and vaccinations for everyone under one roof. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Your records are private, secure and always available when you need them. 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. Our team has done this many times, so you never have to guess.</p>
    <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. Children are welcome, and our paediatric team knows how to make them smile.</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. 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.

Step two

Children are welcome, and our paediatric team knows how to make them smile. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. Same-day appointments are available for urgent needs on weekdays.

Step three

Lab results arrive in your patient portal, usually within 48 hours. We work with most insurance providers and explain any costs upfront. We listen first, then build a plan around what you actually need. We measure success by how many patients come back and tell their friends.

Step four

Every detail is handled by people who care about getting it right. 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. Friendly reminders make sure you never miss a check-up or a dose.

<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">Video consultations let you speak with a doctor from the comfort of home. 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-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. Same-day appointments are available for urgent needs on weekdays.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Lab results arrive in your patient portal, usually within 48 hours. We work with most insurance providers and explain any costs upfront. We listen first, then build a plan around what you actually need. We measure success by how many patients come back and tell their friends.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Every detail is handled by people who care about getting it right. 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. Friendly reminders make sure you never miss a check-up or a dose.</p>
  </div>
</div>

3Vertical pills

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

Dental care

Our specialists take time to listen and explain every step of your treatment. Clear prices, honest advice and no surprises along the way. Your records are private, secure and always available when you need them. Our clinic is fully accessible, with free parking right outside.

Physiotherapy

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.

Lab tests

Modern equipment means faster diagnoses and more comfortable treatment. 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.

Questions

Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Dental care</a><a class="nav-link" href="#spy-1132">Physiotherapy</a><a class="nav-link" href="#spy-1133">Lab tests</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">Dental care</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. Your records are private, secure and always available when you need them. Our clinic is fully accessible, with free parking right outside.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Physiotherapy</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Lab tests</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 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">Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Our clinic is fully accessible, with free parking right outside.

Install

Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it. We work with most insurance providers and explain any costs upfront. Every detail is handled by people who care about getting it right.

Configure

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

Usage

Same-day appointments are available for urgent needs on weekdays. Our specialists take time to listen and explain every step of your treatment. Children are welcome, and our paediatric team knows how to make them smile. Lab results arrive in your patient portal, usually within 48 hours.

Examples

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

<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 keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Our clinic is fully accessible, with free parking right outside.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it. We work with most insurance providers and explain any costs upfront. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</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. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Same-day appointments are available for urgent needs on weekdays. Our specialists take time to listen and explain every step of your treatment. 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-1140" class="pb-3">
        <h3 class="h6">Examples</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. Children are welcome, and our paediatric team knows how to make them smile.</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

Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof. Your records are private, secure and always available when you need them. Friendly reminders make sure you never miss a check-up or a dose.

Midday

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

Afternoon

We listen first, then build a plan around what you actually need. Video consultations let you speak with a doctor from the comfort of home. Book online in two minutes and see a doctor as soon as today. Thousands of patients already trust us, and we work hard to keep it that way.

Evening

We work with most insurance providers and explain any costs upfront. Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email.

<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">Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof. Your records are private, secure and always available when you need them. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. 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.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Video consultations let you speak with a doctor from the comfort of home. Book online in two minutes and see a doctor as soon as today. Thousands of patients already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">We work with most insurance providers and explain any costs upfront. Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

We keep things simple, so you can focus on what matters to you. Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess.

Beta

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

Gamma

We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you.

<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">We keep things simple, so you can focus on what matters to you. Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Your records are private, secure and always available when you need them. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose. 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>
  </div>
</div>

7Underline tabs

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

Overview

We measure success by how many patients come back and tell their friends. Same-day appointments are available for urgent needs on weekdays. Our clinic is fully accessible, with free parking right outside.

Features

Family plans cover check-ups and vaccinations for everyone under one roof. Book online in two minutes and see a doctor as soon as today. Children are welcome, and our paediatric team knows how to make them smile. Every detail is handled by people who care about getting it right.

Reviews

Start in minutes and get help from a real person whenever you need it. Modern equipment means faster diagnoses and more comfortable treatment. Video consultations let you speak with a doctor from the comfort of home. Friendly people answer your questions quickly, by phone, chat or email.

FAQ

Thousands of patients already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. 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">We measure success by how many patients come back and tell their friends. Same-day appointments are available for urgent needs on weekdays. Our clinic is fully accessible, with free parking right outside.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Book online in two minutes and see a doctor as soon as today. Children are welcome, and our paediatric team knows how to make them smile. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</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. Video consultations let you speak with a doctor from the comfort of home. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Same-day appointments are available for urgent needs on weekdays.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Friendly reminders make sure you never miss a check-up or a dose. Children are welcome, and our paediatric team knows how to make them smile. 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.

Background

Book online in two minutes and see a doctor as soon as today. We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess.

Method

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

Results

Family plans cover check-ups and vaccinations for everyone under one roof. Lab results arrive in your patient portal, usually within 48 hours. 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">Friendly reminders make sure you never miss a check-up or a dose. Children are welcome, and our paediatric team knows how to make them smile. 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 id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess.</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. Thousands of patients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. 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>
  </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

Friendly people answer your questions quickly, by phone, chat or email. Our clinic is fully accessible, with free parking right outside. 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.

Set up your profile

We listen first, then build a plan around what you actually need. Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today.

Invite the team

Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.

Go live

We measure success by how many patients come back and tell their friends. Our clinic is fully accessible, with free parking right outside. We listen first, then build a plan around what you actually need. Same-day appointments are available for urgent needs on weekdays.

<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">Friendly people answer your questions quickly, by phone, chat or email. Our clinic is fully accessible, with free parking right outside. 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-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</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 team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Our clinic is fully accessible, with free parking right outside. We listen first, then build a plan around what you actually need. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A parent's guide to childhood vaccinations

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

2024

When to choose a video consultation

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

2025

What our patients asked us most

Your records are private, secure and always available when you need them. Every detail is handled by people who care about getting it right. Family plans cover check-ups and vaccinations for everyone under one roof.

2026

Simple habits for a healthier back

Friendly reminders make sure you never miss a check-up or a dose. 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. We work with most insurance providers and explain any costs upfront.

<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">A parent&#39;s guide to childhood vaccinations</h3>
    <p class="small mb-0">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. Our specialists take time to listen and explain every step of your treatment.</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">When to choose a video consultation</h3>
    <p class="small mb-0">Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home. Children are welcome, and our paediatric team knows how to make them smile.</p>
  </div>
  <div id="spy-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 our patients asked us most</h3>
    <p class="small mb-0">Your records are private, secure and always available when you need them. Every detail is handled by people who care about getting it right. Family plans cover check-ups and vaccinations for everyone under one roof.</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">Simple habits for a healthier back</h3>
    <p class="small mb-0">Friendly reminders make sure you never miss a check-up or a dose. 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. We work with most insurance providers and explain any costs upfront.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Looking back at a busy season?: Friendly reminders make sure you never miss a check-up or a dose.
Staying active after an injury?: Clear prices, honest advice and no surprises along the way.
Inside our new heart screening clinic?: Our team has done this many times, so you never have to guess.

Shipping

Understanding your blood test results?: Same-day appointments are available for urgent needs on weekdays.
What to expect at your first dental visit?: Friendly people answer your questions quickly, by phone, chat or email.
Our favourite tips for busy weeks?: Modern equipment means faster diagnoses and more comfortable treatment.

Returns

How to choose the right service?: Family plans cover check-ups and vaccinations for everyone under one roof.
A simple monthly skin check?: Lab results arrive in your patient portal, usually within 48 hours.
Sleep tips our doctors actually use?: Book online in two minutes and see a doctor as soon as today.

<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">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Friendly reminders make sure you never miss a check-up or a dose.</dd>
          <dt class="small">Staying active after an injury?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">Inside our new heart screening clinic?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</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">Understanding your blood test results?</dt>
          <dd class="small text-body-secondary">Same-day appointments are available for urgent needs on weekdays.</dd>
          <dt class="small">What to expect at your first dental visit?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Modern equipment means faster diagnoses and more comfortable treatment.</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">How to choose the right service?</dt>
          <dd class="small text-body-secondary">Family plans cover check-ups and vaccinations for everyone under one roof.</dd>
          <dt class="small">A simple monthly skin check?</dt>
          <dd class="small text-body-secondary">Lab results arrive in your patient portal, usually within 48 hours.</dd>
          <dt class="small">Sleep tips our doctors actually use?</dt>
          <dd class="small text-body-secondary">Book online in two minutes and see a doctor as soon as today.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Video consultations let you speak with a doctor from the comfort of home. Our clinic is fully accessible, with free parking right outside. 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.

Battery

We listen first, then build a plan around what you actually need. Your records are private, secure and always available when you need them. Children are welcome, and our paediatric team knows how to make them smile. We keep things simple, so you can focus on what matters to you.

Connectivity

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. Thousands of patients already trust us, and we work hard to keep it that way. Our specialists take time to listen and explain every step of your treatment.

Security

Children are welcome, and our paediatric team knows how to make them smile. Our clinic is fully accessible, with free parking right outside. Every detail is handled by people who care about getting it right. 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">Video consultations let you speak with a doctor from the comfort of home. Our clinic is fully accessible, with free parking right outside. 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-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Your records are private, secure and always available when you need them. Children are welcome, and our paediatric team knows how to make them smile. 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">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. Thousands of patients already trust us, and we work hard to keep it that way. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Our clinic is fully accessible, with free parking right outside. Every detail is handled by people who care about getting it right. 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

$10.01 / mo

Online results
Same-day appointments
Insurance friendly

Team

$40.11 / mo

Insurance friendly
Reminders
Reminders

Business

$62.46 / mo

Online results
Online results
Online results

<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">$10.01<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>Insurance friendly</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">$40.11<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Insurance friendly</li>
        <li>Reminders</li>
        <li>Reminders</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">$62.46<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Online results</li>
        <li>Online results</li>
        <li>Online results</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

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. We work with most insurance providers and explain any costs upfront. 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. Thousands of patients already trust us, and we work hard to keep it that way. Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today.

Chapter 2: A beginner's guide to getting started

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

Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 3: How often should you have a health check-up?

Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you. Our clinic is fully accessible, with free parking right outside. Start in minutes and get help from a real person whenever you need it.

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

Chapter 4: The small habits that make a big difference

Lab results arrive in your patient portal, usually within 48 hours. We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess.

Your records are private, secure and always available when you need them. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. We keep things simple, so you can focus on what matters to you.

<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">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. We work with most insurance providers and explain any costs upfront. We measure success by how many patients come back and tell their friends.</p>
    <p class="small">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. Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today.</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">Same-day appointments are available for urgent needs on weekdays. 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.</p>
    <p class="small">Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it. 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-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How often should you have a health check-up?</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. Our clinic is fully accessible, with free parking right outside. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Friendly reminders make sure you never miss a check-up or a dose. Clear prices, honest advice and no surprises along the way. Our specialists take time to listen and explain every step of your treatment.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: The small habits that make a big difference</h3>
    <p class="small">Lab results arrive in your patient portal, usually within 48 hours. We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Your records are private, secure and always available when you need them. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. We keep things simple, so you can focus on what matters to you.</p>
  </div>
</div>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Video consultations let you speak with a doctor from the comfort of home. Thousands of patients already trust us, and we work hard to keep it that way.

Notifications

Product news

Weekly digest

Same-day appointments are available for urgent needs on weekdays. 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. Children are welcome, and our paediatric team knows how to make them smile.

Privacy

Hide my profile from search

<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="Nadia Varga">
        </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="Cape Town">
        </div>
        <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. Video consultations let you speak with a doctor from the comfort of home. Thousands of patients already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1190" class="pb-3">
        <h3 class="h6">Notifications</h3>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
          <label class="form-check-label small" for="spy-sw-1194">Product news</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
          <label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
        </div>
        <p class="small">Same-day appointments are available for urgent needs on weekdays. 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. Children are welcome, and our paediatric team knows how to make them smile.</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">Same-day appointments are available for urgent needs on weekdays. 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. Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Sales

Mason Mensah
QA Engineer
Leo Harlow
Art Director
Finn Ashford
HR Partner

Customer Support

Mateo Fischer
QA Engineer
Hana Nguyen
HR Partner
Amara Tanaka
Art Director

Finance

Isla Sato
HR Partner
Ella Kowalski
Project Manager
Mia Brennan
Finance Lead

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Customer Support</a><a class="nav-link" href="#spy-1200">Finance</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="Mason Mensah"><div><div class="small fw-semibold">Mason Mensah</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Leo Harlow"><div><div class="small fw-semibold">Leo Harlow</div><div class="small text-body-secondary">Art Director</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Finn Ashford"><div><div class="small fw-semibold">Finn Ashford</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Customer Support</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Mateo Fischer"><div><div class="small fw-semibold">Mateo Fischer</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Hana Nguyen"><div><div class="small fw-semibold">Hana Nguyen</div><div class="small text-body-secondary">HR Partner</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Amara Tanaka"><div><div class="small fw-semibold">Amara Tanaka</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Finance</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="Isla Sato"><div><div class="small fw-semibold">Isla Sato</div><div class="small text-body-secondary">HR Partner</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Ella Kowalski"><div><div class="small fw-semibold">Ella Kowalski</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Mia Brennan"><div><div class="small fw-semibold">Mia Brennan</div><div class="small text-body-secondary">Finance Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Cardiology

Physio session$69.00
Blood test$48.00
Sports injury clinic$100.00

Orthopedics

Physio session$67.99
Child check-up$71.99
Video consult$39.00

Dental

Annual check-up$153.00
Teeth whitening$223.99
Vaccination$35.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Cardiology</a><a class="nav-link" href="#spy-1203">Orthopedics</a><a class="nav-link" href="#spy-1204">Dental</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">Cardiology</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Physio session</span><span class="fw-semibold">$69.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Blood test</span><span class="fw-semibold">$48.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Sports injury clinic</span><span class="fw-semibold">$100.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Physio session</span><span class="fw-semibold">$67.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Child check-up</span><span class="fw-semibold">$71.99</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-1204" 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>Annual check-up</span><span class="fw-semibold">$153.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Teeth whitening</span><span class="fw-semibold">$223.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vaccination</span><span class="fw-semibold">$35.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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 keep things simple, so you can focus on what matters to you. Video consultations let you speak with a doctor from the comfort of home.

This week

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

Later

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. 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-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">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 keep things simple, so you can focus on what matters to you. Video consultations let you speak with a doctor from the comfort of home.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Family plans cover check-ups and vaccinations for everyone under one roof. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">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. 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-ui-theme="dark"</code>.

Launch

Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Book online in two minutes and see a doctor as soon as today. Our clinic is fully accessible, with free parking right outside.

Orbit

Friendly people answer your questions quickly, by phone, chat or email. We work with most insurance providers and explain any costs upfront. 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.

Landing

Start in minutes and get help from a real person whenever you need it. Same-day appointments are available for urgent needs on weekdays. We keep things simple, so you can focus on what matters to you.

<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">Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. 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-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We work with most insurance providers and explain any costs upfront. 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-1212" class="pb-3">
      <h3 class="h6">Landing</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. We keep things simple, so you can focus on what matters to you.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Oct 10, 2025

NewBook online in two minutes and see a doctor as soon as today.
ImprovedWe listen first, then build a plan around what you actually need.
FixedVideo consultations let you speak with a doctor from the comfort of home.

v3.1 Jun 7, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedWe work with most insurance providers and explain any costs upfront.
FixedLab results arrive in your patient portal, usually within 48 hours.

v3.0 Jul 8, 2026

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

v2.9 Mar 7, 2026

NewOur clinic is fully accessible, with free parking right outside.
ImprovedOur specialists take time to listen and explain every step of your treatment.
FixedOur team has done this many times, so you never have to guess.

<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">Oct 10, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Book online in two minutes and see a doctor as soon as today.</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>Video consultations let you speak with a doctor from the comfort of home.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jun 7, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We work with most insurance providers and explain any costs upfront.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Lab results arrive in your patient portal, usually within 48 hours.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jul 8, 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>Children are welcome, and our paediatric team knows how to make them smile.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Modern equipment means faster diagnoses and more comfortable treatment.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Mar 7, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our clinic is fully accessible, with free parking right outside.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our 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>Our team has done this many times, so you never have to guess.</li>
        </ul>
      </div>
    </div>
  </div>
</div>