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

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

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

Details

Free cancellation on most stays means you can book now and decide later. Flexible dates help you find quieter weeks and better prices. 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.

Every trip supports local businesses and responsible tourism. We find the best price, and if you see it cheaper we match it. Every detail is handled by people who care about getting it right.

Pricing

Our travel experts are on call around the clock while you are away. Airport transfers, tours and dinners are arranged before you arrive. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.

Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. 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="#">Sageeon Craft</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">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. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. From city breaks to safaris, we plan trips around how you like to travel. Local guides show you the places that never make it into guidebooks.</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. Flexible dates help you find quieter weeks and better prices. 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.</p>
    <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. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Our travel experts are on call around the clock while you are away. Airport transfers, tours and dinners are arranged before you arrive. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
    <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. 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

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

Step two

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

We measure success by how many travellers come back and tell their friends. We find the best price, and if you see it cheaper we match it. Our travel experts are on call around the clock while you are away.

Step four

Members get room upgrades and late check-out at selected hotels. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-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">Thousands of travellers already trust us, and we work hard to keep it that way. Airport transfers, tours and dinners are arranged before you arrive. 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.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Every trip supports local businesses and responsible tourism. 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-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">We measure success by how many travellers come back and tell their friends. We find the best price, and if you see it cheaper we match it. Our travel experts are on call around the clock while you are away.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Members get room upgrades and late check-out at selected hotels. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
</div>

3Vertical pills

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

Holiday packages

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.

Travel insurance

Every hotel on our list is visited and reviewed by our own travel team. Free cancellation on most stays means you can book now and decide later. Friendly people answer your questions quickly, by phone, chat or email. Family rooms, adults-only retreats and pet-friendly stays in one search.

Airport transfers

Flexible dates help you find quieter weeks and better prices. We measure success by how many travellers come back and tell their friends. Start in minutes and get help from a real person whenever you need it.

Questions

Our team has done this many times, so you never have to guess. Every hotel on our list is visited and reviewed by our own travel team. We find the best price, and if you see it cheaper we match it.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-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">Airport transfers</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">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.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Travel insurance</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Free cancellation on most stays means you can book now and decide later. Friendly people answer your questions quickly, by phone, chat or email. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Airport transfers</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. We measure success by how many travellers come back and tell their friends. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Every hotel on our list is visited and reviewed by our own travel team. We find the best price, and if you see it cheaper we match it.</p>
      </div>
    </div>
  </div>
</div>

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. Local guides show you the places that never make it into guidebooks. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click.

Install

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. Our travel experts are on call around the clock while you are away.

Configure

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

Usage

Free cancellation on most stays means you can book now and decide later. Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.

Examples

We listen first, then build a plan around what you actually need. We find the best price, and if you see it cheaper we match it. Flexible dates help you find quieter weeks and better prices. 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-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. Local guides show you the places that never make it into guidebooks. 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 id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">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. Our travel experts are on call around the clock while you are away.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Every trip supports local businesses and responsible tourism. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Free cancellation on most stays means you can book now and decide later. Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">We listen first, then build a plan around what you actually need. We find the best price, and if you see it cheaper we match it. Flexible dates help you find quieter weeks and better prices. Family rooms, adults-only retreats and pet-friendly stays in one search.</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

Local guides show you the places that never make it into guidebooks. We measure success by how many travellers come back and tell their friends. Thousands of travellers already trust us, and we work hard to keep it that way. Members get room upgrades and late check-out at selected hotels.

Midday

Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Every trip supports local businesses and responsible tourism.

Afternoon

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

Evening

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. Our travel experts are on call around the clock while you are away. Clear prices, honest advice and no surprises along the way.

<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">Local guides show you the places that never make it into guidebooks. We measure success by how many travellers come back and tell their friends. Thousands of travellers already trust us, and we work hard to keep it that way. 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">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. 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-1145" class="pb-3">
        <h3 class="h6">Evening</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. Our travel experts are on call around the clock while you are away. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

