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

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. 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. We work with most insurance providers and explain any costs upfront. We measure success by how many patients come back and tell their friends. Same-day appointments are available for urgent needs on weekdays.

Details

Lab results arrive in your patient portal, usually within 48 hours. Modern equipment means faster diagnoses and more comfortable treatment. Family plans cover check-ups and vaccinations for everyone under one roof. We keep things simple, so you can focus on what matters to you.

Our team has done this many times, so you never have to guess. Our clinic is fully accessible, with free parking right outside. Book online in two minutes and see a doctor as soon as today. Friendly people answer your questions quickly, by phone, chat or email.

Pricing

Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. 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. 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. Your records are private, secure and always available when you need them.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Brio Base</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">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. Your records are private, secure and always available when you need them.</p>
    <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. Same-day appointments are available for urgent needs on weekdays.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Lab results arrive in your patient portal, usually within 48 hours. Modern equipment means faster diagnoses and more comfortable treatment. Family plans cover check-ups and vaccinations for everyone under one roof. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">Our team has done this many times, so you never have to guess. Our clinic is fully accessible, with free parking right outside. Book online in two minutes and see a doctor as soon as today. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Friendly reminders make sure you never miss a check-up or a dose.</p>
    <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. 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.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Same-day appointments are available for urgent needs on weekdays. We measure success by how many patients come back and tell their friends. Thousands of patients already trust us, and we work hard to keep it that way.

Step two

Friendly reminders make sure you never miss a check-up or a dose. Our clinic is fully accessible, with free parking right outside. Clear prices, honest advice and no surprises along the way. Modern equipment means faster diagnoses and more comfortable treatment.

Step three

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

Step four

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

<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">Same-day appointments are available for urgent needs on weekdays. We measure success by how many patients come back and tell their friends. Thousands of patients already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</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. Clear prices, honest advice and no surprises along the way. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">We work with most insurance providers and explain any costs upfront. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Video consultations let you speak with a doctor from the comfort of home. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
</div>

3Vertical pills

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

Physiotherapy

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

Telehealth

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

Dental care

We measure success by how many patients come back and tell their friends. Children are welcome, and our paediatric team knows how to make them smile. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.

Questions

Video consultations let you speak with a doctor from the comfort of home. Same-day appointments are available for urgent needs on weekdays. Our specialists take time to listen and explain every step of your treatment. Lab results arrive in your patient portal, usually within 48 hours.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Physiotherapy</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">Physiotherapy</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof. Our specialists take time to listen and explain every step of your treatment.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Telehealth</h3>
        <p class="small">Book online in two minutes and see a doctor as soon as today. Start in minutes and get help from a real person whenever you need it. 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-1133" class="pb-3">
        <h3 class="h6">Dental care</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Children are welcome, and our paediatric team knows how to make them smile. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Same-day appointments are available for urgent needs on weekdays. Our specialists take time to listen and explain every step of your treatment. Lab results arrive in your patient portal, usually within 48 hours.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Your records are private, secure and always available when you need them. Modern equipment means faster diagnoses and more comfortable treatment.

Install

We work with most insurance providers and explain any costs upfront. Our clinic is fully accessible, with free parking right outside. Thousands of patients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.

Configure

Family plans cover check-ups and vaccinations for everyone under one roof. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. We measure success by how many patients come back and tell their friends.

Usage

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

Examples

Video consultations let you speak with a doctor from the comfort of home. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Your records are private, secure and always available when you need them. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">We work with most insurance providers and explain any costs upfront. Our clinic is fully accessible, with free parking right outside. Thousands of patients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. We measure success by how many patients come back and tell their friends.</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. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Video consultations let you speak with a doctor from the comfort of home. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

5List group

List group items as the spy menu - clear active state with no extra styling.

Morning Midday Afternoon Evening

Morning

Modern equipment means faster diagnoses and more comfortable treatment. Our specialists take time to listen and explain every step of your treatment. Our clinic is fully accessible, with free parking right outside.

Midday

We listen first, then build a plan around what you actually need. Same-day appointments are available for urgent needs on weekdays. Friendly reminders make sure you never miss a check-up or a dose.

Afternoon

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

Evening

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. Lab results arrive in your patient portal, usually within 48 hours. Clear prices, honest advice and no surprises along the way.

<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">Modern equipment means faster diagnoses and more comfortable treatment. Our specialists take time to listen and explain every step of your treatment. Our clinic is fully accessible, with free parking right outside.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">We listen first, then build a plan around what you actually need. 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-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. 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-1145" class="pb-3">
        <h3 class="h6">Evening</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. Lab results arrive in your patient portal, usually within 48 hours. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. We measure success by how many patients come back and tell their friends. Our team has done this many times, so you never have to guess.

