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

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. Our specialists take time to listen and explain every step of your treatment. We keep things simple, so you can focus on what matters to you.

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

Details

Same-day appointments are available for urgent needs on weekdays. Clear prices, honest advice and no surprises along the way. We work with most insurance providers and explain any costs upfront. Friendly people answer your questions quickly, by phone, chat or email.

Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof.

Pricing

Our team has done this many times, so you never have to guess. 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. 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. Your records are private, secure and always available when you need them. Book online in two minutes and see a doctor as soon as today. Family plans cover check-ups and vaccinations for everyone under one roof.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Bloom</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">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. Our specialists take time to listen and explain every step of your treatment. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. 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.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Same-day appointments are available for urgent needs on weekdays. Clear prices, honest advice and no surprises along the way. We work with most insurance providers and explain any costs upfront. Friendly people answer your questions quickly, by phone, chat or email.</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. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Our team has done this many times, so you never have to guess. 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. Book online in two minutes and see a doctor as soon as today.</p>
    <p class="small">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. Book online in two minutes and see a doctor as soon as today. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Our clinic is fully accessible, with free parking right outside. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.

Step two

Every detail is handled by people who care about getting it right. Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it.

Step three

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. Video consultations let you speak with a doctor from the comfort of home.

Step four

Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email. We work with most insurance providers and explain any costs upfront. Children are welcome, and our paediatric team knows how to make them smile.

<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">Our clinic is fully accessible, with free parking right outside. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Every detail is handled by people who care about getting it right. 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-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">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. Video consultations let you speak with a doctor from the comfort of home.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Our specialists take time to listen and explain every step of your treatment. Friendly people answer your questions quickly, by phone, chat or email. 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>
  </div>
</div>

3Vertical pills

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

Lab tests

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. Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours.

Telehealth

Our team has done this many times, so you never have to guess. We measure success by how many patients come back and tell their friends. Same-day appointments are available for urgent needs on weekdays.

Dental care

We work with most insurance providers and explain any costs upfront. We measure success by how many patients come back and tell their friends. Family plans cover check-ups and vaccinations for everyone under one roof.

Questions

Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it.

<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">Lab tests</a><a class="nav-link" href="#spy-1132">Telehealth</a><a class="nav-link" href="#spy-1133">Dental care</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">Lab tests</h3>
        <p class="small">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. Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Telehealth</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We measure success by how many patients come back and tell their friends. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Dental care</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. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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. Our clinic is fully accessible, with free parking right outside. Children are welcome, and our paediatric team knows how to make them smile.

Install

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

Configure

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Video consultations let you speak with a doctor from the comfort of home.

Usage

Book online in two minutes and see a doctor as soon as today. Our team has done this many times, so you never have to guess. Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way.

Examples

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

<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">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. Our clinic is fully accessible, with free parking right outside. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Your records are private, secure and always available when you need them.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Video consultations let you speak with a doctor from the comfort of home.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. Our team has done this many times, so you never have to guess. Friendly reminders make sure you never miss a check-up or a dose. Thousands of patients already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email. Thousands of patients already trust us, and we work hard to keep it that way. We work with most insurance providers and explain any costs upfront.</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

Friendly reminders make sure you never miss a check-up or a dose. Our clinic is fully accessible, with free parking right outside. Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home.

Midday

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

Afternoon

Your records are private, secure and always available when you need them. Book online in two minutes and see a doctor as soon as today. Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you.

Evening

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. Start in minutes and get help from a real person whenever you need it.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-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">Friendly reminders make sure you never miss a check-up or a dose. Our clinic is fully accessible, with free parking right outside. Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</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. 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-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Your records are private, secure and always available when you need them. Book online in two minutes and see a doctor as soon as today. Lab results arrive in your patient portal, usually within 48 hours. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Children are welcome, and our paediatric team knows how to make them smile. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside.

Beta

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

Gamma

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

