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

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. We measure success by how many patients come back and tell their friends. Video consultations let you speak with a doctor from the comfort of home.

Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Lab results arrive in your patient portal, usually within 48 hours. Friendly people answer your questions quickly, by phone, chat or email.

Details

Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Our specialists take time to listen and explain every step of your treatment.

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

Pricing

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

We keep things simple, so you can focus on what matters to you. Our clinic is fully accessible, with free parking right outside. Children are welcome, and our paediatric team knows how to make them smile. Modern equipment means faster diagnoses and more comfortable treatment.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Umbra</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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Intro</h3>
    <p class="small">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. We measure success by how many patients come back and tell their friends. Video consultations let you speak with a doctor from the comfort of home.</p>
    <p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Lab results arrive in your patient portal, usually within 48 hours. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1123" class="pb-4">
    <h3 class="h6">Details</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Our specialists take time to listen and explain every step of your treatment.</p>
    <p class="small">We listen first, then build a plan around what you actually need. 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>
  </div>
  <div id="spy-1124" class="pb-4">
    <h3 class="h6">Pricing</h3>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Family plans cover check-ups and vaccinations for everyone under one roof. Same-day appointments are available for urgent needs on weekdays.</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. Children are welcome, and our paediatric team knows how to make them smile. 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

Book online in two minutes and see a doctor as soon as today. We work with most insurance providers and explain any costs upfront. Start in minutes and get help from a real person whenever you need it. Family plans cover check-ups and vaccinations for everyone under one roof.

Step two

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. Friendly reminders make sure you never miss a check-up or a dose. Our clinic is fully accessible, with free parking right outside.

Step three

Clear prices, honest advice and no surprises along the way. Video consultations let you speak with a doctor from the comfort of home. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.

Step four

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

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Step one</h3>
    <p class="small">Book online in two minutes and see a doctor as soon as today. We work with most insurance providers and explain any costs upfront. 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>
  </div>
  <div id="spy-1127" class="pb-4">
    <h3 class="h6">Step two</h3>
    <p class="small">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. Friendly reminders make sure you never miss a check-up or a dose. Our clinic is fully accessible, with free parking right outside.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Video consultations let you speak with a doctor from the comfort of home. Our team has done this many times, so you never have to guess. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</h3>
    <p class="small">Same-day appointments are available for urgent needs on weekdays. Children are welcome, and our paediatric team knows how to make them smile. Your records are private, secure and always available when you need them. Thousands of patients already trust us, and we work hard to keep it that way.</p>
  </div>
</div>

3Vertical pills

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

Physiotherapy

We listen first, then build a plan around what you actually need. Lab results arrive in your patient portal, usually within 48 hours. Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment.

Dental care

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

Health check-ups

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

Questions

Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-col">
      <a class="nav-link" href="#spy-1131">Physiotherapy</a><a class="nav-link" href="#spy-1132">Dental care</a><a class="nav-link" href="#spy-1133">Health check-ups</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Physiotherapy</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Lab results arrive in your patient portal, usually within 48 hours. Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Dental care</h3>
        <p class="small">Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1133" class="pb-4">
        <h3 class="h6">Health check-ups</h3>
        <p class="small">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. Lab results arrive in your patient portal, usually within 48 hours. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1134" class="pb-4">
        <h3 class="h6">Questions</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We listen first, then build a plan around what you actually need. We work with most insurance providers and explain any costs upfront. 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.

Install

Children are welcome, and our paediatric team knows how to make them smile. We measure success by how many patients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.

Configure

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

Usage

Friendly reminders make sure you never miss a check-up or a dose. Clear prices, honest advice and no surprises along the way. Our specialists take time to listen and explain every step of your treatment. Family plans cover check-ups and vaccinations for everyone under one roof.

Examples

We keep things simple, so you can focus on what matters to you. Our clinic is fully accessible, with free parking right outside. Friendly people answer your questions quickly, by phone, chat or email.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-full flex-col items-stretch">
      <nav class="nav nav-pills flex-col">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Getting started</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. 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 id="spy-1137" class="pb-4">
        <h3 class="h6">Install</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. We measure success by how many patients come back and tell their friends. 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-1138" class="pb-4">
        <h3 class="h6">Configure</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. Our clinic is fully accessible, with free parking right outside.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</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. 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-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <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. Friendly people answer your questions quickly, by phone, chat or email.</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