Beta

Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof. 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.

Gamma

Clear prices, honest advice and no surprises along the way. Modern equipment means faster diagnoses and more comfortable treatment. Friendly reminders make sure you never miss a check-up or a dose.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. We measure success by how many patients come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Lab results arrive in your patient portal, usually within 48 hours. Family plans cover check-ups and vaccinations for everyone under one roof. 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 id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Modern equipment means faster diagnoses and more comfortable treatment. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment. Book online in two minutes and see a doctor as soon as today.

Features

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

Reviews

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

FAQ

Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Same-day appointments are available for urgent needs on weekdays. We work with most insurance providers and explain any costs upfront.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment. Book online in two minutes and see a doctor as soon as today.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Your records are private, secure and always available when you need them. We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our clinic is fully accessible, with free parking right outside. Thousands of patients already trust us, and we work hard to keep it that way. Same-day appointments are available for urgent needs on weekdays. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Lab results arrive in your patient portal, usually within 48 hours. Same-day appointments are available for urgent needs on weekdays. We work with most insurance providers and explain any costs upfront.</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 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. Friendly reminders make sure you never miss a check-up or a dose.

Background

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

Method

We measure success by how many patients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. 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.

Results

Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside. Our specialists take time to listen and explain every step of your treatment. Every detail is handled by people who care about getting it right.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">We 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. Friendly reminders make sure you never miss a check-up or a dose.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. 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 id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">We measure success by how many patients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. 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-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Our clinic is fully accessible, with free parking right outside. Our specialists take time to listen and explain every step of your treatment. Every detail is handled by people who care about getting it right.</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 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. Your records are private, secure and always available when you need them.

Set up your profile

Family plans cover check-ups and vaccinations for everyone under one roof. Same-day appointments are available for urgent needs on weekdays. Friendly people answer your questions quickly, by phone, chat or email. Our specialists take time to listen and explain every step of your treatment.

Invite the team

Our team has done this many times, so you never have to guess. Our clinic is fully accessible, with free parking right outside. 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.

Go live

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

<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 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. Your records are private, secure and always available when you need them.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Same-day appointments are available for urgent needs on weekdays. 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-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Our clinic is fully accessible, with free parking right outside. 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.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

When to choose a video consultation

Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.

2024

How to choose the right service

We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you. Thousands of patients already trust us, and we work hard to keep it that way.

2025

The small habits that make a big difference

We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose. Clear prices, honest advice and no surprises along the way. We measure success by how many patients come back and tell their friends.

2026

A beginner's guide to getting started

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

<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">When to choose a video consultation</h3>
    <p class="small mb-0">Lab results arrive in your patient portal, usually within 48 hours. Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</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">How to choose the right service</h3>
    <p class="small mb-0">We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you. Thousands of patients already trust us, and we work hard to keep it that way.</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">The small habits that make a big difference</h3>
    <p class="small mb-0">We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose. 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-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">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 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>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our favourite tips for busy weeks?: Children are welcome, and our paediatric team knows how to make them smile.
Understanding your blood test results?: Video consultations let you speak with a doctor from the comfort of home.
Five things we learned this year?: We keep things simple, so you can focus on what matters to you.

Shipping

A parent's guide to childhood vaccinations?: Same-day appointments are available for urgent needs on weekdays.
What our patients asked us most?: We listen first, then build a plan around what you actually need.
Inside our new heart screening clinic?: Thousands of patients already trust us, and we work hard to keep it that way.

Returns

Staying active after an injury?: Friendly people answer your questions quickly, by phone, chat or email.
A simple monthly skin check?: Lab results arrive in your patient portal, usually within 48 hours.
Simple habits for a healthier back?: Our clinic is fully accessible, with free parking right outside.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Children are welcome, and our paediatric team knows how to make them smile.</dd>
          <dt class="small">Understanding your blood test results?</dt>
          <dd class="small text-body-secondary">Video consultations let you speak with a doctor from the comfort of home.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">A parent&#39;s guide to childhood vaccinations?</dt>
          <dd class="small text-body-secondary">Same-day appointments are available for urgent needs on weekdays.</dd>
          <dt class="small">What our patients asked us most?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">Inside our new heart screening clinic?</dt>
          <dd class="small text-body-secondary">Thousands of patients already trust us, and we work hard to keep it that way.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Staying active after an injury?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">A simple monthly skin check?</dt>
          <dd class="small text-body-secondary">Lab results arrive in your patient portal, usually within 48 hours.</dd>
          <dt class="small">Simple habits for a healthier back?</dt>
          <dd class="small text-body-secondary">Our clinic is fully accessible, with free parking right outside.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Our specialists take time to listen and explain every step of your treatment. Every detail is handled by people who care about getting it right. Family plans cover check-ups and vaccinations for everyone under one roof. Your records are private, secure and always available when you need them.

