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

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. We listen first, then build a plan around what you actually need. 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. Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks. Airport transfers, tours and dinners are arranged before you arrive.

Details

Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism. From city breaks to safaris, we plan trips around how you like to travel. Travel insurance and car rental can be added in a single click.

Friendly people answer your questions quickly, by phone, chat or email. We find the best price, and if you see it cheaper we match it. Our team has done this many times, so you never have to guess.

Pricing

Family rooms, adults-only retreats and pet-friendly stays in one search. 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. Our travel experts are on call around the clock while you are away.

Clear prices, honest advice and no surprises along the way. Thousands of travellers already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.

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

2Horizontal pills

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

Step one

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

Step two

Our team has done this many times, so you never have to guess. Our travel experts are on call around the clock while you are away. 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.

Step three

Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. From city breaks to safaris, we plan trips around how you like to travel.

Step four

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. Free cancellation on most stays means you can book now and decide later. Airport transfers, tours and dinners are arranged before you arrive.

<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">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. Every trip supports local businesses and responsible tourism.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Our travel experts are on call around the clock while you are away. 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-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. From city breaks to safaris, we plan trips around how you like to travel.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">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. Free cancellation on most stays means you can book now and decide later. Airport transfers, tours and dinners are arranged before you arrive.</p>
  </div>
</div>

3Vertical pills

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

Hotel booking

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. Local guides show you the places that never make it into guidebooks.

Travel insurance

Flexible dates help you find quieter weeks and better prices. From city breaks to safaris, we plan trips around how you like to travel. We find the best price, and if you see it cheaper we match it.

Car rental

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

Questions

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Every trip supports local businesses and responsible tourism.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Hotel booking</a><a class="nav-link" href="#spy-1132">Travel insurance</a><a class="nav-link" href="#spy-1133">Car rental</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Hotel booking</h3>
        <p class="small">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. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Travel insurance</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. From city breaks to safaris, we plan trips around how you like to travel. We find the best price, and if you see it cheaper we match it.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Car rental</h3>
        <p class="small">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. 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">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Every trip supports local businesses and responsible tourism.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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

Install

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. Start in minutes and get help from a real person whenever you need it.

Configure

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

Usage

Friendly people answer your questions quickly, by phone, chat or email. 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. Clear prices, honest advice and no surprises along the way.

Examples

We find the best price, and if you see it cheaper we match it. Flexible dates help you find quieter weeks and better prices. Every trip supports local businesses and responsible tourism.

<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">Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</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. 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">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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our travel experts are on call around the clock while you are away. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</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. Every trip supports local businesses and responsible tourism.</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 detail is handled by people who care about getting it right. 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.

Midday

We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Thousands of travellers already trust us, and we work hard to keep it that way. Local guides show you the places that never make it into guidebooks.

Afternoon

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

Evening

Friendly people answer your questions quickly, by phone, chat or email. 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. Free cancellation on most stays means you can book now and decide later.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Every detail is handled by people who care about getting it right. 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-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Thousands of travellers already trust us, and we work hard to keep it that way. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">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. 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.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</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. 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.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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

Beta

Our travel experts are on call around the clock while you are away. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.

Gamma

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

<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">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. Flexible dates help you find quieter weeks and better prices.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Our travel experts are on call around the clock while you are away. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">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. We measure success by how many travellers come back and tell their friends.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

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

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. Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later.

Reviews

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. Friendly people answer your questions quickly, by phone, chat or email. Local guides show you the places that never make it into guidebooks.

FAQ

Every trip supports local businesses and responsible tourism. Family rooms, adults-only retreats and pet-friendly stays in one search. Travel insurance and car rental can be added in a single click. Friendly people answer your questions quickly, by phone, chat or email.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">We listen first, then build a plan around what you actually need. 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">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. Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way. Every hotel on our list is visited and reviewed by our own travel team. 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-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Every trip supports local businesses and responsible tourism. Family rooms, adults-only retreats and pet-friendly stays in one search. Travel insurance and car rental can be added in a single click. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Airport transfers, tours and dinners are arranged before you arrive. 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. Thousands of travellers already trust us, and we work hard to keep it that way.