Video consultations let you speak with a doctor from the comfort of home. Same-day appointments are available for urgent needs on weekdays. Every detail is handled by people who care about getting it right.

Midday

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. We work with most insurance providers and explain any costs upfront. Book online in two minutes and see a doctor as soon as today.

Afternoon

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

Evening

We listen first, then build a plan around what you actually need. Children are welcome, and our paediatric team knows how to make them smile. 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.

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Morning</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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">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. We work with most insurance providers and explain any costs upfront. Book online in two minutes and see a doctor as soon as today.</p>
      </div>
      <div id="spy-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <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. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Children are welcome, and our paediatric team knows how to make them smile. 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>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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

Beta

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

Gamma

Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. Same-day appointments are available for urgent needs on weekdays. Children are welcome, and our paediatric team knows how to make them smile.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="flex flex-col gap-2 small">
      <a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Alpha</h3>
        <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">Your records are private, secure and always available when you need them. Video consultations let you speak with a doctor from the comfort of home. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. Same-day appointments are available for urgent needs on weekdays. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Modern equipment means faster diagnoses and more comfortable treatment. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. We measure success by how many patients come back and tell their friends.

Features

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. Lab results arrive in your patient portal, usually within 48 hours. Thousands of patients already trust us, and we work hard to keep it that way.

Reviews

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

FAQ

Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Lab results arrive in your patient portal, usually within 48 hours.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
  <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="relative border rounded-md p-4 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-4">
    <h3 class="h6">Overview</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. Clear prices, honest advice and no surprises along the way. We measure success by how many patients come back and tell their friends.</p>
  </div>
  <div id="spy-1152" class="pb-4">
    <h3 class="h6">Features</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. Lab results arrive in your patient portal, usually within 48 hours. Thousands of patients already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1153" class="pb-4">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Book online in two minutes and see a doctor as soon as today. Thousands of patients already trust us, and we work hard to keep it that way. Our specialists take time to listen and explain every step of your treatment.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Lab results arrive in your patient portal, usually within 48 hours.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

We measure success by how many patients come back and tell their friends. Book online in two minutes and see a doctor as soon as today. Children are welcome, and our paediatric team knows how to make them smile.

Background

Same-day appointments are available for urgent needs on weekdays. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside. Every detail is handled by people who care about getting it right.

Method

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

Results

Video consultations let you speak with a doctor from the comfort of home. Our team has done this many times, so you never have to guess. Family plans cover check-ups and vaccinations for everyone under one roof.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Summary</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Book online in two minutes and see a doctor as soon as today. Children are welcome, and our paediatric team knows how to make them smile.</p>
      </div>
      <div id="spy-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">Same-day appointments are available for urgent needs on weekdays. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">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. 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-1159" class="pb-4">
        <h3 class="h6">Results</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Our team has done this many times, so you never have to guess. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first md:order-last">
    <p class="small font-semibold uppercase text-muted mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-col 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

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Same-day appointments are available for urgent needs on weekdays. We work with most insurance providers and explain any costs upfront.

Set up your profile

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

Invite the team

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

Go live

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

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Create an account</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Same-day appointments are available for urgent needs on weekdays. We work with most insurance providers and explain any costs upfront.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</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. Thousands of patients already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</h3>
        <p class="small">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. 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-1164" class="pb-4">
        <h3 class="h6">Go live</h3>
        <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. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A simple monthly skin check

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

2024

A parent's guide to childhood vaccinations

Our specialists take time to listen and explain every step of your treatment. Clear prices, honest advice and no surprises along the way. Lab results arrive in your patient portal, usually within 48 hours.

2025

Staying active after an injury

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

2026

Looking back at a busy season

Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. Every detail is handled by people who care about getting it right. Video consultations let you speak with a doctor from the comfort of home.

