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

Travel insurance and car rental can be added in a single click. Our team has done this many times, so you never have to guess. We measure success by how many travellers come back and tell their friends.

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

Details

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

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

Pricing

Clear prices, honest advice and no surprises along the way. Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later.

Start in minutes and get help from a real person whenever you need it. 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. Family rooms, adults-only retreats and pet-friendly stays in one search.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Museeon</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">Travel insurance and car rental can be added in a single click. Our team has done this many times, so you never have to guess. We measure success by how many travellers come back and tell their friends.</p>
    <p class="small">Every hotel on our list is visited and reviewed by our own travel team. 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.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click. Every detail is handled by people who care about getting it right.</p>
    <p class="small">Every trip supports local businesses and responsible tourism. 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.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later.</p>
    <p class="small">Start in minutes and get help from a real person whenever you need it. 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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Members get room upgrades and late check-out at selected hotels. Our travel experts are on call around the clock while you are away. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.

Step two

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

Step three

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

Step four

Local guides show you the places that never make it into guidebooks. Every detail is handled by people who care about getting it right. Family rooms, adults-only retreats and pet-friendly stays in one search. Every trip supports local businesses and responsible tourism.

<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">Members get room upgrades and late check-out at selected hotels. Our travel experts are on call around the clock while you are away. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">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. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Local guides show you the places that never make it into guidebooks. Every detail is handled by people who care about getting it right. Family rooms, adults-only retreats and pet-friendly stays in one search. Every trip supports local businesses and responsible tourism.</p>
  </div>
</div>

3Vertical pills

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

Holiday packages

Flexible dates help you find quieter weeks and better prices. We listen first, then build a plan around what you actually need. Free cancellation on most stays means you can book now and decide later.

Travel insurance

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

Hotel booking

We find the best price, and if you see it cheaper we match it. Our travel experts are on call around the clock while you are away. Members get room upgrades and late check-out at selected hotels. Friendly people answer your questions quickly, by phone, chat or email.

Questions

Every detail is handled by people who care about getting it right. Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism. 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-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Holiday packages</a><a class="nav-link" href="#spy-1132">Travel insurance</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">Holiday packages</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. We listen first, then build a plan around what you actually need. Free cancellation on most stays means you can book now and decide later.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Travel insurance</h3>
        <p class="small">Airport transfers, tours and dinners are arranged before you arrive. 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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Hotel booking</h3>
        <p class="small">We find the best price, and if you see it cheaper we match it. Our travel experts are on call around the clock while you are away. Members get room upgrades and late check-out at selected hotels. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism. Local guides show you the places that never make it into guidebooks.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Airport transfers, tours and dinners are arranged before you arrive. 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.

Install

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

Configure

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

Usage

We keep things simple, so you can focus on what matters to you. We find the best price, and if you see it cheaper we match it. Flexible dates help you find quieter weeks and better prices. We listen first, then build a plan around what you actually need.

Examples

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

<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">Airport transfers, tours and dinners are arranged before you arrive. 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.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. 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.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</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. 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.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. We find the best price, and if you see it cheaper we match it. Flexible dates help you find quieter weeks and better prices. 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">Thousands of travellers already trust us, and we work hard to keep it that way. 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>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

Every hotel on our list is visited and reviewed by our own travel team. Clear prices, honest advice and no surprises along the way. Family rooms, adults-only retreats and pet-friendly stays in one search.

Midday

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

Afternoon

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

Evening

Every trip supports local businesses and responsible tourism. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Travel insurance and car rental can be added in a single click.

<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">Every hotel on our list is visited and reviewed by our own travel team. Clear prices, honest advice and no surprises along the way. 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">Flexible dates help you find quieter weeks and better prices. 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.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">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. Members get room upgrades and late check-out at selected hotels.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Every trip supports local businesses and responsible tourism. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Travel insurance and car rental can be added in a single click.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Airport transfers, tours and dinners are arranged before you arrive. 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.

Beta

Free cancellation on most stays means you can book now and decide later. 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.

Gamma

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. Family rooms, adults-only retreats and pet-friendly stays in one search.

<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">Airport transfers, tours and dinners are arranged before you arrive. 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.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Free cancellation on most stays means you can book now and decide later. 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.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Every trip supports local businesses and responsible tourism. We find the best price, and if you see it cheaper we match it. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.