We keep things simple, so you can focus on what matters to you. Free cancellation on most stays means you can book now and decide later. We listen first, then build a plan around what you actually need. Travel insurance and car rental can be added in a single click.

Beta

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. Our travel experts are on call around the clock while you are away. Airport transfers, tours and dinners are arranged before you arrive.

Gamma

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

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Free cancellation on most stays means you can book now and decide later. We listen first, then build a plan around what you actually need. Travel insurance and car rental can be added in a single click.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">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. Our travel experts are on call around the clock while you are away. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</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. We find the best price, and if you see it cheaper we match it.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Members get room upgrades and late check-out at selected hotels.

Features

Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks. Friendly people answer your questions quickly, by phone, chat or email.

Reviews

Every trip supports local businesses and responsible tourism. Every hotel on our list is visited and reviewed by our own travel team. Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess.

FAQ

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

<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">Clear prices, honest advice and no surprises along the way. 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-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Every trip supports local businesses and responsible tourism. Every hotel on our list is visited and reviewed by our own travel team. 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 id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <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. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Start in minutes and get help from a real person whenever you need it. 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. We listen first, then build a plan around what you actually need.

Background

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. Airport transfers, tours and dinners are arranged before you arrive. Friendly people answer your questions quickly, by phone, chat or email.

Method

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

Results

Travel insurance and car rental can be added in a single click. 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. Members get room upgrades and late check-out at selected hotels.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">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. From city breaks to safaris, we plan trips around how you like to travel. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">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. Airport transfers, tours and dinners are arranged before you arrive. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. Every trip supports local businesses and responsible tourism. 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-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Travel insurance and car rental can be added in a single click. 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. Members get room upgrades and late check-out at selected hotels.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

<code>.list-group-numbered</code> turns the spy menu into a step counter.

Create an account Set up your profile Invite the team Go live

Create an account

We keep things simple, so you can focus on what matters to you. Flexible dates help you find quieter weeks and better prices. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

Set up your profile

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

Invite the team

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

Go live

Family rooms, adults-only retreats and pet-friendly stays in one search. Travel insurance and car rental can be added in a single click. 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.

<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">We keep things simple, so you can focus on what matters to you. Flexible dates help you find quieter weeks and better prices. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</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. Thousands of travellers already trust us, and we work hard to keep it that way.</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. Our travel experts are on call around the clock while you are away. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</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. 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>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

What our travellers asked us most

Flexible dates help you find quieter weeks and better prices. Clear prices, honest advice and no surprises along the way. Free cancellation on most stays means you can book now and decide later.

2024

Behind the scenes with our hotel inspectors

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

2025

Hidden beaches of the Mediterranean

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

2026

Looking back at a busy season

Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess. Every trip supports local businesses and responsible tourism.

<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">What our travellers asked us most</h3>
    <p class="small mb-0">Flexible dates help you find quieter weeks and better prices. Clear prices, honest advice and no surprises along the way. Free cancellation on most stays means you can book now and decide later.</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">Behind the scenes with our hotel inspectors</h3>
    <p class="small mb-0">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. Local guides show you the places that never make it into guidebooks.</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">Hidden beaches of the Mediterranean</h3>
    <p class="small mb-0">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. 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-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">Looking back at a busy season</h3>
    <p class="small mb-0">Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess. Every trip supports local businesses and responsible tourism.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

How to travel more responsibly?: We keep things simple, so you can focus on what matters to you.
Ten weekend escapes within two hours of home?: Start in minutes and get help from a real person whenever you need it.
How to choose the right trip?: Our team has done this many times, so you never have to guess.

Shipping

Travelling with kids: our tried and tested tips?: Flexible dates help you find quieter weeks and better prices.
Three days in Lisbon, hour by hour?: Our travel experts are on call around the clock while you are away.
Five things we learned this year?: We listen first, then build a plan around what you actually need.

Returns

