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

Sellers get professional photos, floor plans and a marketing plan included. Thousands of buyers already trust us, and we work hard to keep it that way. Mortgage advisors help you understand what you can afford before you start.

Most of our homes sell within six weeks, often above the asking price. Neighbourhood guides cover transport, schools and things to do. Price alerts tell you the moment a home that fits your search comes on the market. Get a free, no-obligation valuation of your home within 48 hours.

Details

Every listing is checked by our team, so the photos match what you see in person. We listen first, then build a plan around what you actually need. We measure success by how many buyers come back and tell their friends.

Our local agents know every street, school and coffee shop in the area. Book viewings online and take a 3D tour before you leave the house. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

Pricing

Honest advice comes first, even when it means waiting for the right home. We keep things simple, so you can focus on what matters to you. Our rental team manages repairs, payments and tenants for landlords.

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. Sellers get professional photos, floor plans and a marketing plan included.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Xenoera Hub</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">Sellers get professional photos, floor plans and a marketing plan included. Thousands of buyers already trust us, and we work hard to keep it that way. Mortgage advisors help you understand what you can afford before you start.</p>
    <p class="small">Most of our homes sell within six weeks, often above the asking price. Neighbourhood guides cover transport, schools and things to do. Price alerts tell you the moment a home that fits your search comes on the market. Get a free, no-obligation valuation of your home within 48 hours.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Every listing is checked by our team, so the photos match what you see in person. We listen first, then build a plan around what you actually need. We measure success by how many buyers come back and tell their friends.</p>
    <p class="small">Our local agents know every street, school and coffee shop in the area. Book viewings online and take a 3D tour before you leave the house. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Honest advice comes first, even when it means waiting for the right home. We keep things simple, so you can focus on what matters to you. Our rental team manages repairs, payments and tenants for landlords.</p>
    <p class="small">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. Sellers get professional photos, floor plans and a marketing plan included.</p>
  </div>
</div>

2Horizontal pills

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

Step one

We listen first, then build a plan around what you actually need. Neighbourhood guides cover transport, schools and things to do. Our rental team manages repairs, payments and tenants for landlords. Thousands of buyers already trust us, and we work hard to keep it that way.

Step two

Book viewings online and take a 3D tour before you leave the house. We measure success by how many buyers come back and tell their friends. Mortgage advisors help you understand what you can afford before you start.

Step three

Honest advice comes first, even when it means waiting for the right home. Price alerts tell you the moment a home that fits your search comes on the market. Every listing is checked by our team, so the photos match what you see in person.

Step four

We handle the paperwork, so you can focus on planning the move. Most of our homes sell within six weeks, often above the asking price. Start in minutes and get help from a real person whenever you need it.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">We listen first, then build a plan around what you actually need. Neighbourhood guides cover transport, schools and things to do. Our rental team manages repairs, payments and tenants for landlords. Thousands of buyers 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">Book viewings online and take a 3D tour before you leave the house. We measure success by how many buyers come back and tell their friends. Mortgage advisors help you understand what you can afford before you start.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Honest advice comes first, even when it means waiting for the right home. Price alerts tell you the moment a home that fits your search comes on the market. Every listing is checked by our team, so the photos match what you see in person.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">We handle the paperwork, so you can focus on planning the move. Most of our homes sell within six weeks, often above the asking price. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
</div>

3Vertical pills

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

Home valuation

Clear prices, honest advice and no surprises along the way. Get a free, no-obligation valuation of your home within 48 hours. 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.

Mortgage advice

Our local agents know every street, school and coffee shop in the area. Friendly people answer your questions quickly, by phone, chat or email. We handle the paperwork, so you can focus on planning the move. Most of our homes sell within six weeks, often above the asking price.

Virtual tours

Book viewings online and take a 3D tour before you leave the house. We measure success by how many buyers come back and tell their friends. Get a free, no-obligation valuation of your home within 48 hours.