Features

Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. Local guides show you the places that never make it into guidebooks. From city breaks to safaris, we plan trips around how you like to travel.

Reviews

We listen first, then build a plan around what you actually need. 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. Free cancellation on most stays means you can book now and decide later.

FAQ

Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click.

<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">Every trip supports local businesses and responsible tourism. We find the best price, and if you see it cheaper we match it. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. Local guides show you the places that never make it into guidebooks. From city breaks to safaris, we plan trips around how you like to travel.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">We listen first, then build a plan around what you actually need. 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. Free cancellation on most stays means you can book now and decide later.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</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. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks. Members get room upgrades and late check-out at selected hotels.

Background

Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Airport transfers, tours and dinners are arranged before you arrive.

Method

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

Results

Every hotel on our list is visited and reviewed by our own travel team. 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. Clear prices, honest advice and no surprises along the way.

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">Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks. Members get room upgrades and late check-out at selected hotels.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Airport transfers, tours and dinners are arranged before you arrive.</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. Thousands of travellers already trust us, and we work hard to keep it that way. 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-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. 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. Clear prices, honest advice and no surprises along the way.</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

Every detail is handled by people who care about getting it right. Every trip supports local businesses and responsible tourism. Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click.

Set up your profile

We keep things simple, so you can focus on what matters to you. Our travel experts are on call around the clock while you are away. We listen first, then build a plan around what you actually need.

Invite the team

Free cancellation on most stays means you can book now and decide later. Start in minutes and get help from a real person whenever you need it. Local guides show you the places that never make it into guidebooks.

Go live

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

<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">Every detail is handled by people who care about getting it right. Every trip supports local businesses and responsible tourism. 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 id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Our travel experts are on call around the clock while you are away. 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">Free cancellation on most stays means you can book now and decide later. Start in minutes and get help from a real person whenever you need it. 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">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. 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>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Three days in Lisbon, hour by hour

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. From city breaks to safaris, we plan trips around how you like to travel. Airport transfers, tours and dinners are arranged before you arrive.

2024

Hidden beaches of the Mediterranean

Clear prices, honest advice and no surprises along the way. Every trip supports local businesses and responsible tourism. Travel insurance and car rental can be added in a single click.

2025

The small habits that make a big difference

Free cancellation on most stays means you can book now and decide later. Every hotel on our list is visited and reviewed by our own travel team. Our team has done this many times, so you never have to guess.

2026

Our favourite small hotels this year

We find the best price, and if you see it cheaper we match it. Our travel experts are on call around the clock while you are away. Flexible dates help you find quieter weeks and better prices.

<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">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. From city breaks to safaris, we plan trips around how you like to travel. Airport transfers, tours and dinners are arranged before you arrive.</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">Hidden beaches of the Mediterranean</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. 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-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">The small habits that make a big difference</h3>
    <p class="small mb-0">Free cancellation on most stays means you can book now and decide later. Every hotel on our list is visited and reviewed by our own travel team. Our team has done this many times, so you never have to guess.</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">Our favourite small hotels this year</h3>
    <p class="small mb-0">We find the best price, and if you see it cheaper we match it. 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>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

How to choose the right trip?: Friendly people answer your questions quickly, by phone, chat or email.
A first-timer's guide to safari?: Every detail is handled by people who care about getting it right.
Behind the scenes with our hotel inspectors?: Every hotel on our list is visited and reviewed by our own travel team.

Shipping

How to travel more responsibly?: Our travel experts are on call around the clock while you are away.
Our favourite tips for busy weeks?: From city breaks to safaris, we plan trips around how you like to travel.
What our travellers asked us most?: We keep things simple, so you can focus on what matters to you.

Returns

How to pack for two weeks with one bag?: Flexible dates help you find quieter weeks and better prices.
Looking back at a busy season?: Start in minutes and get help from a real person whenever you need it.
A beginner's guide to getting started?: Every detail is handled by people who care about getting it right.

