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

Every trip supports local businesses and responsible tourism. Our team has done this many times, so you never have to guess. 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. Local guides show you the places that never make it into guidebooks. Family rooms, adults-only retreats and pet-friendly stays in one search.

Details

Every hotel on our list is visited and reviewed by our own travel team. Members get room upgrades and late check-out at selected hotels. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.

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

Pricing

We find the best price, and if you see it cheaper we match 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.

Airport transfers, tours and dinners are arranged before you arrive. 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. Clear prices, honest advice and no surprises along the way.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Fable</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">Every trip supports local businesses and responsible tourism. Our team has done this many times, so you never have to guess. 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. Local guides show you the places that never make it into guidebooks. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Members get room upgrades and late check-out at selected hotels. 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>
    <p class="small">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. From city breaks to safaris, we plan trips around how you like to travel.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">We find the best price, and if you see it cheaper we match 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">Airport transfers, tours and dinners are arranged before you arrive. 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. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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

Step two

Clear prices, honest advice and no surprises along the way. 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. Our team has done this many times, so you never have to guess.

Step three

Family rooms, adults-only retreats and pet-friendly stays in one search. Travel insurance and car rental can be added in a single click. Flexible dates help you find quieter weeks and better prices. Every trip supports local businesses and responsible tourism.

Step four

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. Friendly people answer your questions quickly, by phone, chat or email. From city breaks to safaris, we plan trips around how you like to travel.

<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">Friendly people answer your questions quickly, by phone, chat or email. 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 id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. 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. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Family rooms, adults-only retreats and pet-friendly stays in one search. Travel insurance and car rental can be added in a single click. Flexible dates help you find quieter weeks and better prices. Every trip supports local businesses and responsible tourism.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email. From city breaks to safaris, we plan trips around how you like to travel.</p>
  </div>
</div>

3Vertical pills

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

Airport transfers

We keep things simple, so you can focus on what matters to you. Airport transfers, tours and dinners are arranged before you arrive. Members get room upgrades and late check-out at selected hotels. Every detail is handled by people who care about getting it right.

Holiday packages

Start in minutes and get help from a real person whenever you need it. We find the best price, and if you see it cheaper we match it. We listen first, then build a plan around what you actually need.

Hotel booking

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. Travel insurance and car rental can be added in a single click. Airport transfers, tours and dinners are arranged before you arrive.

Questions

Our team has done this many times, so you never have to guess. 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. Family rooms, adults-only retreats and pet-friendly stays in one search.

<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">Airport transfers</a><a class="nav-link" href="#spy-1132">Holiday packages</a><a class="nav-link" href="#spy-1133">Hotel booking</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">Airport transfers</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. Members get room upgrades and late check-out at selected hotels. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Holiday packages</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. We find the best price, and if you see it cheaper we match it. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Hotel booking</h3>
        <p class="small">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. Travel insurance and car rental can be added in a single click. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Our team has done this many times, so you never have to guess. 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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Our travel experts are on call around the clock while you are away. Every trip supports local businesses and responsible tourism. We find the best price, and if you see it cheaper we match it. Every detail is handled by people who care about getting it right.

Install

Members get room upgrades and late check-out at selected hotels. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Flexible dates help you find quieter weeks and better prices.

Configure

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

Usage

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

Examples

Flexible dates help you find quieter weeks and better prices. 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. Local guides show you the places that never make it into guidebooks.

<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">Our travel experts are on call around the clock while you are away. Every trip supports local businesses and responsible tourism. We find the best price, and if you see it cheaper we match it. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Members get room upgrades and late check-out at selected hotels. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Flexible dates help you find quieter weeks and better prices.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">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. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. 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.</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. 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. Local guides show you the places that never make it into guidebooks.</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

Our travel experts are on call around the clock while you are away. We find the best price, and if you see it cheaper we match it. Family rooms, adults-only retreats and pet-friendly stays in one search.

Midday

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. Our team has done this many times, so you never have to guess.

Afternoon

Start in minutes and get help from a real person whenever you need it. Airport transfers, tours and dinners are arranged before you arrive. Every detail is handled by people who care about getting it right.

Evening

Travel insurance and car rental can be added in a single click. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.

<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">Our travel experts are on call around the clock while you are away. We find the best price, and if you see it cheaper we match it. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Airport transfers, tours and dinners are arranged before you arrive. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Travel insurance and car rental can be added in a single click. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.

Beta

Every detail is handled by people who care about getting it right. 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. We listen first, then build a plan around what you actually need.