Questions

Price alerts tell you the moment a home that fits your search comes on the market. We listen first, then build a plan around what you actually need. Our local agents know every street, school and coffee shop in the area. Every detail is handled by people who care about getting it right.

<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">Home valuation</a><a class="nav-link" href="#spy-1132">Mortgage advice</a><a class="nav-link" href="#spy-1133">Virtual tours</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-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Home valuation</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Get a free, no-obligation valuation of your home within 48 hours. 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.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Mortgage advice</h3>
        <p class="small">Our local agents know every street, school and coffee shop in the area. Friendly people answer your questions quickly, by phone, chat or email. We handle the paperwork, so you can focus on planning the move. Most of our homes sell within six weeks, often above the asking price.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Virtual tours</h3>
        <p class="small">Book viewings online and take a 3D tour before you leave the house. We measure success by how many buyers come back and tell their friends. Get a free, no-obligation valuation of your home within 48 hours.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Price alerts tell you the moment a home that fits your search comes on the market. We listen first, then build a plan around what you actually need. Our local agents know every street, school and coffee shop in the area. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Friendly people answer your questions quickly, by phone, chat or email. Honest advice comes first, even when it means waiting for the right home. Our rental team manages repairs, payments and tenants for landlords. Our team has done this many times, so you never have to guess.

Install

Sellers get professional photos, floor plans and a marketing plan included. Thousands of buyers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.

Configure

Mortgage advisors help you understand what you can afford before you start. We keep things simple, so you can focus on what matters to you. Neighbourhood guides cover transport, schools and things to do. Every listing is checked by our team, so the photos match what you see in person.

Usage

We listen first, then build a plan around what you actually need. Our rental team manages repairs, payments and tenants for landlords. Neighbourhood guides cover transport, schools and things to do.

Examples

We handle the paperwork, so you can focus on planning the move. Every detail is handled by people who care about getting it right. Sellers get professional photos, floor plans and a marketing plan included.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Honest advice comes first, even when it means waiting for the right home. Our rental team manages repairs, payments and tenants for landlords. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Sellers get professional photos, floor plans and a marketing plan included. Thousands of buyers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. 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">Mortgage advisors help you understand what you can afford before you start. We keep things simple, so you can focus on what matters to you. Neighbourhood guides cover transport, schools and things to do. Every listing is checked by our team, so the photos match what you see in person.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Our rental team manages repairs, payments and tenants for landlords. Neighbourhood guides cover transport, schools and things to do.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">We handle the paperwork, so you can focus on planning the move. Every detail is handled by people who care about getting it right. Sellers get professional photos, floor plans and a marketing plan included.</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

Honest advice comes first, even when it means waiting for the right home. Thousands of buyers already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Mortgage advisors help you understand what you can afford before you start.

Midday

We measure success by how many buyers come back and tell their friends. Our team has done this many times, so you never have to guess. Book viewings online and take a 3D tour before you leave the house. We keep things simple, so you can focus on what matters to you.

Afternoon

Price alerts tell you the moment a home that fits your search comes on the market. Get a free, no-obligation valuation of your home within 48 hours. Start in minutes and get help from a real person whenever you need it.

Evening

Every listing is checked by our team, so the photos match what you see in person. Friendly people answer your questions quickly, by phone, chat or email. Our local agents know every street, school and coffee shop in the area. Most of our homes sell within six weeks, often above the asking price.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Honest advice comes first, even when it means waiting for the right home. Thousands of buyers already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Mortgage advisors help you understand what you can afford before you start.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">We measure success by how many buyers come back and tell their friends. Our team has done this many times, so you never have to guess. Book viewings online and take a 3D tour before you leave the house. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Price alerts tell you the moment a home that fits your search comes on the market. Get a free, no-obligation valuation of your home within 48 hours. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Every listing is checked by our team, so the photos match what you see in person. Friendly people answer your questions quickly, by phone, chat or email. Our local agents know every street, school and coffee shop in the area. Most of our homes sell within six weeks, often above the asking price.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Honest advice comes first, even when it means waiting for the right home. Mortgage advisors help you understand what you can afford before you start. Price alerts tell you the moment a home that fits your search comes on the market.

