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

Start in minutes and get help from a real person whenever you need it. From city breaks to safaris, we plan trips around how you like to travel. Travel insurance and car rental can be added in a single click. Our travel experts are on call around the clock while you are away.

Every hotel on our list is visited and reviewed by our own travel team. Every trip supports local businesses and responsible tourism. Members get room upgrades and late check-out at selected hotels. Thousands of travellers already trust us, and we work hard to keep it that way.

Details

Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Local guides show you the places that never make it into guidebooks.

Flexible dates help you find quieter weeks and better prices. Family rooms, adults-only retreats and pet-friendly stays in one search. We keep things simple, so you can focus on what matters to you. We measure success by how many travellers come back and tell their friends.

Pricing

Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Family rooms, adults-only retreats and pet-friendly stays in one search.

Every hotel on our list is visited and reviewed by our own travel team. We listen first, then build a plan around what you actually need. We measure success by how many travellers come back and tell their friends. We find the best price, and if you see it cheaper we match it.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Halois Co</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">Start in minutes and get help from a real person whenever you need it. From city breaks to safaris, we plan trips around how you like to travel. Travel insurance and car rental can be added in a single click. Our travel experts are on call around the clock while you are away.</p>
    <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Every trip supports local businesses and responsible tourism. Members get room upgrades and late check-out at selected hotels. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Local guides show you the places that never make it into guidebooks.</p>
    <p class="small">Flexible dates help you find quieter weeks and better prices. Family rooms, adults-only retreats and pet-friendly stays in one search. We keep things simple, so you can focus on what matters to you. We measure success by how many travellers come back and tell their friends.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
    <p class="small">Every hotel on our list is visited and reviewed by our own travel team. We listen first, then build a plan around what you actually need. We measure success by how many travellers come back and tell their friends. We find the best price, and if you see it cheaper we match it.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Every trip supports local businesses and responsible tourism. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.

Step two

Our travel experts are on call around the clock while you are away. Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.

Step three

Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive. From city breaks to safaris, we plan trips around how you like to travel.

Step four

Travel insurance and car rental can be added in a single click. Flexible dates help you find quieter weeks and better prices. Local guides show you the places that never make it into guidebooks. Every detail is handled by people who care about getting it right.

<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">Every trip supports local businesses and responsible tourism. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Our travel experts are on call around the clock while you are away. Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive. From city breaks to safaris, we plan trips around how you like to travel.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Travel insurance and car rental can be added in a single click. Flexible dates help you find quieter weeks and better prices. Local guides show you the places that never make it into guidebooks. Every detail is handled by people who care about getting it right.</p>
  </div>
</div>

3Vertical pills

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

Hotel booking

Thousands of travellers already trust us, and we work hard to keep it that way. Every hotel on our list is visited and reviewed by our own travel team. Every trip supports local businesses and responsible tourism. Travel insurance and car rental can be added in a single click.

Guided tours

Friendly people answer your questions quickly, by phone, chat or email. We find the best price, and if you see it cheaper we match it. Members get room upgrades and late check-out at selected hotels.

Travel insurance

Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive. From city breaks to safaris, we plan trips around how you like to travel.

Questions

We keep things simple, so you can focus on what matters to you. Free cancellation on most stays means you can book now and decide later. Flexible dates help you find quieter weeks and better prices. Clear prices, honest advice and no surprises along the way.

<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">Hotel booking</a><a class="nav-link" href="#spy-1132">Guided tours</a><a class="nav-link" href="#spy-1133">Travel insurance</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">Hotel booking</h3>
        <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way. Every hotel on our list is visited and reviewed by our own travel team. Every trip supports local businesses and responsible tourism. Travel insurance and car rental can be added in a single click.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Guided tours</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We find the best price, and if you see it cheaper we match it. Members get room upgrades and late check-out at selected hotels.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Travel insurance</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Free cancellation on most stays means you can book now and decide later. Flexible dates help you find quieter weeks and better prices. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our travel experts are on call around the clock while you are away. We measure success by how many travellers come back and tell their friends.

