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

Our specialists take time to listen and explain every step of your treatment. Our team has done this many times, so you never have to guess. We work with most insurance providers and explain any costs upfront. 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. We measure success by how many patients come back and tell their friends. Every detail is handled by people who care about getting it right.

Details

Your records are private, secure and always available when you need them. Friendly people answer your questions quickly, by phone, chat or email. Book online in two minutes and see a doctor as soon as today. Friendly reminders make sure you never miss a check-up or a dose.

Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours. Clear prices, honest advice and no surprises along the way.

Pricing

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

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

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Brioo</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">Our specialists take time to listen and explain every step of your treatment. Our team has done this many times, so you never have to guess. We work with most insurance providers and explain any costs upfront. Children are welcome, and our paediatric team knows how to make them smile.</p>
    <p class="small">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. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <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. Book online in two minutes and see a doctor as soon as today. Friendly reminders make sure you never miss a check-up or a dose.</p>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours. 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">Modern equipment means faster diagnoses and more comfortable treatment. 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. Same-day appointments are available for urgent needs on weekdays.</p>
    <p class="small">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. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
</div>

2Horizontal pills

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

Step one

We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.

Step two

We measure success by how many patients come back and tell their friends. Thousands of patients already trust us, and we work hard to keep it that way. Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof.

Step three

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.

Step four

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

<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">We work with most insurance providers and explain any costs upfront. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">We measure success by how many patients come back and tell their friends. Thousands of patients already trust us, and we work hard to keep it that way. Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</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. We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

3Vertical pills

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

General practice

We keep things simple, so you can focus on what matters to you. Our specialists take time to listen and explain every step of your treatment. Your records are private, secure and always available when you need them. Same-day appointments are available for urgent needs on weekdays.

Dental care

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

Physiotherapy

We keep things simple, so you can focus on what matters to you. Same-day appointments are available for urgent needs on weekdays. Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need.

Questions

Start in minutes and get help from a real person whenever you need it. Our clinic is fully accessible, with free parking right outside. 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">Dental care</a><a class="nav-link" href="#spy-1133">Physiotherapy</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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">We keep things simple, so you can focus on what matters to you. Our specialists take time to listen and explain every step of your treatment. Your records are private, secure and always available when you need them. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Dental care</h3>
        <p class="small">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. 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-1133" class="pb-3">
        <h3 class="h6">Physiotherapy</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Same-day appointments are available for urgent needs on weekdays. Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Our clinic is fully accessible, with free parking right outside. 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

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

Install

Friendly reminders make sure you never miss a check-up or a dose. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Modern equipment means faster diagnoses and more comfortable treatment.

Configure

Children are welcome, and our paediatric team knows how to make them smile. Friendly people answer your questions quickly, by phone, chat or email. 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.

Usage

Video consultations let you speak with a doctor from the comfort of home. We keep things simple, so you can focus on what matters to you. Your records are private, secure and always available when you need them.

Examples

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. Children are welcome, and our paediatric team knows how to make them smile. Our team has done this many times, so you never have to guess.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-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">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. We work with most insurance providers and explain any costs upfront.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many patients come back and tell their friends. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. We keep things simple, so you can focus on what matters to you. Your records are private, secure and always available when you need them.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <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. Children are welcome, and our paediatric team knows how to make them smile. Our team has done this many times, so you never have to guess.</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

We work with most insurance providers and explain any costs upfront. Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way.

Midday

Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Our clinic is fully accessible, with free parking right outside.

Afternoon

We measure success by how many patients come back and tell their friends. Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way. Modern equipment means faster diagnoses and more comfortable treatment.

Evening

Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it. Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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">We work with most insurance providers and explain any costs upfront. Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. 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-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way. 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">Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it. Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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. Thousands of patients already trust us, and we work hard to keep it that way. Same-day appointments are available for urgent needs on weekdays.

Beta

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

Gamma

Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Our specialists take time to listen and explain every step of your treatment.

<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 measure success by how many patients come back and tell their friends. We listen first, then build a plan around what you actually need. Thousands of patients already trust us, and we work hard to keep it that way. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Friendly reminders make sure you never miss a check-up or a dose. We keep things simple, so you can focus on what matters to you. We work with most insurance providers and explain any costs upfront.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Friendly people answer your questions quickly, by phone, chat or email. Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today.