Gamma

Local guides show you the places that never make it into guidebooks. Every trip supports local businesses and responsible tourism. 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.

<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">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. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Every detail is handled by people who care about getting it right. 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. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. Every trip supports local businesses and responsible tourism. 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.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive. From city breaks to safaris, we plan trips around how you like to travel. Members get room upgrades and late check-out at selected hotels.

Features

We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Every hotel on our list is visited and reviewed by our own travel team.

Reviews

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

FAQ

Family rooms, adults-only retreats and pet-friendly stays in one search. Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it. Every hotel on our list is visited and reviewed by our own travel team.

<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 find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive. From city breaks to safaris, we plan trips around how you like to travel. Members get room upgrades and late check-out at selected hotels.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Every hotel on our list is visited and reviewed by our own travel team.</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. Free cancellation on most stays means you can book now and decide later. We measure success by how many travellers come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.</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. Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it. Every hotel on our list is visited and reviewed by our own travel team.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

We measure success by how many travellers come back and tell their friends. 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. Our team has done this many times, so you never have to guess.

Background

Local guides show you the places that never make it into guidebooks. Our travel experts are on call around the clock while you are away. Every detail is handled by people who care about getting it right.

Method

Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email.

Results

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. Members get room upgrades and late check-out at selected hotels.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. 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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. Our travel experts are on call around the clock while you are away. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">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. Members get room upgrades and late check-out at selected hotels.</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. Free cancellation on most stays means you can book now and decide later. We listen first, then build a plan around what you actually need. Every trip supports local businesses and responsible tourism.

Set up your profile

From city breaks to safaris, we plan trips around how you like to travel. Thousands of travellers already trust us, and we work hard to keep it that way. Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it.

Invite the team

Every hotel on our list is visited and reviewed by our own travel team. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Local guides show you the places that never make it into guidebooks.

Go live

Free cancellation on most stays means you can book now and decide later. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.

<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. Free cancellation on most stays means you can book now and decide later. We listen first, then build a plan around what you actually need. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">From city breaks to safaris, we plan trips around how you like to travel. Thousands of travellers already trust us, and we work hard to keep it that way. Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Free cancellation on most stays means you can book now and decide later. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our favourite small hotels this year

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. Family rooms, adults-only retreats and pet-friendly stays in one search. Every trip supports local businesses and responsible tourism.

2024

A beginner's guide to getting started

Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. We measure success by how many travellers come back and tell their friends. Every detail is handled by people who care about getting it right.

2025

What our travellers asked us most

Our travel experts are on call around the clock while you are away. Start in minutes and get help from a real person whenever you need it. Members get room upgrades and late check-out at selected hotels.

2026

Ten weekend escapes within two hours of home

We measure success by how many travellers come back and tell their friends. Thousands of travellers already trust us, and we work hard to keep it that way. Travel insurance and car rental can be added in a single click. Free cancellation on most stays means you can book now and decide later.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Our favourite small hotels this year</h3>
    <p class="small mb-0">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. Family rooms, adults-only retreats and pet-friendly stays in one search. Every trip supports local businesses and responsible tourism.</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">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. We measure success by how many travellers come back and tell their friends. Every detail is handled by people who care about getting it right.</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 travellers asked us most</h3>
    <p class="small mb-0">Our travel experts are on call around the clock while you are away. Start in minutes and get help from a real person whenever you need it. 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">We measure success by how many travellers come back and tell their friends. Thousands of travellers already trust us, and we work hard to keep it that way. Travel insurance and car rental can be added in a single click. Free cancellation on most stays means you can book now and decide later.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

The small habits that make a big difference?: Our team has done this many times, so you never have to guess.
A first-timer's guide to safari?: Our travel experts are on call around the clock while you are away.
Hidden beaches of the Mediterranean?: From city breaks to safaris, we plan trips around how you like to travel.

Shipping

Travelling with kids: our tried and tested tips?: Airport transfers, tours and dinners are arranged before you arrive.
Three days in Lisbon, hour by hour?: We find the best price, and if you see it cheaper we match it.
The best time of year to visit Japan?: Clear prices, honest advice and no surprises along the way.

Returns