<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">Children are welcome, and our paediatric team knows how to make them smile. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">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. Friendly reminders make sure you never miss a check-up or a dose. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</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. 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.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Video consultations let you speak with a doctor from the comfort of home. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email.

Features

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

Reviews

We work with most insurance providers and explain any costs upfront. 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. Your records are private, secure and always available when you need them.

FAQ

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

<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">Video consultations let you speak with a doctor from the comfort of home. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. 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">We work with most insurance providers and explain any costs upfront. 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. Your records are private, secure and always available when you need them.</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. 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.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

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. Start in minutes and get help from a real person whenever you need it.

Method

Our clinic is fully accessible, with free parking right outside. Same-day appointments are available for urgent needs on weekdays. 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.

Results

Lab results arrive in your patient portal, usually within 48 hours. Modern equipment means faster diagnoses and more comfortable treatment. 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.

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">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 measure success by how many patients come back and tell their friends.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">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. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Our clinic is fully accessible, with free parking right outside. Same-day appointments are available for urgent needs on weekdays. 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.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Lab results arrive in your patient portal, usually within 48 hours. Modern equipment means faster diagnoses and more comfortable treatment. We listen first, then build a plan around what you actually need. Thousands of patients already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </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

We work with most insurance providers and explain any costs upfront. Clear prices, honest advice and no surprises along the way. Our specialists take time to listen and explain every step of your treatment.

Set up your profile

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

Invite the team

Thousands of patients already trust us, and we work hard to keep it that way. Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home.

Go live

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. Book online in two minutes and see a doctor as soon as today.

<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">We work with most insurance providers and explain any costs upfront. 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-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Book online in two minutes and see a doctor as soon as today. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">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. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our favourite tips for busy weeks

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

2024

When to choose a video consultation

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

2025

Looking back at a busy season

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. Family plans cover check-ups and vaccinations for everyone under one roof. Start in minutes and get help from a real person whenever you need it.

2026

Simple habits for a healthier back

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. Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside.

<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">Our favourite tips for busy weeks</h3>
    <p class="small mb-0">We work with most insurance providers and explain any costs upfront. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div 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">Same-day appointments are available for urgent needs on weekdays. 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.</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">Looking back at a busy season</h3>
    <p class="small mb-0">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. Family plans cover check-ups and vaccinations for everyone under one roof. Start in minutes and get help from a real person whenever you need it.</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">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. Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

The small habits that make a big difference?: Children are welcome, and our paediatric team knows how to make them smile.
Inside our new heart screening clinic?: Family plans cover check-ups and vaccinations for everyone under one roof.
How to choose the right service?: Clear prices, honest advice and no surprises along the way.

Shipping

Five things we learned this year?: We measure success by how many patients come back and tell their friends.
A simple monthly skin check?: We listen first, then build a plan around what you actually need.
What our patients asked us most?: Video consultations let you speak with a doctor from the comfort of home.

Returns

What to expect at your first dental visit?: Friendly people answer your questions quickly, by phone, chat or email.
A parent's guide to childhood vaccinations?: Your records are private, secure and always available when you need them.
A beginner's guide to getting started?: Lab results arrive in your patient portal, usually within 48 hours.

<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-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Children are welcome, and our paediatric team knows how to make them smile.</dd>
          <dt class="small">Inside our new heart screening clinic?</dt>
          <dd class="small text-body-secondary">Family plans cover check-ups and vaccinations for everyone under one roof.</dd>
          <dt class="small">How to choose the right service?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">We measure success by how many patients come back and tell their friends.</dd>
          <dt class="small">A simple monthly skin check?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">What our patients asked us most?</dt>
          <dd class="small text-body-secondary">Video consultations let you speak with a doctor from the comfort of home.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <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">A parent&#39;s guide to childhood vaccinations?</dt>
          <dd class="small text-body-secondary">Your records are private, secure and always available when you need them.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Lab results arrive in your patient portal, usually within 48 hours.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Thousands of patients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Our specialists take time to listen and explain every step of your treatment. We keep things simple, so you can focus on what matters to you.