Battery

Start in minutes and get help from a real person whenever you need it. Modern equipment means faster diagnoses and more comfortable treatment. Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it.

Connectivity

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

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Our specialists take time to listen and explain every step of your treatment. Every detail is handled by people who care about getting it right. Family plans cover check-ups and vaccinations for everyone under one roof. Your records are private, secure and always available when you need them.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Modern equipment means faster diagnoses and more comfortable treatment. Video consultations let you speak with a doctor from the comfort of home. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Thousands of patients already trust us, and we work hard to keep it that way. Friendly reminders make sure you never miss a check-up or a dose. 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-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Lab results arrive in your patient portal, usually within 48 hours. We measure success by how many patients come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$12.22 / mo

Reminders
Online results
Same-day appointments

Team

$35.98 / mo

Family plans
Family plans
Same-day appointments

Business

$69.03 / mo

Same-day appointments
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">$12.22<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Reminders</li>
        <li>Online results</li>
        <li>Same-day appointments</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="fs-4 fw-bold mb-1">$35.98<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Family plans</li>
        <li>Family plans</li>
        <li>Same-day appointments</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">$69.03<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Same-day appointments</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: Looking back at a busy season

Family plans cover check-ups and vaccinations for everyone under one roof. Same-day appointments are available for urgent needs on weekdays. 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. 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.

Chapter 2: What to expect at your first dental visit

Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.

Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We measure success by how many patients come back and tell their friends.

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

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. 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. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment means faster diagnoses and more comfortable treatment.

Chapter 4: Sleep tips our doctors actually use

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

Same-day appointments are available for urgent needs on weekdays. Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours.

<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: Looking back at a busy season</h3>
    <p class="small">Family plans cover check-ups and vaccinations for everyone under one roof. Same-day appointments are available for urgent needs on weekdays. Children are welcome, and our paediatric team knows how to make them smile.</p>
    <p class="small">We keep things simple, so you can focus on what matters to you. Our specialists take time to listen and explain every step of your treatment. Modern equipment means faster diagnoses and more comfortable treatment. Our clinic is fully accessible, with free parking right outside.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: What to expect at your first dental visit</h3>
    <p class="small">Your records are private, secure and always available when you need them. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How often should you have a health check-up?</h3>
    <p class="small">Friendly reminders make sure you never miss a check-up or a dose. Children are welcome, and our paediatric team knows how to make them smile. Family plans cover check-ups and vaccinations for everyone under one roof.</p>
    <p class="small">Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment means faster diagnoses and more comfortable treatment.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Sleep tips our doctors actually use</h3>
    <p class="small">Our specialists take time to listen and explain every step of your treatment. Video consultations let you speak with a doctor from the comfort of home. Every detail is handled by people who care about getting it right.</p>
    <p class="small">Same-day appointments are available for urgent needs on weekdays. Our clinic is fully accessible, with free parking right outside. Lab results arrive in your patient portal, usually within 48 hours.</p>
  </div>
</div>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

We work with most insurance providers and explain any costs upfront. Thousands of patients already trust us, and we work hard to keep it that way. Book online in two minutes and see a doctor as soon as today.

Notifications

Product news

Weekly digest

Clear prices, honest advice and no surprises along the way. Your records are private, secure and always available when you need them. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.

Privacy

Hide my profile from search

Start in minutes and get help from a real person whenever you need it. Our clinic is fully accessible, with free parking right outside. Modern equipment means faster diagnoses and more comfortable treatment.

<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="Ivy Patel">
        </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">We work with most insurance providers and explain any costs upfront. Thousands of patients already trust us, and we work hard to keep it that way. Book online in two minutes and see a doctor as soon as today.</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">Clear prices, honest advice and no surprises along the way. Your records are private, secure and always available when you need them. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.</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">Start in minutes and get help from a real person whenever you need it. Our clinic is fully accessible, with free parking right outside. Modern equipment means faster diagnoses and more comfortable treatment.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Felix Kim
Finance Lead
Ella Mensah
Frontend Engineer
Leo Quinn
Backend Engineer

Engineering