Beta

Book viewings online and take a 3D tour before you leave the house. Clear prices, honest advice and no surprises along the way. Thousands of buyers already trust us, and we work hard to keep it that way. We measure success by how many buyers come back and tell their friends.

Gamma

Neighbourhood guides cover transport, schools and things to do. Our local agents know every street, school and coffee shop in the area. 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.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Honest advice comes first, even when it means waiting for the right home. Mortgage advisors help you understand what you can afford before you start. Price alerts tell you the moment a home that fits your search comes on the market.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Book viewings online and take a 3D tour before you leave the house. Clear prices, honest advice and no surprises along the way. Thousands of buyers already trust us, and we work hard to keep it that way. We measure success by how many buyers come back and tell their friends.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Neighbourhood guides cover transport, schools and things to do. Our local agents know every street, school and coffee shop in the area. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </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. Every listing is checked by our team, so the photos match what you see in person. Get a free, no-obligation valuation of your home within 48 hours.

Features

Reviews

Sellers get professional photos, floor plans and a marketing plan included. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Price alerts tell you the moment a home that fits your search comes on the market.

FAQ

Sellers get professional photos, floor plans and a marketing plan included. Honest advice comes first, even when it means waiting for the right home. We measure success by how many buyers come back and tell their friends. Every detail is handled by people who care about getting it right.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-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. Every listing is checked by our team, so the photos match what you see in person. Get a free, no-obligation valuation of your home within 48 hours.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">We handle the paperwork, so you can focus on planning the move. Most of our homes sell within six weeks, often above the asking price. Start in minutes and get help from a real person whenever you need it. Our rental team manages repairs, payments and tenants for landlords.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Sellers get professional photos, floor plans and a marketing plan included. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Price alerts tell you the moment a home that fits your search comes on the market.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Sellers get professional photos, floor plans and a marketing plan included. Honest advice comes first, even when it means waiting for the right home. We measure success by how many buyers come back and tell their friends. Every detail is handled by people who care about getting it right.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Start in minutes and get help from a real person whenever you need it. Every listing is checked by our team, so the photos match what you see in person. Clear prices, honest advice and no surprises along the way.

Background

Thousands of buyers already trust us, and we work hard to keep it that way. We handle the paperwork, so you can focus on planning the move. Friendly people answer your questions quickly, by phone, chat or email.

Method

We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Book viewings online and take a 3D tour before you leave the house.

Results

Mortgage advisors help you understand what you can afford before you start. Get a free, no-obligation valuation of your home within 48 hours. We keep things simple, so you can focus on what matters to you. Our local agents know every street, school and coffee shop in the area.

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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Every listing is checked by our team, so the photos match what you see in person. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Thousands of buyers already trust us, and we work hard to keep it that way. We handle the paperwork, so you can focus on planning the move. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Book viewings online and take a 3D tour before you leave the house.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Mortgage advisors help you understand what you can afford before you start. Get a free, no-obligation valuation of your home within 48 hours. We keep things simple, so you can focus on what matters to you. Our local agents know every street, school and coffee shop in the area.</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

Our rental team manages repairs, payments and tenants for landlords. Most of our homes sell within six weeks, often above the asking price. Neighbourhood guides cover transport, schools and things to do. We listen first, then build a plan around what you actually need.

Set up your profile

Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Most of our homes sell within six weeks, often above the asking price. Honest advice comes first, even when it means waiting for the right home.

Invite the team

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. Every listing is checked by our team, so the photos match what you see in person. Our rental team manages repairs, payments and tenants for landlords.

Go live