Battery

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

Connectivity

Every detail is handled by people who care about getting it right. Same-day appointments are available for urgent needs on weekdays. Friendly reminders make sure you never miss a check-up or a dose.

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Our specialists take time to listen and explain every step of your treatment. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</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. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Same-day appointments are available for urgent needs on weekdays. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</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. 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.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$15.95 / mo

Insurance friendly
Same-day appointments
Reminders

Team

$49.61 / mo

Certified specialists
Insurance friendly
Family plans

Business

$53.91 / mo

Family plans
Reminders
Certified specialists

<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">$15.95<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Insurance friendly</li>
        <li>Same-day appointments</li>
        <li>Reminders</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">$49.61<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Certified specialists</li>
        <li>Insurance friendly</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">$53.91<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Family plans</li>
        <li>Reminders</li>
        <li>Certified specialists</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Sleep tips our doctors actually use

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

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

Chapter 2: Staying active after an injury

Friendly people answer your questions quickly, by phone, chat or email. Thousands of patients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.

Our clinic is fully accessible, with free parking right outside. We keep things simple, so you can focus on what matters to you. We work with most insurance providers and explain any costs upfront.

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

Modern equipment means faster diagnoses and more comfortable treatment. Start in minutes and get help from a real person whenever you need it. Lab results arrive in your patient portal, usually within 48 hours.

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. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.

Chapter 4: Understanding your blood test results

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

Friendly reminders make sure you never miss a check-up or a dose. Family plans cover check-ups and vaccinations for everyone under one roof. 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.

<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: Sleep tips our doctors actually use</h3>
    <p class="small">Your records are private, secure and always available when you need them. Same-day appointments are available for urgent needs on weekdays. 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>
    <p class="small">Clear prices, honest advice and no surprises along the way. Book online in two minutes and see a doctor as soon as today. Friendly reminders make sure you never miss a check-up or a dose.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Staying active after an injury</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Thousands of patients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Our clinic is fully accessible, with free parking right outside. 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-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How often should you have a health check-up?</h3>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Start in minutes and get help from a real person whenever you need it. Lab results arrive in your patient portal, usually within 48 hours.</p>
    <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. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Understanding your blood test results</h3>
    <p class="small">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. Our specialists take time to listen and explain every step of your treatment.</p>
    <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. We work with most insurance providers and explain any costs upfront. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
</div>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

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

Notifications

Product news

Weekly digest

Same-day appointments are available for urgent needs on weekdays. Video consultations let you speak with a doctor from the comfort of home. Our clinic is fully accessible, with free parking right outside. Friendly people answer your questions quickly, by phone, chat or email.

Privacy

Hide my profile from search

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

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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="Omar 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="Edinburgh">
        </div>
        <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. Children are welcome, and our paediatric team knows how to make them smile.</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. Video consultations let you speak with a doctor from the comfort of home. Our clinic is fully accessible, with free parking right outside. Friendly people answer your questions quickly, by phone, chat or email.</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">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. We measure success by how many patients come back and tell their friends.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Operations

Elena Tanaka
Support Specialist
Jonah Kim
Operations Manager
Omar Patel
HR Partner

Legal

Noah Sato
Content Writer
Maya Hughes
Product Designer
Arjun Kowalski
Finance Lead

Human Resources