Install

Thousands of travellers already trust us, and we work hard to keep it that way. Family rooms, adults-only retreats and pet-friendly stays in one search. Local guides show you the places that never make it into guidebooks. Start in minutes and get help from a real person whenever you need it.

Configure

Clear prices, honest advice and no surprises along the way. Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism.

Usage

Our travel experts are on call around the clock while you are away. We measure success by how many travellers come back and tell their friends. Family rooms, adults-only retreats and pet-friendly stays in one search. We listen first, then build a plan around what you actually need.

Examples

Flexible dates help you find quieter weeks and better prices. Thousands of travellers already trust us, and we work hard to keep it that way. From city breaks to safaris, we plan trips around how you like to travel. We find the best price, and if you see it cheaper we match it.

<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 listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our travel experts are on call around the clock while you are away. We measure success by how many travellers come back and tell their friends.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way. Family rooms, adults-only retreats and pet-friendly stays in one search. Local guides show you the places that never make it into guidebooks. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Our travel experts are on call around the clock while you are away. We measure success by how many travellers come back and tell their friends. Family rooms, adults-only retreats and pet-friendly stays in one search. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. Thousands of travellers already trust us, and we work hard to keep it that way. From city breaks to safaris, we plan trips around how you like to travel. We find the best price, and if you see it cheaper we match it.</p>
      </div>
    </div>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

We keep things simple, so you can focus on what matters to you. Airport transfers, tours and dinners are arranged before you arrive. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.

Midday

Our team has done this many times, so you never have to guess. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks.

Afternoon

Every hotel on our list is visited and reviewed by our own travel team. Start in minutes and get help from a real person whenever you need it. Our travel experts are on call around the clock while you are away. Friendly people answer your questions quickly, by phone, chat or email.

Evening

Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks. Free cancellation on most stays means you can book now and decide later.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Airport transfers, tours and dinners are arranged before you arrive. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Start in minutes and get help from a real person whenever you need it. Our travel experts are on call around the clock while you are away. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks. Free cancellation on most stays means you can book now and decide later.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Every trip supports local businesses and responsible tourism. We measure success by how many travellers come back and tell their friends. We find the best price, and if you see it cheaper we match it.

Beta

Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.

Gamma

Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way. Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click.

<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">Every trip supports local businesses and responsible tourism. We measure success by how many travellers come back and tell their friends. We find the best price, and if you see it cheaper we match it.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way. Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

We listen first, then build a plan around what you actually need. Members get room upgrades and late check-out at selected hotels. Family rooms, adults-only retreats and pet-friendly stays in one search.

Features

From city breaks to safaris, we plan trips around how you like to travel. Every hotel on our list is visited and reviewed by our own travel team. Clear prices, honest advice and no surprises along the way.

Reviews

Our travel experts are on call around the clock while you are away. Flexible dates help you find quieter weeks and better prices. Start in minutes and get help from a real person whenever you need it. Every hotel on our list is visited and reviewed by our own travel team.

FAQ

Family rooms, adults-only retreats and pet-friendly stays in one search. 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 travellers come back and tell their friends.

<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">We listen first, then build a plan around what you actually need. Members get room upgrades and late check-out at selected hotels. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">From city breaks to safaris, we plan trips around how you like to travel. Every hotel on our list is visited and reviewed by our own travel team. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our travel experts are on call around the clock while you are away. Flexible dates help you find quieter weeks and better prices. Start in minutes and get help from a real person whenever you need it. Every hotel on our list is visited and reviewed by our own travel team.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Family rooms, adults-only retreats and pet-friendly stays in one search. 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 travellers come back and tell their friends.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Free cancellation on most stays means you can book now and decide later. We keep things simple, so you can focus on what matters to you. Airport transfers, tours and dinners are arranged before you arrive. Local guides show you the places that never make it into guidebooks.