<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="relative border rounded-md p-4" 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-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">A simple monthly skin check</h3>
    <p class="small mb-0">Modern equipment means faster diagnoses and more comfortable treatment. 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.</p>
  </div>
  <div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">A parent&#39;s guide to childhood vaccinations</h3>
    <p class="small mb-0">Our specialists take time to listen and explain every step of your treatment. Clear prices, honest advice and no surprises along the way. Lab results arrive in your patient portal, usually within 48 hours.</p>
  </div>
  <div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">Staying active after an injury</h3>
    <p class="small mb-0">Our clinic is fully accessible, with free parking right outside. Video consultations let you speak with a doctor from the comfort of home. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Looking back at a busy season</h3>
    <p class="small mb-0">Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. Every detail is handled by people who care about getting it right. Video consultations let you speak with a doctor from the comfort of home.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

How often should you have a health check-up??: We listen first, then build a plan around what you actually need.
The small habits that make a big difference?: Our clinic is fully accessible, with free parking right outside.
Sleep tips our doctors actually use?: Family plans cover check-ups and vaccinations for everyone under one roof.

Shipping

How to choose the right service?: Book online in two minutes and see a doctor as soon as today.
What our patients asked us most?: We keep things simple, so you can focus on what matters to you.
Simple habits for a healthier back?: We work with most insurance providers and explain any costs upfront.

Returns

What to expect at your first dental visit?: Thousands of patients already trust us, and we work hard to keep it that way.
Five things we learned this year?: Start in minutes and get help from a real person whenever you need it.
A beginner's guide to getting started?: 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 sm:flex-col">
      <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="relative border rounded-md p-4" 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-4">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">How often should you have a health check-up??</dt>
          <dd class="small text-muted">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-muted">Our clinic is fully accessible, with free parking right outside.</dd>
          <dt class="small">Sleep tips our doctors actually use?</dt>
          <dd class="small text-muted">Family plans cover check-ups and vaccinations for everyone under one roof.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">How to choose the right service?</dt>
          <dd class="small text-muted">Book online in two minutes and see a doctor as soon as today.</dd>
          <dt class="small">What our patients asked us most?</dt>
          <dd class="small text-muted">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">Simple habits for a healthier back?</dt>
          <dd class="small text-muted">We work with most insurance providers and explain any costs upfront.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">What to expect at your first dental visit?</dt>
          <dd class="small text-muted">Thousands of patients already trust us, and we work hard to keep it that way.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-muted">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-muted">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

Children are welcome, and our paediatric team knows how to make them smile. Same-day appointments are available for urgent needs on weekdays. Our team has done this many times, so you never have to guess. Lab results arrive in your patient portal, usually within 48 hours.

Battery

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. Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way.

Connectivity

Our team has done this many times, so you never have to guess. Thousands of patients already trust us, and we work hard to keep it that way. Friendly reminders make sure you never miss a check-up or a dose. Same-day appointments are available for urgent needs on weekdays.

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-col">
      <a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Performance</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Same-day appointments are available for urgent needs on weekdays. 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-1176" class="pb-4">
        <h3 class="h6">Battery</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. Your records are private, secure and always available when you need them. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1177" class="pb-4">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Thousands of patients already trust us, and we work hard to keep it that way. Friendly reminders make sure you never miss a check-up or a dose. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. We measure success by how many patients come back and tell their friends. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$17.47 / mo

Insurance friendly
Reminders
Same-day appointments

Team

$46.09 / mo

Certified specialists
Family plans
Same-day appointments

Business

$76.66 / mo

Family plans
Same-day appointments
Online results

<nav id="spy-nav-1179" class="nav nav-pills justify-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="relative border rounded-md p-4 bg-surface-3" 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-4">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="text-xl font-bold mb-1">$17.47<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Insurance friendly</li>
        <li>Reminders</li>
        <li>Same-day appointments</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="text-xl font-bold mb-1">$46.09<small class="text-base text-muted"> / 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 id="spy-1182" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="text-xl font-bold mb-1">$76.66<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Family plans</li>
        <li>Same-day appointments</li>
        <li>Online results</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Our favourite tips for busy weeks

We listen first, then build a plan around what you actually need. Our clinic is fully accessible, with free parking right outside. Book online in two minutes and see a doctor as soon as today.