Diego Rossi
QA Engineer
Luna Larsen
Operations Manager
Lea Fischer
Marketing Lead

Sales

Owen Ibrahim
Project Manager
Zoe Hughes
Finance Lead
Elena Lindqvist
Operations Manager

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Engineering</a><a class="nav-link" href="#spy-1200">Sales</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Finance</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Felix Kim"><div><div class="small fw-semibold">Felix Kim</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-6.svg" class="rounded-circle" width="36" height="36" alt="Ella Mensah"><div><div class="small fw-semibold">Ella Mensah</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Leo Quinn"><div><div class="small fw-semibold">Leo Quinn</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Diego Rossi"><div><div class="small fw-semibold">Diego Rossi</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Luna Larsen"><div><div class="small fw-semibold">Luna Larsen</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-4.svg" class="rounded-circle" width="36" height="36" alt="Lea Fischer"><div><div class="small fw-semibold">Lea Fischer</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Owen Ibrahim"><div><div class="small fw-semibold">Owen Ibrahim</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Zoe Hughes"><div><div class="small fw-semibold">Zoe Hughes</div><div class="small text-body-secondary">Finance Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Elena Lindqvist"><div><div class="small fw-semibold">Elena Lindqvist</div><div class="small text-body-secondary">Operations Manager</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Pediatrics

Physio session$75.00
Teeth whitening$259.00
Heart screening$209.00

Dental

Physio session$77.00
Dental cleaning$92.00
Skin check$97.00

Dermatology

Video consult$35.00
Teeth whitening$271.00
Annual check-up$160.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">Dental</a><a class="nav-link" href="#spy-1204">Dermatology</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Pediatrics</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">$75.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Teeth whitening</span><span class="fw-semibold">$259.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Heart screening</span><span class="fw-semibold">$209.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Physio session</span><span class="fw-semibold">$77.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Dental cleaning</span><span class="fw-semibold">$92.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Skin check</span><span class="fw-semibold">$97.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Dermatology</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Video consult</span><span class="fw-semibold">$35.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Teeth whitening</span><span class="fw-semibold">$271.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Annual check-up</span><span class="fw-semibold">$160.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.

This week

Children are welcome, and our paediatric team knows how to make them smile. Family plans cover check-ups and vaccinations for everyone under one roof. Book online in two minutes and see a doctor as soon as today.

Later

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

<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">We work with most insurance providers and explain any costs upfront. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Children are welcome, and our paediatric team knows how to make them smile. Family plans cover check-ups and vaccinations for everyone under one roof. Book online in two minutes and see a doctor as soon as today.</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. 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>
  </div>
</div>

19Dark theme

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

Launch

Our specialists take time to listen and explain every step of your treatment. Friendly reminders make sure you never miss a check-up or a dose. Every detail is handled by people who care about getting it right. We measure success by how many patients come back and tell their friends.

Orbit

We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Your records are private, secure and always available when you need them.

Landing

Same-day appointments are available for urgent needs on weekdays. 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. We listen first, then build a plan around what you actually need.

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Our specialists take time to listen and explain every step of your treatment. Friendly reminders make sure you never miss a check-up or a dose. Every detail is handled by people who care about getting it right. We measure success by how many patients come back and tell their friends.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Your records are private, secure and always available when you need them.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Same-day appointments are available for urgent needs on weekdays. 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. We listen first, then build a plan around what you actually need.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Jul 18, 2026

NewOur team has done this many times, so you never have to guess.
ImprovedVideo consultations let you speak with a doctor from the comfort of home.
FixedThousands of patients already trust us, and we work hard to keep it that way.

v3.1 Aug 16, 2026

NewModern equipment means faster diagnoses and more comfortable treatment.
ImprovedChildren are welcome, and our paediatric team knows how to make them smile.
FixedBook online in two minutes and see a doctor as soon as today.

v3.0 Aug 24, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedYour records are private, secure and always available when you need them.
FixedOur clinic is fully accessible, with free parking right outside.

v2.9 May 26, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedWe work with most insurance providers and explain any costs upfront.
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-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">Jul 18, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</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>Thousands of patients already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Aug 16, 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>Children are welcome, and our paediatric team knows how to make them smile.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Book online in two minutes and see a doctor as soon as today.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Aug 24, 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>Your records are private, secure and always available when you need them.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our clinic is fully accessible, with free parking right outside.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">May 26, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We work with most insurance providers and explain any costs upfront.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Friendly reminders make sure you never miss a check-up or a dose.</li>
        </ul>
      </div>
    </div>
  </div>
</div>