Background

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

Method

Flexible dates help you find quieter weeks and better prices. 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. Clear prices, honest advice and no surprises along the way.

Results

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

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

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. Every trip supports local businesses and responsible tourism. Our travel experts are on call around the clock while you are away.

Set up your profile

We listen first, then build a plan around what you actually need. Thousands of travellers already trust us, and we work hard to keep it that way. Family rooms, adults-only retreats and pet-friendly stays in one search. From city breaks to safaris, we plan trips around how you like to travel.

Invite the team

Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. We find the best price, and if you see it cheaper we match it. We keep things simple, so you can focus on what matters to you.

Go live

Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Airport transfers, tours and dinners are arranged before you arrive.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">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. Every trip supports local businesses and responsible tourism. Our travel experts are on call around the clock while you are away.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Thousands of travellers already trust us, and we work hard to keep it that way. Family rooms, adults-only retreats and pet-friendly stays in one search. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. We find the best price, and if you see it cheaper we match it. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A beginner's guide to getting started

Free cancellation on most stays means you can book now and decide later. Members get room upgrades and late check-out at selected hotels. Friendly people answer your questions quickly, by phone, chat or email.

2024

Hidden beaches of the Mediterranean

Every trip supports local businesses and responsible tourism. Local guides show you the places that never make it into guidebooks. Every hotel on our list is visited and reviewed by our own travel team. Our travel experts are on call around the clock while you are away.

2025

How to pack for two weeks with one bag

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

2026

Our favourite small hotels this year

Thousands of travellers already trust us, and we work hard to keep it that way. Local guides show you the places that never make it into guidebooks. 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-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">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">Free cancellation on most stays means you can book now and decide later. 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-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">Every trip supports local businesses and responsible tourism. Local guides show you the places that never make it into guidebooks. Every hotel on our list is visited and reviewed by our own travel team. Our travel experts are on call around the clock while you are away.</p>
  </div>
  <div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">How to pack for two weeks with one bag</h3>
    <p class="small mb-0">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. 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.</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">Thousands of travellers already trust us, and we work hard to keep it that way. Local guides show you the places that never make it into guidebooks. 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>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Behind the scenes with our hotel inspectors?: Free cancellation on most stays means you can book now and decide later.
Our favourite tips for busy weeks?: Airport transfers, tours and dinners are arranged before you arrive.
Travelling with kids: our tried and tested tips?: Every trip supports local businesses and responsible tourism.

Shipping

How to travel more responsibly?: Family rooms, adults-only retreats and pet-friendly stays in one search.
Five things we learned this year?: We find the best price, and if you see it cheaper we match it.
A first-timer's guide to safari?: We keep things simple, so you can focus on what matters to you.

Returns

The best time of year to visit Japan?: Every hotel on our list is visited and reviewed by our own travel team.
Ten weekend escapes within two hours of home?: Members get room upgrades and late check-out at selected hotels.
Three days in Lisbon, hour by hour?: Our team has done this many times, so you never have to guess.

<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">Behind the scenes with our hotel inspectors?</dt>
          <dd class="small text-body-secondary">Free cancellation on most stays means you can book now and decide later.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Airport transfers, tours and dinners are arranged before you arrive.</dd>
          <dt class="small">Travelling with kids: our tried and tested tips?</dt>
          <dd class="small text-body-secondary">Every trip supports local businesses and responsible tourism.</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">How to travel more responsibly?</dt>
          <dd class="small text-body-secondary">Family rooms, adults-only retreats and pet-friendly stays in one search.</dd>
          <dt class="small">Five things we learned this year?</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">A first-timer&#39;s guide to safari?</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" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">The best time of year to visit Japan?</dt>
          <dd class="small text-body-secondary">Every hotel on our list is visited and reviewed by our own travel team.</dd>
          <dt class="small">Ten weekend escapes within two hours of home?</dt>
          <dd class="small text-body-secondary">Members get room upgrades and late check-out at selected hotels.</dd>
          <dt class="small">Three days in Lisbon, hour by hour?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