Every detail is handled by people who care about getting it right. Lab results arrive in your patient portal, usually within 48 hours. 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.

Chapter 2: When to choose a video consultation

Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof.

Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. We work with most insurance providers and explain any costs upfront.

Chapter 3: Inside our new heart screening clinic

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Book online in two minutes and see a doctor as soon as today.

Your records are private, secure and always available when you need them. Our team has done this many times, so you never have to guess. Children are welcome, and our paediatric team knows how to make them smile.

Chapter 4: Understanding your blood test results

We keep things simple, so you can focus on what matters to you. Modern equipment means faster diagnoses and more comfortable treatment. Family plans cover check-ups and vaccinations for everyone under one roof.

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. Video consultations let you speak with a doctor from the comfort of home. We listen first, then build a plan around what you actually need.

<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="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" 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-4">
    <h3 class="h6">Chapter 1: Our favourite tips for busy weeks</h3>
    <p class="small">We listen first, then build a plan around what you actually need. Our clinic is fully accessible, with free parking right outside. Book online in two minutes and see a doctor as soon as today.</p>
    <p class="small">Every detail is handled by people who care about getting it right. Lab results arrive in your patient portal, usually within 48 hours. 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-1185" class="pb-4">
    <h3 class="h6">Chapter 2: When to choose a video consultation</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
    <p class="small">Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. We work with most insurance providers and explain any costs upfront.</p>
  </div>
  <div id="spy-1186" class="pb-4">
    <h3 class="h6">Chapter 3: Inside our new heart screening clinic</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Book online in two minutes and see a doctor as soon as today.</p>
    <p class="small">Your records are private, secure and always available when you need them. Our team has done this many times, so you never have to guess. Children are welcome, and our paediatric team knows how to make them smile.</p>
  </div>
  <div id="spy-1187" class="pb-4">
    <h3 class="h6">Chapter 4: Understanding your blood test results</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Modern equipment means faster diagnoses and more comfortable treatment. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
    <p class="small">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. Video consultations let you speak with a doctor from the comfort of home. We listen first, then build a plan around what you actually need.</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

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

Notifications

Product news

Weekly digest

Our clinic is fully accessible, with free parking right outside. Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. Our specialists take time to listen and explain every step of your treatment.

Privacy

Hide my profile from search

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

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
      <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="relative border rounded-md p-4" 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-4">
        <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="Mason Nguyen">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Toronto">
        </div>
        <p class="small">Same-day appointments are available for urgent needs on weekdays. 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.</p>
      </div>
      <div id="spy-1190" class="pb-4">
        <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">Our clinic is fully accessible, with free parking right outside. Friendly reminders make sure you never miss a check-up or a dose. We work with most insurance providers and explain any costs upfront. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
      <div id="spy-1191" class="pb-4">
        <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">We measure success by how many patients come back and tell their friends. Clear prices, honest advice and no surprises along the way. Children are welcome, and our paediatric team knows how to make them smile. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Operations

Chloe Ortega
Backend Engineer
Ethan Moreau
Frontend Engineer
Diego Ibrahim
Data Analyst

Customer Support

Ruby Fischer
Customer Success
Aria Silva
Content Writer
Lea Rossi
Frontend Engineer

Research

Elena Harlow
Operations Manager
Omar Quinn
Art Director
Jonah Kowalski
Data Analyst

<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">Customer Support</a><a class="nav-link" href="#spy-1200">Research</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Operations</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Chloe Ortega"><div><div class="small font-semibold">Chloe Ortega</div><div class="small text-muted">Backend Engineer</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-full" width="36" height="36" alt="Ethan Moreau"><div><div class="small font-semibold">Ethan Moreau</div><div class="small text-muted">Frontend Engineer</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="36" height="36" alt="Diego Ibrahim"><div><div class="small font-semibold">Diego Ibrahim</div><div class="small text-muted">Data Analyst</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Customer Support</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="36" height="36" alt="Ruby Fischer"><div><div class="small font-semibold">Ruby Fischer</div><div class="small text-muted">Customer Success</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="36" height="36" alt="Aria Silva"><div><div class="small font-semibold">Aria Silva</div><div class="small text-muted">Content Writer</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="36" height="36" alt="Lea Rossi"><div><div class="small font-semibold">Lea Rossi</div><div class="small text-muted">Frontend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-4">
    <h3 class="h6">Research</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Elena Harlow"><div><div class="small font-semibold">Elena Harlow</div><div class="small text-muted">Operations Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Omar Quinn"><div><div class="small font-semibold">Omar Quinn</div><div class="small text-muted">Art Director</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="36" height="36" alt="Jonah Kowalski"><div><div class="small font-semibold">Jonah Kowalski</div><div class="small text-muted">Data Analyst</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Pediatrics