Our favourite tips for busy weeks?: Family rooms, adults-only retreats and pet-friendly stays in one search.
How to choose the right trip?: Every detail is handled by people who care about getting it right.
How to travel more responsibly?: Friendly people answer your questions quickly, by phone, chat or email.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills 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">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">A first-timer&#39;s guide to safari?</dt>
          <dd class="small text-body-secondary">Our travel experts are on call around the clock while you are away.</dd>
          <dt class="small">Hidden beaches of the Mediterranean?</dt>
          <dd class="small text-body-secondary">From city breaks to safaris, we plan trips around how you like to travel.</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">Travelling with kids: our tried and tested tips?</dt>
          <dd class="small text-body-secondary">Airport transfers, tours and dinners are arranged before you arrive.</dd>
          <dt class="small">Three days in Lisbon, hour by hour?</dt>
          <dd class="small text-body-secondary">We find the best price, and if you see it cheaper we match it.</dd>
          <dt class="small">The best time of year to visit Japan?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Family rooms, adults-only retreats and pet-friendly stays in one search.</dd>
          <dt class="small">How to choose the right trip?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">How to travel more responsibly?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Flexible dates help you find quieter weeks and better prices. Every trip supports local businesses and responsible tourism. Every hotel on our list is visited and reviewed by our own travel team.

Battery

Local guides show you the places that never make it into guidebooks. Members get room upgrades and late check-out at selected hotels. Start in minutes and get help from a real person whenever you need it.

Connectivity

We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. We measure success by how many travellers come back and tell their friends.

Security

Our travel experts are on call around the clock while you are away. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.

<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">Flexible dates help you find quieter weeks and better prices. Every trip supports local businesses and responsible tourism. Every hotel on our list is visited and reviewed by our own travel team.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. Members get room upgrades and late check-out at selected hotels. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. We measure success by how many travellers come back and tell their friends.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Our travel experts are on call around the clock while you are away. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$12.21 / mo

Best price guarantee
Local guides
Flexible dates

Team

$39.59 / mo

Free cancellation
Flexible dates
Local guides

Business

$54.74 / mo

Local guides
24/7 assistance
Local guides

<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
  <a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1180" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="fs-4 fw-bold mb-1">$12.21<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Best price guarantee</li>
        <li>Local guides</li>
        <li>Flexible dates</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">$39.59<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Free cancellation</li>
        <li>Flexible dates</li>
        <li>Local guides</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">$54.74<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Local guides</li>
        <li>24/7 assistance</li>
        <li>Local guides</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Behind the scenes with our hotel inspectors

Every hotel on our list is visited and reviewed by our own travel team. 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.

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. Travel insurance and car rental can be added in a single click.

Chapter 2: Looking back at a busy season

From city breaks to safaris, we plan trips around how you like to travel. Start in minutes and get help from a real person whenever you need it. Every trip supports local businesses and responsible tourism. Local guides show you the places that never make it into guidebooks.

Thousands of travellers already trust us, and we work hard to keep it that way. We find the best price, and if you see it cheaper we match it. Flexible dates help you find quieter weeks and better prices.

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

Members get room upgrades and late check-out at selected hotels. 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.

Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it. Thousands of travellers already trust us, and we work hard to keep it that way.

Chapter 4: Five things we learned this year

Local guides show you the places that never make it into guidebooks. Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later. Members get room upgrades and late check-out at selected hotels.

Every detail is handled by people who care about getting it right. We measure success by how many travellers come back and tell their friends. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.

<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: Behind the scenes with our hotel inspectors</h3>
    <p class="small">Every hotel on our list is visited and reviewed by our own travel team. 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">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. Travel insurance and car rental can be added in a single click.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Looking back at a busy season</h3>
    <p class="small">From city breaks to safaris, we plan trips around how you like to travel. Start in minutes and get help from a real person whenever you need it. Every trip supports local businesses and responsible tourism. Local guides show you the places that never make it into guidebooks.</p>
    <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way. We find the best price, and if you see it cheaper we match it. Flexible dates help you find quieter weeks and better prices.</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">Members get room upgrades and late check-out at selected hotels. 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.</p>
    <p class="small">Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Five things we learned this year</h3>
    <p class="small">Local guides show you the places that never make it into guidebooks. Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later. Members get room upgrades and late check-out at selected hotels.</p>
    <p class="small">Every detail is handled by people who care about getting it right. We measure success by how many travellers come back and tell their friends. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</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

Every hotel on our list is visited and reviewed by our own travel team. 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. From city breaks to safaris, we plan trips around how you like to travel.

Notifications

Product news

Weekly digest

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. Flexible dates help you find quieter weeks and better prices.

Privacy

Hide my profile from search

Every trip supports local businesses and responsible tourism. 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.