Thousands of buyers already trust us, and we work hard to keep it that way. Our local agents know every street, school and coffee shop in the area. 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="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">Our rental team manages repairs, payments and tenants for landlords. Most of our homes sell within six weeks, often above the asking price. Neighbourhood guides cover transport, schools and things to do. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Most of our homes sell within six weeks, often above the asking price. Honest advice comes first, even when it means waiting for the right home.</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. We keep things simple, so you can focus on what matters to you. Every listing is checked by our team, so the photos match what you see in person. Our rental team manages repairs, payments and tenants for landlords.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Thousands of buyers already trust us, and we work hard to keep it that way. Our local agents know every street, school and coffee shop in the area. 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

Renting versus buying: what makes sense now

Mortgage advisors help you understand what you can afford before you start. Neighbourhood guides cover transport, schools and things to do. We handle the paperwork, so you can focus on planning the move.

2024

Buying a building plot: what to check first

We measure success by how many buyers come back and tell their friends. Get a free, no-obligation valuation of your home within 48 hours. Sellers get professional photos, floor plans and a marketing plan included.

2025

What our buyers asked us most

Clear prices, honest advice and no surprises along the way. Book viewings online and take a 3D tour before you leave the house. Price alerts tell you the moment a home that fits your search comes on the market.

2026

A beginner's guide to getting started

Get a free, no-obligation valuation of your home within 48 hours. Mortgage advisors help you understand what you can afford before you start. Start in minutes and get help from a real person whenever you need it. Every listing is checked by our team, so the photos match what you see in person.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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">Renting versus buying: what makes sense now</h3>
    <p class="small mb-0">Mortgage advisors help you understand what you can afford before you start. Neighbourhood guides cover transport, schools and things to do. We handle the paperwork, so you can focus on planning the move.</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">Buying a building plot: what to check first</h3>
    <p class="small mb-0">We measure success by how many buyers come back and tell their friends. Get a free, no-obligation valuation of your home within 48 hours. Sellers get professional photos, floor plans and a marketing plan included.</p>
  </div>
  <div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">What our buyers asked us most</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. Book viewings online and take a 3D tour before you leave the house. Price alerts tell you the moment a home that fits your search comes on the market.</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">Get a free, no-obligation valuation of your home within 48 hours. Mortgage advisors help you understand what you can afford before you start. Start in minutes and get help from a real person whenever you need it. Every listing is checked by our team, so the photos match what you see in person.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our favourite tips for busy weeks?: Price alerts tell you the moment a home that fits your search comes on the market.
The small habits that make a big difference?: Our rental team manages repairs, payments and tenants for landlords.
The best neighbourhoods for families this year?: Neighbourhood guides cover transport, schools and things to do.

Shipping

Looking back at a busy season?: We measure success by how many buyers come back and tell their friends.
How our valuations work?: Thousands of buyers already trust us, and we work hard to keep it that way.
How to prepare your home for a quick sale?: Most of our homes sell within six weeks, often above the asking price.

Returns

What really affects the value of your home?: Every detail is handled by people who care about getting it right.
A first-time buyer's checklist?: Clear prices, honest advice and no surprises along the way.
Five things we learned this year?: We listen first, then build a plan around what you actually need.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-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">Price alerts tell you the moment a home that fits your search comes on the market.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Our rental team manages repairs, payments and tenants for landlords.</dd>
          <dt class="small">The best neighbourhoods for families this year?</dt>
          <dd class="small text-body-secondary">Neighbourhood guides cover transport, schools and things to do.</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">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">We measure success by how many buyers come back and tell their friends.</dd>
          <dt class="small">How our valuations work?</dt>
          <dd class="small text-body-secondary">Thousands of buyers already trust us, and we work hard to keep it that way.</dd>
          <dt class="small">How to prepare your home for a quick sale?</dt>
          <dd class="small text-body-secondary">Most of our homes sell within six weeks, often above the asking price.</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">What really affects the value of your home?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">A first-time buyer&#39;s checklist?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Book viewings online and take a 3D tour before you leave the house. We keep things simple, so you can focus on what matters to you. We handle the paperwork, so you can focus on planning the move.