Skin check$105.00
Blood test$47.00
Video consult$39.99

Orthopedics

Dental cleaning$97.00
Video consult$37.99
Teeth whitening$227.00

Dental

Heart screening$207.00
Dental cleaning$93.00
Child check-up$64.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Pediatrics</a><a class="nav-link" href="#spy-1203">Orthopedics</a><a class="nav-link" href="#spy-1204">Dental</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Pediatrics</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Skin check</span><span class="font-semibold">$105.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Blood test</span><span class="font-semibold">$47.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Video consult</span><span class="font-semibold">$39.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Orthopedics</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Dental cleaning</span><span class="font-semibold">$97.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Video consult</span><span class="font-semibold">$37.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Teeth whitening</span><span class="font-semibold">$227.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">Dental</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Heart screening</span><span class="font-semibold">$207.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Dental cleaning</span><span class="font-semibold">$93.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Child check-up</span><span class="font-semibold">$64.99</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 specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. Thousands of patients already trust us, and we work hard to keep it that way.

This week

Video consultations let you speak with a doctor from the comfort of home. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

Later

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. We work with most insurance providers and explain any costs upfront. Same-day appointments are available for urgent needs on weekdays.

<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="relative border rounded-md p-4 border-0 rounded-none" 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-4">
        <h3 class="h6">Today</h3>
        <p class="small">Lab results arrive in your patient portal, usually within 48 hours. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. Thousands of patients already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1208" class="pb-4">
        <h3 class="h6">Later</h3>
        <p class="small">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. We work with most insurance providers and explain any costs upfront. Same-day appointments are available for urgent needs on weekdays.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Our clinic is fully accessible, with free parking right outside. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Friendly reminders make sure you never miss a check-up or a dose.

Orbit

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

Landing

Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Family plans cover check-ups and vaccinations for everyone under one roof. Friendly people answer your questions quickly, by phone, chat or email.

<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
  <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="relative border rounded-md p-4 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-4">
      <h3 class="h6">Launch</h3>
      <p class="small">Our clinic is fully accessible, with free parking right outside. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Friendly reminders make sure you never miss a check-up or a dose.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">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. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. 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>
</div>

20Changelog

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

v3.2 Apr 21, 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.
FixedLab results arrive in your patient portal, usually within 48 hours.

v3.1 Feb 21, 2026

NewModern equipment means faster diagnoses and more comfortable treatment.
ImprovedVideo consultations let you speak with a doctor from the comfort of home.
FixedOur specialists take time to listen and explain every step of your treatment.

v3.0 Sep 12, 2025

NewWe listen first, then build a plan around what you actually need.
ImprovedClear prices, honest advice and no surprises along the way.
FixedSame-day appointments are available for urgent needs on weekdays.

v2.9 Jan 6, 2026

NewThousands of patients already trust us, and we work hard to keep it that way.
ImprovedWe measure success by how many patients come back and tell their friends.
FixedFriendly reminders make sure you never miss a check-up or a dose.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-col 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">v3.2 <small class="text-muted font-normal">Apr 21, 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>Lab results arrive in your patient portal, usually within 48 hours.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">Feb 21, 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>Video consultations let you speak with a doctor from the comfort of home.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our specialists take time to listen and explain every step of your treatment.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Sep 12, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Same-day appointments are available for urgent needs on weekdays.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Jan 6, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of patients already trust us, and we work hard to keep it that way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We measure success by how many patients come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Friendly reminders make sure you never miss a check-up or a dose.</li>
        </ul>
      </div>
    </div>
  </div>
</div>