Background

Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. From city breaks to safaris, we plan trips around how you like to travel. Every trip supports local businesses and responsible tourism.

Method

We find the best price, and if you see it cheaper we match it. Travel insurance and car rental can be added in a single click. Members get room upgrades and late check-out at selected hotels.

Results

Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way. Free cancellation on most stays means you can book now and decide later.

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">Free cancellation on most stays means you can book now and decide later. We keep things simple, so you can focus on what matters to you. Airport transfers, tours and dinners are arranged before you arrive. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. From city breaks to safaris, we plan trips around how you like to travel. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">We find the best price, and if you see it cheaper we match it. Travel insurance and car rental can be added in a single click. Members get room upgrades and late check-out at selected hotels.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way. Free cancellation on most stays means you can book now and decide later.</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

Family rooms, adults-only retreats and pet-friendly stays in one search. From city breaks to safaris, we plan trips around how you like to travel. 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.

Set up your profile

Every hotel on our list is visited and reviewed by our own travel team. We measure success by how many travellers come back and tell their friends. Every trip supports local businesses and responsible tourism. We listen first, then build a plan around what you actually need.

Invite the team

Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Travel insurance and car rental can be added in a single click.

Go live

Members get room upgrades and late check-out at selected hotels. Local guides show you the places that never make it into guidebooks. We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive.

<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">Family rooms, adults-only retreats and pet-friendly stays in one search. From city breaks to safaris, we plan trips around how you like to travel. 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-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. We measure success by how many travellers come back and tell their friends. Every trip supports local businesses and responsible tourism. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</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. Travel insurance and car rental can be added in a single click.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Members get room upgrades and late check-out at selected hotels. Local guides show you the places that never make it into guidebooks. We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Three days in Lisbon, hour by hour

Friendly people answer your questions quickly, by phone, chat or email. Thousands of travellers already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Flexible dates help you find quieter weeks and better prices.

2024

How to travel more responsibly

Our travel experts are on call around the clock while you are away. Thousands of travellers already trust us, and we work hard to keep it that way. From city breaks to safaris, we plan trips around how you like to travel. Our travel experts are on call around the clock while you are away.

2025

Five things we learned this year

Every trip supports local businesses and responsible tourism. Family rooms, adults-only retreats and pet-friendly stays in one search. Members get room upgrades and late check-out at selected hotels.

2026

Ten weekend escapes within two hours of home

Our team has done this many times, so you never have to guess. We find the best price, and if you see it cheaper we match it. Travel insurance and car rental can be added in a single click. We keep things simple, so you can focus on what matters to you.

<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">Three days in Lisbon, hour by hour</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Thousands of travellers already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Flexible dates help you find quieter weeks and better prices.</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 travel more responsibly</h3>
    <p class="small mb-0">Our travel experts are on call around the clock while you are away. Thousands of travellers already trust us, and we work hard to keep it that way. From city breaks to safaris, we plan trips around how you like to travel. Our travel experts are on call around the clock while you are away.</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">Five things we learned this year</h3>
    <p class="small mb-0">Every trip supports local businesses and responsible tourism. Family rooms, adults-only retreats and pet-friendly stays in one search. Members get room upgrades and late check-out at selected hotels.</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">Ten weekend escapes within two hours of home</h3>
    <p class="small mb-0">Our team has done this many times, so you never have to guess. We find the best price, and if you see it cheaper we match it. Travel insurance and car rental can be added in a single click. We keep things simple, so you can focus on what matters to you.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our favourite tips for busy weeks?: We listen first, then build a plan around what you actually need.
What our travellers asked us most?: We measure success by how many travellers come back and tell their friends.
A first-timer's guide to safari?: Flexible dates help you find quieter weeks and better prices.

Shipping

Looking back at a busy season?: Local guides show you the places that never make it into guidebooks.
Hidden beaches of the Mediterranean?: Every detail is handled by people who care about getting it right.
A beginner's guide to getting started?: Airport transfers, tours and dinners are arranged before you arrive.