Our favourite tips for busy weeks?: Travel insurance and car rental can be added in a single click.
Our favourite small hotels this year?: We find the best price, and if you see it cheaper we match it.
The best time of year to visit Japan?: Local guides show you the places that never make it into guidebooks.

<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 travel more responsibly?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">Ten weekend escapes within two hours of home?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">How to choose the right trip?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</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">Travelling with kids: our tried and tested tips?</dt>
          <dd class="small text-body-secondary">Flexible dates help you find quieter weeks and better prices.</dd>
          <dt class="small">Three days in Lisbon, hour by hour?</dt>
          <dd class="small text-body-secondary">Our travel experts are on call around the clock while you are away.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
        </dl>
      </div>
      <div 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">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Travel insurance and car rental can be added in a single click.</dd>
          <dt class="small">Our favourite small hotels 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">The best time of year to visit Japan?</dt>
          <dd class="small text-body-secondary">Local guides show you the places that never make it into guidebooks.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Every trip supports local businesses and responsible tourism. Clear prices, honest advice and no surprises along the way. We measure success by how many travellers come back and tell their friends.

Battery

Every detail is handled by people who care about getting it right. 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.

Connectivity

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

Security

Members get room upgrades and late check-out at selected hotels. Airport transfers, tours and dinners are arranged before you arrive. Thousands of travellers already trust us, and we work hard to keep it that way. Airport transfers, tours and dinners are arranged before you arrive.

<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">Every trip supports local businesses and responsible tourism. Clear prices, honest advice and no surprises along the way. We measure success by how many travellers come back and tell their friends.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Every detail is handled by people who care about getting it right. 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-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. Free cancellation on most stays means you can book now and decide later.</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. Airport transfers, tours and dinners are arranged before you arrive. Thousands of travellers already trust us, and we work hard to keep it that way. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$9.70 / mo

Free cancellation
Curated stays
24/7 assistance

Team

$33.43 / mo

24/7 assistance
24/7 assistance
Local guides

Business

$62.18 / mo

Free cancellation
Free cancellation
Local guides

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

14Chapter reader

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

Chapter 1: The small habits that make a big difference

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

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

Chapter 2: A beginner's guide to getting started

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

Chapter 3: A first-timer's guide to safari

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

Thousands of travellers already trust us, and we work hard to keep it that way. Our travel experts are on call around the clock while you are away. Family rooms, adults-only retreats and pet-friendly stays in one search.

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

We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. 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. We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. 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: The small habits that make a big difference</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
    <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. Members get room upgrades and late check-out at selected hotels.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: A beginner&#39;s guide to getting started</h3>
    <p class="small">Every trip supports local businesses and responsible tourism. 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. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">From city breaks to safaris, we plan trips around how you like to travel. 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.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: A first-timer&#39;s guide to safari</h3>
    <p class="small">We find the best price, and if you see it cheaper we match it. 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.</p>
    <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way. Our travel experts are on call around the clock while you are away. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: How to pack for two weeks with one bag</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Every detail is handled by people who care about getting it right. We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. 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

Friendly people answer your questions quickly, by phone, chat or email. Members get room upgrades and late check-out at selected hotels. Airport transfers, tours and dinners are arranged before you arrive.

Notifications

Product news

Weekly digest

Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way. 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.

Privacy

Hide my profile from search

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

<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="Zoe Morgan">
        </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">Friendly people answer your questions quickly, by phone, chat or email. Members get room upgrades and late check-out at selected hotels. Airport transfers, tours and dinners are arranged before you arrive.</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">Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way. 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 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">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. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Sales

Felix Harlow
Support Specialist
Ava Quinn
Content Writer
Ruby Brennan
Project Manager

Legal

Luna Haddad
Customer Success
Ivy Kowalski
QA Engineer
Priya Lindqvist
Support Specialist

Engineering