We measure success by how many travellers come back and tell their friends. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.

Battery

Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Our travel experts are on call around the clock while you are away.

Connectivity

Flexible dates help you find quieter weeks and better prices. Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Our travel experts are on call around the clock while you are away.

Security

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Members get room upgrades and late check-out at selected hotels.

<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">We measure success by how many travellers come back and tell their friends. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Our travel experts are on call around the clock while you are away.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Our travel experts are on call around the clock while you are away.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Members get room upgrades and late check-out at selected hotels.</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.58 / mo

Flexible dates
Free cancellation
Free cancellation

Team

$31.83 / mo

Local guides
Flexible dates
Curated stays

Business

$70.25 / mo

Free cancellation
Curated stays
Curated stays

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

14Chapter reader

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

Chapter 1: What our travellers asked us most

We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. From city breaks to safaris, we plan trips around how you like to travel. Every hotel on our list is visited and reviewed by our own travel team.

Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks. We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search.

Chapter 2: The small habits that make a big difference

We measure success by how many travellers come back and tell their friends. Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it.

Our team has done this many times, so you never have to guess. Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click.

Chapter 3: Looking back at a busy season

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. Members get room upgrades and late check-out at selected hotels. Every detail is handled by people who care about getting it right.

Airport transfers, tours and dinners are arranged before you arrive. Every trip supports local businesses and responsible tourism. Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices.

Chapter 4: How to choose the right trip

Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way. 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. 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.

<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: What our travellers asked us most</h3>
    <p class="small">We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. From city breaks to safaris, we plan trips around how you like to travel. Every hotel on our list is visited and reviewed by our own travel team.</p>
    <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. We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: The small habits that make a big difference</h3>
    <p class="small">We measure success by how many travellers come back and tell their friends. Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Our team has done this many times, so you never have to guess. 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-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Looking back at a busy season</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. Members get room upgrades and late check-out at selected hotels. Every detail is handled by people who care about getting it right.</p>
    <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Every trip supports local businesses and responsible tourism. Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: How to choose the right trip</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.</p>
    <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. Local guides show you the places that never make it into guidebooks.</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. From city breaks to safaris, we plan trips around how you like to travel. We find the best price, and if you see it cheaper we match it. Family rooms, adults-only retreats and pet-friendly stays in one search.

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

Every detail is handled by people who care about getting it right. Members get room upgrades and late check-out at selected hotels. Free cancellation on most stays means you can book now and decide later. From city breaks to safaris, we plan trips around how you like to travel.

<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 Quinn">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Seoul">
        </div>
        <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 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-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. Free cancellation on most stays means you can book now and decide later. Friendly people answer your questions quickly, by phone, chat or email.</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 detail is handled by people who care about getting it right. Members get room upgrades and late check-out at selected hotels. Free cancellation on most stays means you can book now and decide later. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Operations

Nadia Hughes
Finance Lead
Sofia Fischer
Data Analyst
Ella Rossi
Product Designer

Finance

Ruby Harlow
Product Designer
Omar Kowalski
Support Specialist
Theo Sato
Frontend Engineer

Human Resources