Returns

Behind the scenes with our hotel inspectors?: Start in minutes and get help from a real person whenever you need it.
How to choose the right trip?: Clear prices, honest advice and no surprises along the way.
The small habits that make a big difference?: Free cancellation on most stays means you can book now and decide later.

<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">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">What our travellers asked us most?</dt>
          <dd class="small text-body-secondary">We measure success by how many travellers come back and tell their friends.</dd>
          <dt class="small">A first-timer&#39;s guide to safari?</dt>
          <dd class="small text-body-secondary">Flexible dates help you find quieter weeks and better prices.</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">Local guides show you the places that never make it into guidebooks.</dd>
          <dt class="small">Hidden beaches of the Mediterranean?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Airport transfers, tours and dinners are arranged before you arrive.</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">Behind the scenes with our hotel inspectors?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">How to choose the right trip?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Free cancellation on most stays means you can book now and decide later.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Every hotel on our list is visited and reviewed by our own travel team. Friendly people answer your questions quickly, by phone, chat or email. Free cancellation on most stays means you can book now and decide later. We keep things simple, so you can focus on what matters to you.

Battery

Clear prices, honest advice and no surprises along the way. Every trip supports local businesses and responsible tourism. Start in minutes and get help from a real person whenever you need it. Thousands of travellers already trust us, and we work hard to keep it that way.

Connectivity

Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Flexible dates help you find quieter weeks and better prices.

Security

Our team has done this many times, so you never have to guess. Family rooms, adults-only retreats and pet-friendly stays in one search. Every hotel on our list is visited and reviewed by our own travel team. We find the best price, and if you see it cheaper we match it.

<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">Every hotel on our list is visited and reviewed by our own travel team. Friendly people answer your questions quickly, by phone, chat or email. Free cancellation on most stays means you can book now and decide later. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Every trip supports local businesses and responsible tourism. Start in minutes and get help from a real person whenever you need it. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Flexible dates help you find quieter weeks and better prices.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Family rooms, adults-only retreats and pet-friendly stays in one search. Every hotel on our list is visited and reviewed by our own travel team. We find the best price, and if you see it cheaper we match it.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$19.42 / mo

Free cancellation
24/7 assistance
Best price guarantee

Team

$34.95 / mo

Best price guarantee
24/7 assistance
24/7 assistance

Business

$55.18 / mo

Best price guarantee
Best price guarantee
Curated stays

<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">$19.42<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Free cancellation</li>
        <li>24/7 assistance</li>
        <li>Best price guarantee</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">$34.95<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Best price guarantee</li>
        <li>24/7 assistance</li>
        <li>24/7 assistance</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">$55.18<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Best price guarantee</li>
        <li>Best price guarantee</li>
        <li>Curated stays</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: The best time of year to visit Japan

Members get room upgrades and late check-out at selected hotels. We measure success by how many travellers come back and tell their friends. From city breaks to safaris, we plan trips around how you like to travel. Travel insurance and car rental can be added in a single click.

Friendly people answer your questions quickly, by phone, chat or email. Our travel experts are on call around the clock while you are away. Local guides show you the places that never make it into guidebooks.

Chapter 2: Travelling with kids: our tried and tested tips

Airport transfers, tours and dinners are arranged before you arrive. Our team has done this many times, so you never have to guess. Every trip supports local businesses and responsible tourism.

Every hotel on our list is visited and reviewed by our own travel team. We listen first, then build a plan around what you actually need. We find the best price, and if you see it cheaper we match it. We keep things simple, so you can focus on what matters to you.

Chapter 3: How to pack for two weeks with one bag

Start in minutes and get help from a real person whenever you need it. Flexible dates help you find quieter weeks and better prices. Thousands of travellers already trust us, and we work hard to keep it that way.

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Airport transfers, tours and dinners are arranged before you arrive.

Chapter 4: Our favourite small hotels this year