<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-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">How to choose the right trip?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">A first-timer&#39;s guide to safari?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">Behind the scenes with our hotel inspectors?</dt>
          <dd class="small text-body-secondary">Every hotel on our list is visited and reviewed by our own travel team.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">How to travel more responsibly?</dt>
          <dd class="small text-body-secondary">Our travel experts are on call around the clock while you are away.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">From city breaks to safaris, we plan trips around how you like to travel.</dd>
          <dt class="small">What our travellers asked us most?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">How to pack for two weeks with one bag?</dt>
          <dd class="small text-body-secondary">Flexible dates help you find quieter weeks and better prices.</dd>
          <dt class="small">Looking back at a busy season?</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">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

We listen first, then build a plan around what you actually need. Every trip supports local businesses and responsible tourism. Travel insurance and car rental can be added in a single click.

Battery

Thousands of travellers already trust us, and we work hard to keep it that way. We measure success by how many travellers come back and tell their friends. Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it.

Connectivity

Friendly people answer your questions quickly, by phone, chat or email. Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way.

Security

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

<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-fill" 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">We listen first, then build a plan around what you actually need. 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-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way. We measure success by how many travellers come back and tell their friends. 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-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$10.53 / mo

24/7 assistance
Flexible dates
Curated stays

Team

$48.60 / mo

Curated stays
Local guides
Best price guarantee

Business

$77.52 / mo

Flexible dates
24/7 assistance
Free cancellation

<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">$10.53<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>24/7 assistance</li>
        <li>Flexible dates</li>
        <li>Curated stays</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">$48.60<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Curated stays</li>
        <li>Local guides</li>
        <li>Best price guarantee</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">$77.52<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Flexible dates</li>
        <li>24/7 assistance</li>
        <li>Free cancellation</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Five things we learned this year

Free cancellation on most stays means you can book now and decide later. We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive. Our team has done this many times, so you never have to guess.

Every detail is handled by people who care about getting it right. We 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. Free cancellation on most stays means you can book now and decide later.

Chapter 2: The best time of year to visit Japan

Clear prices, honest advice and no surprises along the way. 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.

We measure success by how many travellers come back and tell their friends. Local guides show you the places that never make it into guidebooks. We listen first, then build a plan around what you actually need.

Chapter 3: Ten weekend escapes within two hours of home

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. Family rooms, adults-only retreats and pet-friendly stays in one search.

Flexible dates help you find quieter weeks and better prices. Our travel experts are on call around the clock while you are away. Every trip supports local businesses and responsible tourism. Friendly people answer your questions quickly, by phone, chat or email.

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

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

Every trip supports local businesses and responsible tourism. Every detail is handled by people who care about getting it right. Flexible dates help you find quieter weeks and better prices.

<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: Five things we learned this year</h3>
    <p class="small">Free cancellation on most stays means you can book now and decide later. We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. From city breaks to safaris, we plan trips around how you like to travel. Free cancellation on most stays means you can book now and decide later.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: The best time of year to visit Japan</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. 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>
    <p class="small">We measure success by how many travellers come back and tell their friends. 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-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Ten weekend escapes within two hours of home</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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
    <p class="small">Flexible dates help you find quieter weeks and better prices. Our travel experts are on call around the clock while you are away. Every trip supports local businesses and responsible tourism. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Travelling with kids: our tried and tested tips</h3>
    <p class="small">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. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Every trip supports local businesses and responsible tourism. 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>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. Free cancellation on most stays means you can book now and decide later. Thousands of travellers already trust us, and we work hard to keep it that way.

Notifications

Product news

Weekly digest

We measure success by how many travellers come back and tell their friends. 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. Travel insurance and car rental can be added in a single click.

Privacy

Hide my profile from search

Members get room upgrades and late check-out at selected hotels. Family rooms, adults-only retreats and pet-friendly stays in one search. 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.

<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="Mateo Novak">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Vancouver">
        </div>
        <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. Free cancellation on most stays means you can book now and decide later. Thousands of travellers already trust us, and we work hard to keep it that way.</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">We measure success by how many travellers come back and tell their friends. 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. Travel insurance and car rental can be added in a single click.</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. Family rooms, adults-only retreats and pet-friendly stays in one search. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Human Resources

Noah Carter
Operations Manager
Jonah Moreau
Marketing Lead
Chloe Ortega
Operations Manager

Customer Support

Arjun Rossi
Backend Engineer
Mason Delgado
QA Engineer
Hana Brennan
Project Manager