Kai Carter
Finance Lead
Nadia Mensah
Project Manager
Mia Hughes
Operations Manager

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Operations</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">Operations</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Nadia Hughes"><div><div class="small fw-semibold">Nadia Hughes</div><div class="small text-body-secondary">Finance Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Sofia Fischer"><div><div class="small fw-semibold">Sofia Fischer</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-7.svg" class="rounded-circle" width="36" height="36" alt="Ella Rossi"><div><div class="small fw-semibold">Ella Rossi</div><div class="small text-body-secondary">Product Designer</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-9.svg" class="rounded-circle" width="36" height="36" alt="Ruby Harlow"><div><div class="small fw-semibold">Ruby Harlow</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Omar Kowalski"><div><div class="small fw-semibold">Omar Kowalski</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-3.svg" class="rounded-circle" width="36" height="36" alt="Theo Sato"><div><div class="small fw-semibold">Theo Sato</div><div class="small text-body-secondary">Frontend 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="Kai Carter"><div><div class="small fw-semibold">Kai Carter</div><div class="small text-body-secondary">Finance Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Nadia Mensah"><div><div class="small fw-semibold">Nadia Mensah</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="Mia Hughes"><div><div class="small fw-semibold">Mia Hughes</div><div class="small text-body-secondary">Operations Manager</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Beach

Mountain lodge$214.99
Ski chalet$363.00
Weekend getaway$145.00

City

City break$185.00
Food tour$77.00
Surf camp$537.99

Mountain

Northern lights trip$1,250
Old town walk$36.99
Island hopping tour$591.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Beach</a><a class="nav-link" href="#spy-1203">City</a><a class="nav-link" href="#spy-1204">Mountain</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>Mountain lodge</span><span class="fw-semibold">$214.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ski chalet</span><span class="fw-semibold">$363.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Weekend getaway</span><span class="fw-semibold">$145.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">City</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>City break</span><span class="fw-semibold">$185.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Food tour</span><span class="fw-semibold">$77.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Surf camp</span><span class="fw-semibold">$537.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Mountain</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Northern lights trip</span><span class="fw-semibold">$1,250</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$36.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Island hopping tour</span><span class="fw-semibold">$591.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

We measure success by how many travellers come back and tell their friends. Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess. Every trip supports local businesses and responsible tourism.

This week

We keep things simple, so you can focus on what matters to you. 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.

Later

We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Thousands of travellers already trust us, and we work hard to keep it that way.

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. 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-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Family rooms, adults-only retreats and pet-friendly stays in one search. 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. Local guides show you the places that never make it into guidebooks.

Orbit

Start in minutes and get help from a real person whenever you need it. Airport transfers, tours and dinners are arranged before you arrive. Friendly people answer your questions quickly, by phone, chat or email. Local guides show you the places that never make it into guidebooks.

Landing

Our travel experts are on call around the clock while you are away. Flexible dates help you find quieter weeks and better prices. 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">Family rooms, adults-only retreats and pet-friendly stays in one search. 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. Local guides show you the places that never make it into guidebooks.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</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. 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-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Our travel experts are on call around the clock while you are away. Flexible dates help you find quieter weeks and better prices. 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 May 14, 2026

NewThousands of travellers already trust us, and we work hard to keep it that way.
ImprovedWe listen first, then build a plan around what you actually need.
FixedWe keep things simple, so you can focus on what matters to you.

v3.1 Oct 8, 2026

NewFree cancellation on most stays means you can book now and decide later.
ImprovedTravel insurance and car rental can be added in a single click.
FixedWe find the best price, and if you see it cheaper we match it.

v3.0 Jul 10, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedEvery trip supports local businesses and responsible tourism.
FixedAirport transfers, tours and dinners are arranged before you arrive.

v2.9 Mar 6, 2026

NewFamily rooms, adults-only retreats and pet-friendly stays in one search.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedEvery hotel on our list is visited and reviewed by our own travel team.

<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">May 14, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</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-primary me-1">Improved</span>We listen first, then build a plan around what you actually need.</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">Oct 8, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Free cancellation on most stays means you can book now and decide later.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Travel insurance and car rental can be added in a single click.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We find the best price, and if you see it cheaper we match it.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jul 10, 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>Every trip supports local businesses and responsible tourism.</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">Mar 6, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Family rooms, adults-only retreats and pet-friendly stays in one search.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every hotel on our list is visited and reviewed by our own travel team.</li>
        </ul>
      </div>
    </div>
  </div>
</div>