Features

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. Family plans cover check-ups and vaccinations for everyone under one roof. Clear prices, honest advice and no surprises along the way.

Reviews

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

FAQ

Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Lab results arrive in your patient portal, usually within 48 hours. Friendly reminders make sure you never miss a check-up or a dose.

<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">Friendly people answer your questions quickly, by phone, chat or email. 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-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">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. 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-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours. 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-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Lab results arrive in your patient portal, usually within 48 hours. Friendly reminders make sure you never miss a check-up or a dose.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Thousands of patients already trust us, and we work hard to keep it that way. Modern equipment means faster diagnoses and more comfortable treatment. Video consultations let you speak with a doctor from the comfort of home. Our clinic is fully accessible, with free parking right outside.

Background

Our specialists take time to listen and explain every step of your treatment. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.

Method

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.

Results

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.

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">Thousands of patients already trust us, and we work hard to keep it that way. Modern equipment means faster diagnoses and more comfortable treatment. 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-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Our specialists take time to listen and explain every step of your treatment. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</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.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">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.</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

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

Set up your profile

Modern equipment means faster diagnoses and more comfortable treatment. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. We work with most insurance providers and explain any costs upfront.

Invite the team

Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way. Book online in two minutes and see a doctor as soon as today.

Go live

Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose.

<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">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. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. We work with most insurance providers and explain any costs upfront.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</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. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof. We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A beginner's guide to getting started

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.

2024

Staying active after an injury

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

2025

Simple habits for a healthier back

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

2026

A parent's guide to childhood vaccinations

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. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.

<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 beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">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-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">Staying active after an injury</h3>
    <p class="small mb-0">Thousands of patients already trust us, and we work hard to keep it that way. Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it.</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">Simple habits for a healthier back</h3>
    <p class="small mb-0">Our clinic is fully accessible, with free parking right outside. 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-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 parent&#39;s guide to childhood vaccinations</h3>
    <p class="small mb-0">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. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Understanding your blood test results?: Our specialists take time to listen and explain every step of your treatment.
Sleep tips our doctors actually use?: Your records are private, secure and always available when you need them.
Five things we learned this year?: Our clinic is fully accessible, with free parking right outside.

Shipping

A simple monthly skin check?: We measure success by how many patients come back and tell their friends.
When to choose a video consultation?: Children are welcome, and our paediatric team knows how to make them smile.
What to expect at your first dental visit?: Friendly reminders make sure you never miss a check-up or a dose.

Returns

The small habits that make a big difference?: We work with most insurance providers and explain any costs upfront.
What our patients asked us most?: We listen first, then build a plan around what you actually need.
Looking back at a busy season?: Friendly people answer your questions quickly, by phone, chat or email.

<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">Understanding your blood test results?</dt>
          <dd class="small text-body-secondary">Our specialists take time to listen and explain every step of your treatment.</dd>
          <dt class="small">Sleep tips our doctors actually use?</dt>
          <dd class="small text-body-secondary">Your records are private, secure and always available when you need them.</dd>
          <dt class="small">Five things we learned this year?</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">A simple monthly skin check?</dt>
          <dd class="small text-body-secondary">We measure success by how many patients come back and tell their friends.</dd>
          <dt class="small">When to choose a video consultation?</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 to expect at your first dental visit?</dt>
          <dd class="small text-body-secondary">Friendly reminders make sure you never miss a check-up or a dose.</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">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">What our patients asked us most?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Family plans cover check-ups and vaccinations for everyone under one roof. Modern equipment means faster diagnoses and more comfortable treatment. 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.

Battery

Book online in two minutes and see a doctor as soon as today. Video consultations let you speak with a doctor from the comfort of home. Same-day appointments are available for urgent needs on weekdays.

Connectivity

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. Our specialists take time to listen and explain every step of your treatment. Family plans cover check-ups and vaccinations for everyone under one roof.

Security