Battery

Our team has done this many times, so you never have to guess. Honest advice comes first, even when it means waiting for the right home. Friendly people answer your questions quickly, by phone, chat or email.

Connectivity

Our local agents know every street, school and coffee shop in the area. Sellers get professional photos, floor plans and a marketing plan included. Our rental team manages repairs, payments and tenants for landlords.

Security

Mortgage advisors help you understand what you can afford before you start. Every detail is handled by people who care about getting it right. Every listing is checked by our team, so the photos match what you see in person. We listen first, then build a plan around what you actually need.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Book viewings online and take a 3D tour before you leave the house. We keep things simple, so you can focus on what matters to you. We handle the paperwork, so you can focus on planning the move.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Honest advice comes first, even when it means waiting for the right home. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Our local agents know every street, school and coffee shop in the area. Sellers get professional photos, floor plans and a marketing plan included. Our rental team manages repairs, payments and tenants for landlords.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Mortgage advisors help you understand what you can afford before you start. Every detail is handled by people who care about getting it right. Every listing is checked by our team, so the photos match what you see in person. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$14.93 / mo

3D tours
Verified listings
Price alerts

Team

$35.30 / mo

Verified listings
Price alerts
3D tours

Business

$70.73 / mo

Fast paperwork
3D tours
Fast paperwork

<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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-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">$14.93<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>3D tours</li>
        <li>Verified listings</li>
        <li>Price alerts</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.30<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Verified listings</li>
        <li>Price alerts</li>
        <li>3D tours</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">$70.73<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Fast paperwork</li>
        <li>3D tours</li>
        <li>Fast paperwork</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Ten questions to ask at a viewing

We handle the paperwork, so you can focus on planning the move. Start in minutes and get help from a real person whenever you need it. Neighbourhood guides cover transport, schools and things to do.

Honest advice comes first, even when it means waiting for the right home. We measure success by how many buyers come back and tell their friends. Most of our homes sell within six weeks, often above the asking price. Thousands of buyers already trust us, and we work hard to keep it that way.

Chapter 2: How to choose the right property

Our local agents know every street, school and coffee shop in the area. Sellers get professional photos, floor plans and a marketing plan included. Book viewings online and take a 3D tour before you leave the house.

Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Get a free, no-obligation valuation of your home within 48 hours. Price alerts tell you the moment a home that fits your search comes on the market.

Chapter 3: Staging tips that help homes sell faster

Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Get a free, no-obligation valuation of your home within 48 hours. Most of our homes sell within six weeks, often above the asking price.

Honest advice comes first, even when it means waiting for the right home. Neighbourhood guides cover transport, schools and things to do. Friendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.

Chapter 4: How we sold a lake cottage in nine days

We measure success by how many buyers come back and tell their friends. Our local agents know every street, school and coffee shop in the area. Clear prices, honest advice and no surprises along the way. Thousands of buyers already trust us, and we work hard to keep it that way.