Mateo Sato
Finance Lead
Leo Kim
Art Director
Lucas Ibrahim
Marketing Lead

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Felix Harlow"><div><div class="small fw-semibold">Felix Harlow</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="Ava Quinn"><div><div class="small fw-semibold">Ava Quinn</div><div class="small text-body-secondary">Content Writer</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="Ruby Brennan"><div><div class="small fw-semibold">Ruby Brennan</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Luna Haddad"><div><div class="small fw-semibold">Luna Haddad</div><div class="small text-body-secondary">Customer Success</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="Ivy Kowalski"><div><div class="small fw-semibold">Ivy Kowalski</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-11.svg" class="rounded-circle" width="36" height="36" alt="Priya Lindqvist"><div><div class="small fw-semibold">Priya Lindqvist</div><div class="small text-body-secondary">Support Specialist</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <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="Mateo Sato"><div><div class="small fw-semibold">Mateo Sato</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-6.svg" class="rounded-circle" width="36" height="36" alt="Leo Kim"><div><div class="small fw-semibold">Leo Kim</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-10.svg" class="rounded-circle" width="36" height="36" alt="Lucas Ibrahim"><div><div class="small fw-semibold">Lucas Ibrahim</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Adventure

Northern lights trip$1,350
Surf camp$445.00
City break$207.00

Culture

Ski chalet$325.00
Surf camp$493.99
Old town walk$39.00

Beach

City break$192.99
Mountain lodge$239.00
Ski chalet$377.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Adventure</a><a class="nav-link" href="#spy-1203">Culture</a><a class="nav-link" href="#spy-1204">Beach</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">Adventure</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,350</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Surf camp</span><span class="fw-semibold">$445.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>City break</span><span class="fw-semibold">$207.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Culture</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ski chalet</span><span class="fw-semibold">$325.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Surf camp</span><span class="fw-semibold">$493.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$39.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>City break</span><span class="fw-semibold">$192.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Mountain lodge</span><span class="fw-semibold">$239.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ski chalet</span><span class="fw-semibold">$377.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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

This week

We listen first, then build a plan around what you actually need. Members get room upgrades and late check-out at selected hotels. 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.

Later

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

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">We listen first, then build a plan around what you actually need. 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. Free cancellation on most stays means you can book now and decide later.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Members get room upgrades and late check-out at selected hotels. 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.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</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. Flexible dates help you find quieter weeks and better prices.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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. Local guides show you the places that never make it into guidebooks. We keep things simple, so you can focus on what matters to you.

Orbit

Our travel experts are on call around the clock while you are away. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.

Landing

Every detail is handled by people who care about getting it right. We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive.

<div 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">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. Local guides show you the places that never make it into guidebooks. We keep things simple, so you can focus on what matters to you.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Our travel experts are on call around the clock while you are away. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Every detail is handled by people who care about getting it right. We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Jul 9, 2026

NewWe measure success by how many travellers come back and tell their friends.
ImprovedThousands of travellers already trust us, and we work hard to keep it that way.
FixedEvery hotel on our list is visited and reviewed by our own travel team.

v3.1 Aug 15, 2026

NewOur team has done this many times, so you never have to guess.
ImprovedAirport transfers, tours and dinners are arranged before you arrive.
FixedFree cancellation on most stays means you can book now and decide later.

v3.0 Sep 26, 2026

NewMembers get room upgrades and late check-out at selected hotels.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedWe find the best price, and if you see it cheaper we match it.

v2.9 Aug 3, 2026

NewFlexible dates help you find quieter weeks and better prices.
ImprovedTravel insurance and car rental can be added in a single click.
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">Jul 9, 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>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>Every hotel on our list is visited and reviewed by our own travel team.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Aug 15, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Airport transfers, tours and dinners are arranged before you arrive.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Free cancellation on most stays means you can book now and decide later.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 26, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Members get room upgrades and late check-out at selected hotels.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>We find the best price, and if you see it cheaper we match it.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Aug 3, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Flexible dates help you find quieter weeks and better prices.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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 keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
    </div>
  </div>
</div>