We measure success by how many travellers come back and tell their friends. Members get room upgrades and late check-out at selected hotels. Family rooms, adults-only retreats and pet-friendly stays in one search. Free cancellation on most stays means you can book now and decide later.

Our travel experts are on call around the clock while you are away. From city breaks to safaris, we plan trips around how you like to travel. Local guides show you the places that never make it into guidebooks. Friendly people answer your questions quickly, by phone, chat or email.

<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: The best time of year to visit Japan</h3>
    <p class="small">Members get room upgrades and late check-out at selected hotels. We measure success by how many travellers come back and tell their friends. From city breaks to safaris, we plan trips around how you like to travel. Travel insurance and car rental can be added in a single click.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our travel experts are on call around the clock while you are away. Local guides show you the places that never make it into guidebooks.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Travelling with kids: our tried and tested tips</h3>
    <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Our team has done this many times, so you never have to guess. Every trip supports local businesses and responsible tourism.</p>
    <p class="small">Every hotel on our list is visited and reviewed by our own travel team. We listen first, then build a plan around what you actually need. We find the best price, and if you see it cheaper we match it. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How to pack for two weeks with one bag</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Flexible dates help you find quieter weeks and better prices. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
    <p class="small">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Airport transfers, tours and dinners are arranged before you arrive.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Our favourite small hotels this year</h3>
    <p class="small">We measure success by how many travellers come back and tell their friends. Members get room upgrades and late check-out at selected hotels. Family rooms, adults-only retreats and pet-friendly stays in one search. Free cancellation on most stays means you can book now and decide later.</p>
    <p class="small">Our travel experts are on call around the clock while you are away. From city breaks to safaris, we plan trips around how you like to travel. Local guides show you the places that never make it into guidebooks. Friendly people answer your questions quickly, by phone, chat or email.</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

Travel insurance and car rental can be added in a single click. We measure success by how many travellers come back and tell their friends. Our travel experts are on call around the clock while you are away.

Notifications

Product news

Weekly digest

Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. From city breaks to safaris, we plan trips around how you like to travel.

Privacy

Hide my profile from search

Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.

<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="Freya Quinn">
        </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="Melbourne">
        </div>
        <p class="small">Travel insurance and car rental can be added in a single click. We measure success by how many travellers come back and tell their friends. Our travel experts are on call around the clock while you are away.</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">Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. From city breaks to safaris, we plan trips around how you like to travel.</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">Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. 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>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Legal

Mia Silva
Support Specialist
Lea Patel
Operations Manager
Mateo Silva
Finance Lead

Finance

Priya Haddad
Operations Manager
Ethan Moreau
Support Specialist
Liam Alvarez
Customer Success

Design

Omar Harlow
Data Analyst
Nora Mensah
Finance Lead
Ava Quinn
Data Analyst

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Design</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">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Mia Silva"><div><div class="small fw-semibold">Mia Silva</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Lea Patel"><div><div class="small fw-semibold">Lea Patel</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-6.svg" class="rounded-circle" width="36" height="36" alt="Mateo Silva"><div><div class="small fw-semibold">Mateo Silva</div><div class="small text-body-secondary">Finance Lead</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" 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="Priya Haddad"><div><div class="small fw-semibold">Priya Haddad</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-11.svg" class="rounded-circle" width="36" height="36" alt="Ethan Moreau"><div><div class="small fw-semibold">Ethan Moreau</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Liam Alvarez"><div><div class="small fw-semibold">Liam Alvarez</div><div class="small text-body-secondary">Customer Success</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Design</h3>
    <ul class="list-unstyled">
      <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="Omar Harlow"><div><div class="small fw-semibold">Omar Harlow</div><div class="small text-body-secondary">Data Analyst</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="Nora Mensah"><div><div class="small fw-semibold">Nora Mensah</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-10.svg" class="rounded-circle" width="36" height="36" alt="Ava Quinn"><div><div class="small fw-semibold">Ava Quinn</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Beach