Every detail is handled by people who care about getting it right. Your records are private, secure and always available when you need them. We keep things simple, so you can focus on what matters to you. 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">Family plans cover check-ups and vaccinations for everyone under one roof. Modern equipment means faster diagnoses and more comfortable treatment. 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.</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. Video consultations let you speak with a doctor from the comfort of home. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Our specialists take time to listen and explain every step of your treatment. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Your records are private, secure and always available when you need them. We keep things simple, so you can focus on what matters to you. 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

$18.96 / mo

Reminders
Same-day appointments
Same-day appointments

Team

$47.54 / mo

Insurance friendly
Online results
Family plans

Business

$77.72 / mo

Certified specialists
Family plans
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">$18.96<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Reminders</li>
        <li>Same-day appointments</li>
        <li>Same-day appointments</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">$47.54<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Insurance friendly</li>
        <li>Online results</li>
        <li>Family plans</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="fs-4 fw-bold mb-1">$77.72<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Certified specialists</li>
        <li>Family plans</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: How to choose the right service

Our team has done this many times, so you never have to guess. 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.

We measure success by how many patients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Lab results arrive in your patient portal, usually within 48 hours.

Chapter 2: Our favourite tips for busy weeks

We listen first, then build a plan around what you actually need. We work with most insurance providers and explain any costs upfront. Children are welcome, and our paediatric team knows how to make them smile. Same-day appointments are available for urgent needs on weekdays.

Video consultations let you speak with a doctor from the comfort of home. Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way. Modern equipment means faster diagnoses and more comfortable treatment.

Chapter 3: Inside our new heart screening clinic

Our clinic is fully accessible, with free parking right outside. Modern equipment means faster diagnoses and more comfortable treatment. 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.

We keep things simple, so you can focus on what matters to you. Our clinic is fully accessible, with free parking right outside. Book online in two minutes and see a doctor as soon as today. Video consultations let you speak with a doctor from the comfort of home.

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

Friendly reminders make sure you never miss a check-up or a dose. Clear prices, honest advice and no surprises along the way. Same-day appointments are available for urgent needs on weekdays. Our team has done this many times, so you never have to guess.

Children are welcome, and our paediatric team knows how to make them smile. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. We work with most insurance providers and explain any costs upfront.

<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: How to choose the right service</h3>
    <p class="small">Our team has done this many times, so you never have to guess. 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.</p>
    <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. Lab results arrive in your patient portal, usually within 48 hours.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Our favourite tips for busy weeks</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. Children are welcome, and our paediatric team knows how to make them smile. Same-day appointments are available for urgent needs on weekdays.</p>
    <p class="small">Video consultations let you speak with a doctor from the comfort of home. Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Inside our new heart screening clinic</h3>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Modern equipment means faster diagnoses and more comfortable treatment. 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.</p>
    <p class="small">We keep things simple, so you can focus on what matters to you. Our clinic is fully accessible, with free parking right outside. Book online in two minutes and see a doctor as soon as today. Video consultations let you speak with a doctor from the comfort of home.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: How often should you have a health check-up?</h3>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Clear prices, honest advice and no surprises along the way. Same-day appointments are available for urgent needs on weekdays. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Children are welcome, and our paediatric team knows how to make them smile. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. We work with most insurance providers and explain any costs upfront.</p>
  </div>
</div>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

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

Notifications

Product news

Weekly digest

Friendly people answer your questions quickly, by phone, chat or email. Lab results arrive in your patient portal, usually within 48 hours. 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.

Privacy

Hide my profile from search

Friendly reminders make sure you never miss a check-up or a dose. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email. Book online in two minutes and see a doctor as soon as today.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-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 Ibrahim">
        </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">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. 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">Friendly people answer your questions quickly, by phone, chat or email. Lab results arrive in your patient portal, usually within 48 hours. Your records are private, secure and always available when you need them. We measure success by how many patients come back and tell their friends.</p>
      </div>
      <div id="spy-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">Friendly reminders make sure you never miss a check-up or a dose. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Owen Delgado
QA Engineer
Isla Ibrahim
Customer Success
Omar Alvarez
Content Writer

Operations

Aria Quinn
Finance Lead
Elena Silva
Art Director
Ravi Mensah
HR Partner

Marketing