Finance

Amara Ashford
Backend Engineer
Lea Morgan
Art Director
Ava Harlow
Backend Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Human Resources</a><a class="nav-link" href="#spy-1199">Customer Support</a><a class="nav-link" href="#spy-1200">Finance</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">Human Resources</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="Noah Carter"><div><div class="small fw-semibold">Noah Carter</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-3.svg" class="rounded-circle" width="36" height="36" alt="Jonah Moreau"><div><div class="small fw-semibold">Jonah Moreau</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Chloe Ortega"><div><div class="small fw-semibold">Chloe Ortega</div><div class="small text-body-secondary">Operations Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Customer Support</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="Arjun Rossi"><div><div class="small fw-semibold">Arjun Rossi</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Mason Delgado"><div><div class="small fw-semibold">Mason Delgado</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">Project Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-9.svg" class="rounded-circle" width="36" height="36" alt="Amara Ashford"><div><div class="small fw-semibold">Amara Ashford</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Lea Morgan"><div><div class="small fw-semibold">Lea Morgan</div><div class="small text-body-secondary">Art Director</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="Ava Harlow"><div><div class="small fw-semibold">Ava Harlow</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Culture

Island hopping tour$662.00
Food tour$79.00
Ocean view suite$288.99

Beach

Surf camp$478.99
Safari adventure$1,800
Old town walk$32.99

Adventure

Mountain lodge$258.00
Safari adventure$1,800
Old town walk$37.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Culture</a><a class="nav-link" href="#spy-1203">Beach</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">Culture</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Island hopping tour</span><span class="fw-semibold">$662.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Food tour</span><span class="fw-semibold">$79.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ocean view suite</span><span class="fw-semibold">$288.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Surf camp</span><span class="fw-semibold">$478.99</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>
      <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>
    </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">$258.00</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>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$37.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Clear prices, honest advice and no surprises along the way. 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.

This week

We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search. Every detail is handled by people who care about getting it right.

Later

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. Free cancellation on most stays means you can book now and decide later.

<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">Clear prices, honest advice and no surprises along the way. 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.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">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. Free cancellation on most stays means you can book now and decide later.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Friendly people answer your questions quickly, by phone, chat or email. Travel insurance and car rental can be added in a single click. 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.

Orbit

Clear prices, honest advice and no surprises along the way. From city breaks to safaris, we plan trips around how you like to travel. Every trip supports local businesses and responsible tourism. We listen first, then build a plan around what you actually need.

Landing

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. Airport transfers, tours and dinners are arranged before you arrive.

<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">Friendly people answer your questions quickly, by phone, chat or email. Travel insurance and car rental can be added in a single click. 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-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Clear prices, honest advice and no surprises along the way. From city breaks to safaris, we plan trips around how you like to travel. 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-1212" class="pb-3">
      <h3 class="h6">Landing</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. Airport transfers, tours and dinners are arranged before you arrive.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Sep 21, 2025

NewOur team has done this many times, so you never have to guess.
ImprovedFlexible dates help you find quieter weeks and better prices.
FixedWe keep things simple, so you can focus on what matters to you.

v3.1 Feb 20, 2026

NewWe measure success by how many travellers come back and tell their friends.
ImprovedOur travel experts are on call around the clock while you are away.
FixedStart in minutes and get help from a real person whenever you need it.

v3.0 Feb 3, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedFlexible dates help you find quieter weeks and better prices.
FixedAirport transfers, tours and dinners are arranged before you arrive.

v2.9 Apr 25, 2026

NewTravel insurance and car rental can be added in a single click.
ImprovedThousands of travellers already trust us, and we work hard to keep it that way.
FixedWe keep things simple, so you can focus on what matters to you.

<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 21, 2025</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>Flexible dates help you find quieter weeks and better prices.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Feb 20, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many travellers come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our travel experts are on call around the clock while you are away.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Start in minutes and get help from a real person whenever you need it.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Feb 3, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Flexible dates help you find quieter weeks and better prices.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Airport transfers, tours and dinners are arranged before you arrive.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Apr 25, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Travel insurance and car rental can be added in a single click.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Thousands of travellers already trust us, and we work hard to keep it that way.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
    </div>
  </div>
</div>