<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="Chloe Nguyen">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Seoul">
        </div>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. 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. From city breaks to safaris, we plan trips around how you like to travel.</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">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. Flexible dates help you find quieter weeks and better prices.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">Every trip supports local businesses and responsible tourism. 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>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Sales

Leo Tanaka
QA Engineer
Hana Brennan
QA Engineer
Priya Morgan
Customer Success

Finance

Ruby Lindqvist
Support Specialist
Mason Larsen
Project Manager
Chloe Novak
Backend Engineer

Human Resources

Ella Delgado
Data Analyst
Ivy Varga
Project Manager
Freya Ibrahim
Project Manager

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Human Resources</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Sales</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="Leo Tanaka"><div><div class="small fw-semibold">Leo Tanaka</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="Hana Brennan"><div><div class="small fw-semibold">Hana Brennan</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Priya Morgan"><div><div class="small fw-semibold">Priya Morgan</div><div class="small text-body-secondary">Customer Success</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-8.svg" class="rounded-circle" width="36" height="36" alt="Ruby Lindqvist"><div><div class="small fw-semibold">Ruby Lindqvist</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-1.svg" class="rounded-circle" width="36" height="36" alt="Mason Larsen"><div><div class="small fw-semibold">Mason Larsen</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Chloe Novak"><div><div class="small fw-semibold">Chloe Novak</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Ella Delgado"><div><div class="small fw-semibold">Ella Delgado</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-5.svg" class="rounded-circle" width="36" height="36" alt="Ivy Varga"><div><div class="small fw-semibold">Ivy Varga</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Freya Ibrahim"><div><div class="small fw-semibold">Freya Ibrahim</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Beach

Ski chalet$355.99
Northern lights trip$1,300
Safari adventure$1,800

Culture

Old town walk$36.00
Ocean view suite$311.99
Vineyard stay$199.00

City

Ski chalet$366.00
Food tour$84.00
Old town walk$35.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">Culture</a><a class="nav-link" href="#spy-1204">City</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">$355.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Northern lights trip</span><span class="fw-semibold">$1,300</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Safari adventure</span><span class="fw-semibold">$1,800</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Culture</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$36.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ocean view suite</span><span class="fw-semibold">$311.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vineyard stay</span><span class="fw-semibold">$199.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>Ski chalet</span><span class="fw-semibold">$366.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Food tour</span><span class="fw-semibold">$84.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$35.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

We listen first, then build a plan around what you actually need. Airport transfers, tours and dinners are arranged before you arrive. Family rooms, adults-only retreats and pet-friendly stays in one search.

This week

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

Later

Every hotel on our list is visited and reviewed by our own travel team. 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.

<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 listen first, then build a plan around what you actually need. Airport transfers, tours and dinners are arranged before you arrive. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</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. 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-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. 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>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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. Members get room upgrades and late check-out at selected hotels. We keep things simple, so you can focus on what matters to you.

Orbit

Every trip supports local businesses and responsible tourism. Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks.

Landing

Free cancellation on most stays means you can book now and decide later. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">We 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. Members get room upgrades and late check-out at selected hotels. We keep things simple, so you can focus on what matters to you.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Every trip supports local businesses and responsible tourism. Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Free cancellation on most stays means you can book now and decide later. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Mar 2, 2026

NewWe listen first, then build a plan around what you actually need.
ImprovedEvery detail is handled by people who care about getting it right.
FixedEvery trip supports local businesses and responsible tourism.

v3.1 Oct 16, 2026

NewFlexible dates help you find quieter weeks and better prices.
ImprovedFamily rooms, adults-only retreats and pet-friendly stays in one search.
FixedFree cancellation on most stays means you can book now and decide later.

v3.0 Dec 12, 2025

NewClear prices, honest advice and no surprises along the way.
ImprovedOur team has done this many times, so you never have to guess.
FixedThousands of travellers already trust us, and we work hard to keep it that way.

v2.9 Feb 23, 2026

NewLocal guides show you the places that never make it into guidebooks.
ImprovedEvery hotel on our list is visited and reviewed by our own travel team.
FixedFriendly people answer your questions quickly, by phone, chat or email.

<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">Mar 2, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every trip supports local businesses and responsible tourism.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 16, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Flexible dates help you find quieter weeks and better prices.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Family rooms, adults-only retreats and pet-friendly stays in one search.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Free cancellation on most stays means you can book now and decide later.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Dec 12, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of travellers already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 23, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Local guides show you the places that never make it into guidebooks.</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>Friendly people answer your questions quickly, by phone, chat or email.</li>
        </ul>
      </div>
    </div>
  </div>
</div>