Arjun Kim
Marketing Lead
Tariq Nguyen
HR Partner
Samir Tanaka
Finance Lead

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Operations</a><a class="nav-link" href="#spy-1200">Marketing</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">Finance</h3>
    <ul class="list-unstyled">
      <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="Owen Delgado"><div><div class="small fw-semibold">Owen Delgado</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-5.svg" class="rounded-circle" width="36" height="36" alt="Isla Ibrahim"><div><div class="small fw-semibold">Isla Ibrahim</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-8.svg" class="rounded-circle" width="36" height="36" alt="Omar Alvarez"><div><div class="small fw-semibold">Omar Alvarez</div><div class="small text-body-secondary">Content Writer</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-1.svg" class="rounded-circle" width="36" height="36" alt="Aria Quinn"><div><div class="small fw-semibold">Aria Quinn</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-4.svg" class="rounded-circle" width="36" height="36" alt="Elena Silva"><div><div class="small fw-semibold">Elena Silva</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-3.svg" class="rounded-circle" width="36" height="36" alt="Ravi Mensah"><div><div class="small fw-semibold">Ravi Mensah</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Arjun Kim"><div><div class="small fw-semibold">Arjun Kim</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Tariq Nguyen"><div><div class="small fw-semibold">Tariq 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-3.svg" class="rounded-circle" width="36" height="36" alt="Samir Tanaka"><div><div class="small fw-semibold">Samir Tanaka</div><div class="small text-body-secondary">Finance Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Dental

Dental cleaning$90.00
Annual check-up$134.00
Braces consultationFree

Cardiology

Braces consultationFree
Dental cleaning$86.00
Physio session$80.00

Orthopedics

Video consult$43.00
Child check-up$69.99
Vaccination$34.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">Cardiology</a><a class="nav-link" href="#spy-1204">Orthopedics</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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>Dental cleaning</span><span class="fw-semibold">$90.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$134.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Braces consultation</span><span class="fw-semibold">Free</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Cardiology</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Braces consultation</span><span class="fw-semibold">Free</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Dental cleaning</span><span class="fw-semibold">$86.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Physio session</span><span class="fw-semibold">$80.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Orthopedics</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Video consult</span><span class="fw-semibold">$43.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Child check-up</span><span class="fw-semibold">$69.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vaccination</span><span class="fw-semibold">$34.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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

This week

Modern equipment means faster diagnoses and more comfortable treatment. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.

Later

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

<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">Lab results arrive in your patient portal, usually within 48 hours. 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.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</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. 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>
  </div>
</div>

19Dark theme

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

Launch

Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home. Your records are private, secure and always available when you need them.

Orbit

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

Landing

Friendly reminders make sure you never miss a check-up or a dose. We measure success by how many patients come back and tell their friends. Your records are private, secure and always available when you need them. Start in minutes and get help from a real person whenever you need it.

<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">Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home. Your records are private, secure and always available when you need them.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">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. We work with most insurance providers and explain any costs upfront.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Friendly reminders make sure you never miss a check-up or a dose. We measure success by how many patients come back and tell their friends. Your records are private, secure and always available when you need them. Start in minutes and get help from a real person whenever you need it.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Apr 4, 2026

NewFamily plans cover check-ups and vaccinations for everyone under one roof.
ImprovedOur specialists take time to listen and explain every step of your treatment.
FixedThousands of patients already trust us, and we work hard to keep it that way.

v3.1 Feb 24, 2026

NewChildren are welcome, and our paediatric team knows how to make them smile.
ImprovedLab results arrive in your patient portal, usually within 48 hours.
FixedOur team has done this many times, so you never have to guess.

v3.0 Feb 13, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
FixedWe listen first, then build a plan around what you actually need.

v2.9 Aug 27, 2026

NewOur clinic is fully accessible, with free parking right outside.
ImprovedVideo consultations let you speak with a doctor from the comfort of home.
FixedClear prices, honest advice and no surprises along the way.

<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">Apr 4, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Family plans cover check-ups and vaccinations for everyone under one roof.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our specialists take time to listen and explain every step of your treatment.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of patients already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Feb 24, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Children are welcome, and our paediatric team knows how to make them smile.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Lab results arrive in your patient portal, usually within 48 hours.</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 id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Feb 13, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Aug 27, 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>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>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
    </div>
  </div>
</div>