Mason Ortega
Finance Lead
Ravi Carter
Content Writer
Diego Lindqvist
Support Specialist

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Operations</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Human Resources</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-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">Operations</h3>
    <ul class="list-unstyled">
      <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="Elena Tanaka"><div><div class="small fw-semibold">Elena Tanaka</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Jonah Kim"><div><div class="small fw-semibold">Jonah Kim</div><div class="small text-body-secondary">Operations Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Omar Patel"><div><div class="small fw-semibold">Omar Patel</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Noah Sato"><div><div class="small fw-semibold">Noah Sato</div><div class="small text-body-secondary">Content Writer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Maya Hughes"><div><div class="small fw-semibold">Maya Hughes</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Arjun Kowalski"><div><div class="small fw-semibold">Arjun Kowalski</div><div class="small text-body-secondary">Finance Lead</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Mason Ortega"><div><div class="small fw-semibold">Mason Ortega</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-1.svg" class="rounded-circle" width="36" height="36" alt="Ravi Carter"><div><div class="small fw-semibold">Ravi Carter</div><div class="small text-body-secondary">Content Writer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Diego Lindqvist"><div><div class="small fw-semibold">Diego Lindqvist</div><div class="small text-body-secondary">Support Specialist</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Cardiology

Physio session$70.00
Skin check$91.00
Teeth whitening$260.99

Pediatrics

Blood test$48.99
Child check-up$68.00
Braces consultationFree

Dental

Sports injury clinic$99.00
Annual check-up$142.00
Braces consultationFree

<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">Pediatrics</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">$70.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Skin check</span><span class="fw-semibold">$91.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Teeth whitening</span><span class="fw-semibold">$260.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Pediatrics</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Blood test</span><span class="fw-semibold">$48.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Child check-up</span><span class="fw-semibold">$68.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-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>Sports injury clinic</span><span class="fw-semibold">$99.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$142.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>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Book online in two minutes and see a doctor as soon as today. Lab results arrive in your patient portal, usually within 48 hours. Clear prices, honest advice and no surprises along the way.

This week

We listen first, then build a plan around what you actually need. Family plans cover check-ups and vaccinations for everyone under one roof. We measure success by how many patients come back and tell their friends. Your records are private, secure and always available when you need them.

Later

Video consultations let you speak with a doctor from the comfort of home. Same-day appointments are available for urgent needs on weekdays. Book online in two minutes and see a doctor as soon as today. Our specialists take time to listen and explain every step of your treatment.

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. 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-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Family plans cover check-ups and vaccinations for everyone under one roof. We measure success by how many patients come back and tell their friends. Your records are private, secure and always available when you need them.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Same-day appointments are available for urgent needs on weekdays. Book online in two minutes and see a doctor as soon as today. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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

Orbit

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

Landing

Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email. Thousands of patients already trust us, and we work hard to keep it that way. Our clinic is fully accessible, with free parking right outside.

<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">We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Friendly reminders make sure you never miss a check-up or a dose.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">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. Lab results arrive in your patient portal, usually within 48 hours.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Friendly people answer your questions quickly, by phone, chat or email. Thousands of patients already trust us, and we work hard to keep it that way. Our clinic is fully accessible, with free parking right outside.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Jan 4, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedBook online in two minutes and see a doctor as soon as today.
FixedYour records are private, secure and always available when you need them.

v3.1 Aug 10, 2026

NewWe keep things simple, so you can focus on what matters to you.
ImprovedOur clinic is fully accessible, with free parking right outside.
FixedEvery detail is handled by people who care about getting it right.

v3.0 Apr 27, 2026

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

v2.9 Nov 27, 2025

NewChildren are welcome, and our paediatric team knows how to make them smile.
ImprovedWe listen first, then build a plan around what you actually need.
FixedFamily plans cover check-ups and vaccinations for everyone under one roof.

<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">Jan 4, 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>Book online in two minutes and see a doctor as soon as today.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Your records are private, secure and always available when you need them.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Aug 10, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our clinic is fully accessible, with free parking right outside.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every detail is handled by people who care about getting it right.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Apr 27, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Modern equipment means faster diagnoses and more comfortable treatment.</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 id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Nov 27, 2025</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>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>Family plans cover check-ups and vaccinations for everyone under one roof.</li>
        </ul>
      </div>
    </div>
  </div>
</div>