Sellers get professional photos, floor plans and a marketing plan included. 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.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: Ten questions to ask at a viewing</h3>
    <p class="small">We handle the paperwork, so you can focus on planning the move. Start in minutes and get help from a real person whenever you need it. Neighbourhood guides cover transport, schools and things to do.</p>
    <p class="small">Honest advice comes first, even when it means waiting for the right home. We measure success by how many buyers come back and tell their friends. Most of our homes sell within six weeks, often above the asking price. Thousands of buyers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: How to choose the right property</h3>
    <p class="small">Our local agents know every street, school and coffee shop in the area. Sellers get professional photos, floor plans and a marketing plan included. Book viewings online and take a 3D tour before you leave the house.</p>
    <p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Get a free, no-obligation valuation of your home within 48 hours. Price alerts tell you the moment a home that fits your search comes on the market.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Staging tips that help homes sell faster</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Get a free, no-obligation valuation of your home within 48 hours. Most of our homes sell within six weeks, often above the asking price.</p>
    <p class="small">Honest advice comes first, even when it means waiting for the right home. Neighbourhood guides cover transport, schools and things to do. Friendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: How we sold a lake cottage in nine days</h3>
    <p class="small">We measure success by how many buyers come back and tell their friends. Our local agents know every street, school and coffee shop in the area. Clear prices, honest advice and no surprises along the way. Thousands of buyers already trust us, and we work hard to keep it that way.</p>
    <p class="small">Sellers get professional photos, floor plans and a marketing plan included. 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>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

We handle the paperwork, so you can focus on planning the move. Mortgage advisors help you understand what you can afford before you start. We keep things simple, so you can focus on what matters to you. Our rental team manages repairs, payments and tenants for landlords.

Notifications

Product news

Weekly digest

Price alerts tell you the moment a home that fits your search comes on the market. Start in minutes and get help from a real person whenever you need it. Every listing is checked by our team, so the photos match what you see in person. We listen first, then build a plan around what you actually need.

Privacy

Hide my profile from search

Clear prices, honest advice and no surprises along the way. We handle the paperwork, so you can focus on planning the move. We listen first, then build a plan around what you actually need. Book viewings online and take a 3D tour before you leave the house.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Noah Ortega">
        </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="Vancouver">
        </div>
        <p class="small">We handle the paperwork, so you can focus on planning the move. Mortgage advisors help you understand what you can afford before you start. We keep things simple, so you can focus on what matters to you. Our rental team manages repairs, payments and tenants for landlords.</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">Price alerts tell you the moment a home that fits your search comes on the market. Start in minutes and get help from a real person whenever you need it. Every listing is checked by our team, so the photos match what you see in person. We listen first, then build a plan around what you actually need.</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">Clear prices, honest advice and no surprises along the way. We handle the paperwork, so you can focus on planning the move. We listen first, then build a plan around what you actually need. Book viewings online and take a 3D tour before you leave the house.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Sofia Silva
QA Engineer
Liam Fischer
Marketing Lead
Arjun Silva
Backend Engineer

Sales

Kai Duarte
Finance Lead
Elena Ortega
QA Engineer
Mia Larsen
Marketing Lead

Marketing

Lea Okafor
Backend Engineer
Noah Quinn
Frontend Engineer
Diego Lindqvist
Marketing Lead

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Marketing</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Finance</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Sofia Silva"><div><div class="small fw-semibold">Sofia Silva</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-9.svg" class="rounded-circle" width="36" height="36" alt="Liam Fischer"><div><div class="small fw-semibold">Liam Fischer</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Arjun Silva"><div><div class="small fw-semibold">Arjun Silva</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" 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-9.svg" class="rounded-circle" width="36" height="36" alt="Kai Duarte"><div><div class="small fw-semibold">Kai Duarte</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-12.svg" class="rounded-circle" width="36" height="36" alt="Elena Ortega"><div><div class="small fw-semibold">Elena Ortega</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Mia Larsen"><div><div class="small fw-semibold">Mia Larsen</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Lea Okafor"><div><div class="small fw-semibold">Lea Okafor</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Noah Quinn"><div><div class="small fw-semibold">Noah Quinn</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-7.svg" class="rounded-circle" width="36" height="36" alt="Diego Lindqvist"><div><div class="small fw-semibold">Diego Lindqvist</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Apartments

Seaside villa$2,060,000
Studio apartment$320,000
Corner office$960,000

Land

Family house$830,000
Seaside villa$2,015,000
Townhouse$725,000

Villas