Ski chalet$334.99
Mountain lodge$239.00
Ocean view suite$312.00

City

Vineyard stay$232.00
Old town walk$32.99
Food tour$76.00

Adventure

Mountain lodge$225.00
City break$219.00
Old town walk$34.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Beach</a><a class="nav-link" href="#spy-1203">City</a><a class="nav-link" href="#spy-1204">Adventure</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">Beach</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ski chalet</span><span class="fw-semibold">$334.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Mountain lodge</span><span class="fw-semibold">$239.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ocean view suite</span><span class="fw-semibold">$312.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">City</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vineyard stay</span><span class="fw-semibold">$232.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$32.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Food tour</span><span class="fw-semibold">$76.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Adventure</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Mountain lodge</span><span class="fw-semibold">$225.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>City break</span><span class="fw-semibold">$219.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$34.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

We keep things simple, so you can focus on what matters to you. Every trip supports local businesses and responsible tourism. Free cancellation on most stays means you can book now and decide later.

This week

Local guides show you the places that never make it into guidebooks. We find the best price, and if you see it cheaper we match it. Clear prices, honest advice and no surprises along the way.

Later

Every hotel on our list is visited and reviewed by our own travel team. Friendly people answer your questions quickly, by phone, chat or email. Flexible dates help you find quieter weeks and better prices. Thousands of travellers 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 keep things simple, so you can focus on what matters to you. Every trip supports local businesses and responsible tourism. Free cancellation on most stays means you can book now and decide later.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. We find the best price, and if you see it cheaper we match it. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Friendly people answer your questions quickly, by phone, chat or email. Flexible dates help you find quieter weeks and better prices. Thousands of travellers 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

Family rooms, adults-only retreats and pet-friendly stays in one search. From city breaks to safaris, we plan trips around how you like to travel. Family rooms, adults-only retreats and pet-friendly stays in one search. Free cancellation on most stays means you can book now and decide later.

Orbit

Our travel experts are on call around the clock while you are away. Airport transfers, tours and dinners are arranged before you arrive. Thousands of travellers already trust us, and we work hard to keep it that way.

Landing

Travel insurance and car rental can be added in a single click. Start in minutes and get help from a real person whenever you need it. Flexible dates help you find quieter weeks and better prices. Every detail is handled by people who care about getting it right.

<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">Family rooms, adults-only retreats and pet-friendly stays in one search. From city breaks to safaris, we plan trips around how you like to travel. Family rooms, adults-only retreats and pet-friendly stays in one search. Free cancellation on most stays means you can book now and decide later.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Our travel experts are on call around the clock while you are away. Airport transfers, tours and dinners are arranged before you arrive. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Travel insurance and car rental can be added in a single click. Start in minutes and get help from a real person whenever you need it. Flexible dates help you find quieter weeks and better prices. Every detail is handled by people who care about getting it right.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Sep 6, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedWe listen first, then build a plan around what you actually need.

v3.1 Nov 21, 2025

NewWe find the best price, and if you see it cheaper we match it.
ImprovedClear prices, honest advice and no surprises along the way.
FixedLocal guides show you the places that never make it into guidebooks.

v3.0 May 29, 2026

NewMembers get room upgrades and late check-out at selected hotels.
ImprovedEvery trip supports local businesses and responsible tourism.
FixedWe measure success by how many travellers come back and tell their friends.

v2.9 May 27, 2026

NewOur team has done this many times, so you never have to guess.
ImprovedEvery hotel on our list is visited and reviewed by our own travel team.
FixedClear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Sep 6, 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 keep things simple, so you can focus on what matters to you.</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-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Nov 21, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We find the best price, and if you see it cheaper we match it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Local guides show you the places that never make it into guidebooks.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">May 29, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Members get room upgrades and late check-out at selected hotels.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every trip supports local businesses and responsible tourism.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many travellers come back and tell their friends.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">May 27, 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>Every hotel on our list is visited and reviewed by our own travel team.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
    </div>
  </div>
</div>