Country farmhouse$885,000
Seaside villa$2,080,000
Lake cottage$580,000

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Apartments</a><a class="nav-link" href="#spy-1203">Land</a><a class="nav-link" href="#spy-1204">Villas</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Apartments</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Seaside villa</span><span class="fw-semibold">$2,060,000</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Studio apartment</span><span class="fw-semibold">$320,000</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Corner office</span><span class="fw-semibold">$960,000</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Land</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Family house</span><span class="fw-semibold">$830,000</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Seaside villa</span><span class="fw-semibold">$2,015,000</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Townhouse</span><span class="fw-semibold">$725,000</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Villas</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Country farmhouse</span><span class="fw-semibold">$885,000</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Seaside villa</span><span class="fw-semibold">$2,080,000</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Lake cottage</span><span class="fw-semibold">$580,000</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Honest advice comes first, even when it means waiting for the right home. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.

This week

Every listing is checked by our team, so the photos match what you see in person. Our local agents know every street, school and coffee shop in the area. We measure success by how many buyers come back and tell their friends.

Later

Thousands of buyers already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Our rental team manages repairs, payments and tenants for landlords.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Honest advice comes first, even when it means waiting for the right home. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Every listing is checked by our team, so the photos match what you see in person. Our local agents know every street, school and coffee shop in the area. We measure success by how many buyers come back and tell their friends.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Thousands of buyers already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Our rental team manages repairs, payments and tenants for landlords.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Price alerts tell you the moment a home that fits your search comes on the market. Most of our homes sell within six weeks, often above the asking price. 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.

Orbit

Get a free, no-obligation valuation of your home within 48 hours. Neighbourhood guides cover transport, schools and things to do. Mortgage advisors help you understand what you can afford before you start.

Landing

Sellers get professional photos, floor plans and a marketing plan included. We keep things simple, so you can focus on what matters to you. Get a free, no-obligation valuation of your home within 48 hours.

<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Price alerts tell you the moment a home that fits your search comes on the market. Most of our homes sell within six weeks, often above the asking price. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Get a free, no-obligation valuation of your home within 48 hours. Neighbourhood guides cover transport, schools and things to do. Mortgage advisors help you understand what you can afford before you start.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Sellers get professional photos, floor plans and a marketing plan included. We keep things simple, so you can focus on what matters to you. Get a free, no-obligation valuation of your home within 48 hours.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Mar 5, 2026

NewBook viewings online and take a 3D tour before you leave the house.
ImprovedSellers get professional photos, floor plans and a marketing plan included.
FixedNeighbourhood guides cover transport, schools and things to do.

v3.1 Aug 27, 2026

NewMortgage advisors help you understand what you can afford before you start.
ImprovedMost of our homes sell within six weeks, often above the asking price.
FixedWe listen first, then build a plan around what you actually need.

v3.0 Dec 22, 2025

NewStart in minutes and get help from a real person whenever you need it.
ImprovedOur local agents know every street, school and coffee shop in the area.
FixedHonest advice comes first, even when it means waiting for the right home.

v2.9 Apr 17, 2026

NewWe handle the paperwork, so you can focus on planning the move.
ImprovedPrice alerts tell you the moment a home that fits your search comes on the market.
FixedWe measure success by how many buyers come back and tell their friends.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Mar 5, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Book viewings online and take a 3D tour before you leave the house.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Sellers get professional photos, floor plans and a marketing plan included.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Neighbourhood guides cover transport, schools and things to do.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Aug 27, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Mortgage advisors help you understand what you can afford before you start.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Most of our homes sell within six weeks, often above the asking price.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Dec 22, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our local agents know every street, school and coffee shop in the area.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Honest advice comes first, even when it means waiting for the right home.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Apr 17, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We handle the paperwork, so you can focus on planning the move.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Price alerts tell you the moment a home that fits your search comes on the market.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many buyers come back and tell their friends.</li>
        </ul>
      </div>
    </div>
  </div>
</div>