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

Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism. 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. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.

Details

Our team has done this many times, so you never have to guess. Travel insurance and car rental can be added in a single click. Every detail is handled by people who care about getting it right. We measure success by how many travellers come back and tell their friends.

Thousands of travellers already trust us, and we work hard to keep it that way. Flexible dates help you find quieter weeks and better prices. Airport transfers, tours and dinners are arranged before you arrive.

Pricing

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

2Horizontal pills

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

Step one

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 find the best price, and if you see it cheaper we match it. From city breaks to safaris, we plan trips around how you like to travel.

Step two

Every trip supports local businesses and responsible tourism. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many travellers come back and tell their friends.

Step three

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

Step four

Every hotel on our list is visited and reviewed by our own travel team. Airport transfers, tours and dinners are arranged before you arrive. Every detail is handled by people who care about getting it right.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">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 find the best price, and if you see it cheaper we match it. From city breaks to safaris, we plan trips around how you like to travel.</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. Friendly people answer your questions quickly, by phone, chat or email. 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">We listen first, then build a plan around what you actually need. Free cancellation on most stays means you can book now and decide later. 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-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. Airport transfers, tours and dinners are arranged before you arrive. Every detail is handled by people who care about getting it right.</p>
  </div>
</div>

3Vertical pills

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

Airport transfers

Our travel experts are on call around the clock while you are away. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Family rooms, adults-only retreats and pet-friendly stays in one search.

Hotel booking

Flexible dates help you find quieter weeks and better prices. Members get room upgrades and late check-out at selected hotels. We keep things simple, so you can focus on what matters to you.

Guided tours

Local guides show you the places that never make it into guidebooks. Flexible dates help you find quieter weeks and better prices. We keep things simple, so you can focus on what matters to you. Every trip supports local businesses and responsible tourism.

Questions

From city breaks to safaris, we plan trips around how you like to travel. Thousands of travellers already trust us, and we work hard to keep it that way. Every hotel on our list is visited and reviewed by our own travel team. Clear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Airport transfers</a><a class="nav-link" href="#spy-1132">Hotel booking</a><a class="nav-link" href="#spy-1133">Guided tours</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Airport transfers</h3>
        <p class="small">Our travel experts are on call around the clock while you are away. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Hotel booking</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. Members get room upgrades and late check-out at selected hotels. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Guided tours</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. Flexible dates help you find quieter weeks and better prices. We keep things simple, so you can focus on what matters to you. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">From city breaks to safaris, we plan trips around how you like to travel. Thousands of travellers already trust us, and we work hard to keep it that way. Every hotel on our list is visited and reviewed by our own travel team. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Free cancellation on most stays means you can book now and decide later.

Install

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.

Configure

Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many travellers come back and tell their friends. Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive.

Usage

Local guides show you the places that never make it into guidebooks. Start in minutes and get help from a real person whenever you need it. We find the best price, and if you see it cheaper we match it.

Examples

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

<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">Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Free cancellation on most stays means you can book now and decide later.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many travellers come back and tell their friends. Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. Start in minutes and get help from a real person whenever you need it. We find the best price, and if you see it cheaper we match it.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Our travel experts are on call around the clock while you are away. Thousands of travellers already trust us, and we work hard to keep it that way. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
    </div>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

Flexible dates help you find quieter weeks and better prices. Airport transfers, tours and dinners are arranged before you arrive. Members get room upgrades and late check-out at selected hotels. We measure success by how many travellers come back and tell their friends.

Midday

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

Afternoon

We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Travel insurance and car rental can be added in a single click. Our team has done this many times, so you never have to guess.

Evening

Friendly people answer your questions quickly, by phone, chat or email. Every trip supports local businesses and responsible tourism. Local guides show you the places that never make it into guidebooks. 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">Flexible dates help you find quieter weeks and better prices. Airport transfers, tours and dinners are arranged before you arrive. Members get room upgrades and late check-out at selected hotels. We measure success by how many travellers come back and tell their friends.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</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. Our travel experts are on call around the clock while you are away.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Travel insurance and car rental can be added in a single click. Our team has done this many times, so you never have to guess.</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. Every trip supports local businesses and responsible tourism. Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </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. Family rooms, adults-only retreats and pet-friendly stays in one search. We find the best price, and if you see it cheaper we match it.

Beta

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

Gamma

Friendly people answer your questions quickly, by phone, chat or email. Local guides show you the places that never make it into guidebooks. Our travel experts are on call around the clock while you are away. Every detail is handled by people who care about getting it right.

<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. Family rooms, adults-only retreats and pet-friendly stays in one search. We find the best price, and if you see it cheaper we match it.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">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. 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>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Local guides show you the places that never make it into guidebooks. Our travel experts are on call around the clock while you are away. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

We find the best price, and if you see it cheaper we match it. Thousands of travellers already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.

Features

Airport transfers, tours and dinners are arranged before you arrive. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. Flexible dates help you find quieter weeks and better prices.

Reviews

Every trip supports local businesses and responsible tourism. Clear prices, honest advice and no surprises along the way. 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.

FAQ

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. We listen first, then build a plan around what you actually need. 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 find the best price, and if you see it cheaper we match it. Thousands of travellers already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click. Flexible dates help you find quieter weeks and better prices.</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. Clear prices, honest advice and no surprises along the way. 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.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</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. 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>

8Table of contents on the right

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

Summary

Our travel experts are on call around the clock while you are away. Travel insurance and car rental can be added in a single click. 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.

Background

From city breaks to safaris, we plan trips around how you like to travel. Local guides show you the places that never make it into guidebooks. We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism.

Method

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

Results

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

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">Our travel experts are on call around the clock while you are away. Travel insurance and car rental can be added in a single click. 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-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">From city breaks to safaris, we plan trips around how you like to travel. Local guides show you the places that never make it into guidebooks. We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Free cancellation on most stays means you can book now and decide later. Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">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. We measure success by how many travellers come back and tell their friends.</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 listen first, then build a plan around what you actually need. Flexible dates help you find quieter weeks and better prices. Family rooms, adults-only retreats and pet-friendly stays in one search.

Set up your profile

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Every hotel on our list is visited and reviewed by our own travel team.

Invite the team

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

Go live

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

<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 listen first, then build a plan around what you actually need. 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 id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</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 hotel on our list is visited and reviewed by our own travel team.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</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. 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-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Our travel experts are on call around the clock while you are away. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

How to pack for two weeks with one bag

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

2024

How to travel more responsibly

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

2025

Three days in Lisbon, hour by hour

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

2026

Five things we learned this year

Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Every hotel on our list is visited and reviewed by our own travel team.

<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">How to pack for two weeks with one bag</h3>
    <p class="small mb-0">Every detail is handled by people who care about getting it right. 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-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">How to travel more responsibly</h3>
    <p class="small mb-0">Travel insurance and car rental can be added in a single click. 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.</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">Three days in Lisbon, hour by hour</h3>
    <p class="small mb-0">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. Every trip supports local businesses and responsible tourism.</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">Five things we learned this year</h3>
    <p class="small mb-0">Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Every hotel on our list is visited and reviewed by our own travel team.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

How to choose the right trip?: Flexible dates help you find quieter weeks and better prices.
Hidden beaches of the Mediterranean?: Airport transfers, tours and dinners are arranged before you arrive.
Behind the scenes with our hotel inspectors?: Thousands of travellers already trust us, and we work hard to keep it that way.

Shipping

Travelling with kids: our tried and tested tips?: Flexible dates help you find quieter weeks and better prices.
A first-timer's guide to safari?: Our travel experts are on call around the clock while you are away.
Our favourite small hotels this year?: Our team has done this many times, so you never have to guess.

Returns

What our travellers asked us most?: Friendly people answer your questions quickly, by phone, chat or email.
Looking back at a busy season?: Every trip supports local businesses and responsible tourism.
Our favourite tips for busy weeks?: Free cancellation on most stays means you can book now and decide later.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">How to choose the right trip?</dt>
          <dd class="small text-body-secondary">Flexible dates help you find quieter weeks and better prices.</dd>
          <dt class="small">Hidden beaches of the Mediterranean?</dt>
          <dd class="small text-body-secondary">Airport transfers, tours and dinners are arranged before you arrive.</dd>
          <dt class="small">Behind the scenes with our hotel inspectors?</dt>
          <dd class="small text-body-secondary">Thousands of travellers already trust us, and we work hard to keep it that way.</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">A first-timer&#39;s guide to safari?</dt>
          <dd class="small text-body-secondary">Our travel experts are on call around the clock while you are away.</dd>
          <dt class="small">Our favourite small hotels this year?</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-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">What our travellers asked us most?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Every trip supports local businesses and responsible tourism.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Free cancellation on most stays means you can book now and decide later.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Local guides show you the places that never make it into guidebooks.

Battery

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

Connectivity

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

Security

Members get room upgrades and late check-out at selected hotels. Clear prices, honest advice and no surprises along the way. From city breaks to safaris, we plan trips around how you like to travel. We measure success by how many travellers come back and tell their friends.

<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 detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. We find the best price, and if you see it cheaper we match it. We measure success by how many travellers come back and tell their friends.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Travel insurance and car rental can be added in a single click. Start in minutes and get help from a real person whenever you need it. Family rooms, adults-only retreats and pet-friendly stays in one search.</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. Clear prices, honest advice and no surprises along the way. From city breaks to safaris, we plan trips around how you like to travel. We measure success by how many travellers come back and tell their friends.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$16.46 / mo

Flexible dates
Best price guarantee
Curated stays

Team

$41.78 / mo

24/7 assistance
24/7 assistance
Free cancellation

Business

$63.58 / mo

Local guides
Best price guarantee
24/7 assistance

<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">$16.46<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Flexible dates</li>
        <li>Best price guarantee</li>
        <li>Curated stays</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="fs-4 fw-bold mb-1">$41.78<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>Free cancellation</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">$63.58<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Local guides</li>
        <li>Best price guarantee</li>
        <li>24/7 assistance</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Ten weekend escapes within two hours of home

Friendly people answer your questions quickly, by phone, chat or email. Airport transfers, tours and dinners are arranged before you arrive. We listen first, then build a plan around what you actually need.

We keep things simple, so you can focus on what matters to you. We find the best price, and if you see it cheaper we match it. Thousands of travellers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.

Chapter 2: The best time of year to visit Japan

Our travel experts are on call around the clock while you are away. 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. Local guides show you the places that never make it into guidebooks. Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess.

Chapter 3: A beginner's guide to getting started

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

Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Every hotel on our list is visited and reviewed by our own travel team.

Chapter 4: The small habits that make a big difference

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

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

<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: Ten weekend escapes within two hours of home</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Airport transfers, tours and dinners are arranged before you arrive. 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. We find the best price, and if you see it cheaper we match it. Thousands of travellers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: The best time of year to visit Japan</h3>
    <p class="small">Our travel experts are on call around the clock while you are away. Every trip supports local businesses and responsible tourism. From city breaks to safaris, we plan trips around how you like to travel.</p>
    <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. Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: A beginner&#39;s guide to getting started</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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
    <p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Every hotel on our list is visited and reviewed by our own travel team.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: The small habits that make a big difference</h3>
    <p class="small">Local guides show you the places that never make it into guidebooks. 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">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. Free cancellation on most stays means you can book now and decide later.</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

We measure success by how many travellers come back and tell their friends. Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email.

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

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

<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="Aria Haddad">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Melbourne">
        </div>
        <p class="small">We measure success by how many travellers come back and tell their friends. Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-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">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. Our travel experts are on call around the clock while you are away.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">Members get room upgrades and late check-out at selected hotels. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Operations

Leo Ortega
Project Manager
Finn Patel
Marketing Lead
Elena Whitaker
Data Analyst

Finance

Amara Kowalski
HR Partner
Ella Mensah
Operations Manager
Owen Morgan
QA Engineer

Research

Kenji Carter
Data Analyst
Arjun Silva
Finance Lead
Lea Ortega
Marketing Lead

<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">Research</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-9.svg" class="rounded-circle" width="36" height="36" alt="Leo Ortega"><div><div class="small fw-semibold">Leo Ortega</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-6.svg" class="rounded-circle" width="36" height="36" alt="Finn Patel"><div><div class="small fw-semibold">Finn Patel</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Elena Whitaker"><div><div class="small fw-semibold">Elena Whitaker</div><div class="small text-body-secondary">Data Analyst</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-6.svg" class="rounded-circle" width="36" height="36" alt="Amara Kowalski"><div><div class="small fw-semibold">Amara Kowalski</div><div class="small text-body-secondary">HR Partner</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="Ella Mensah"><div><div class="small fw-semibold">Ella Mensah</div><div class="small text-body-secondary">Operations Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Owen Morgan"><div><div class="small fw-semibold">Owen Morgan</div><div class="small text-body-secondary">QA Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Research</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="Kenji Carter"><div><div class="small fw-semibold">Kenji Carter</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Arjun Silva"><div><div class="small fw-semibold">Arjun Silva</div><div class="small text-body-secondary">Finance Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Lea Ortega"><div><div class="small fw-semibold">Lea Ortega</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Beach

Ocean view suite$309.00
City break$201.00
Vineyard stay$209.99

Adventure

Safari adventure$1,800
Island hopping tour$635.99
City break$205.00

Culture

City break$192.99
Vineyard stay$221.00
Ski chalet$325.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">Adventure</a><a class="nav-link" href="#spy-1204">Culture</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>Ocean view suite</span><span class="fw-semibold">$309.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>City break</span><span class="fw-semibold">$201.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vineyard stay</span><span class="fw-semibold">$209.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Safari adventure</span><span class="fw-semibold">$1,800</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Island hopping tour</span><span class="fw-semibold">$635.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>City break</span><span class="fw-semibold">$205.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>City break</span><span class="fw-semibold">$192.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vineyard stay</span><span class="fw-semibold">$221.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ski chalet</span><span class="fw-semibold">$325.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. 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. From city breaks to safaris, we plan trips around how you like to travel.

This week

Every trip supports local businesses and responsible tourism. Clear prices, honest advice and no surprises along the way. Members get room upgrades and late check-out at selected hotels.

Later

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. Friendly people answer your questions quickly, by phone, chat or email. Thousands of travellers already trust us, and we work hard to keep it that way.

<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. 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. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Every trip supports local businesses and responsible tourism. 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-1208" class="pb-3">
        <h3 class="h6">Later</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. Friendly people answer your questions quickly, by phone, chat or email. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

We listen first, then build a plan around what you actually need. Every trip supports local businesses and responsible tourism. Airport transfers, tours and dinners are arranged before you arrive. Clear prices, honest advice and no surprises along the way.

Orbit

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

Landing

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

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">We listen first, then build a plan around what you actually need. Every trip supports local businesses and responsible tourism. Airport transfers, tours and dinners are arranged before you arrive. Clear prices, honest advice and no surprises along the way.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</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. 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-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">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. Travel insurance and car rental can be added in a single click.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Feb 17, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedWe measure success by how many travellers come back and tell their friends.
FixedFree cancellation on most stays means you can book now and decide later.

v3.1 Aug 20, 2026

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

v3.0 Nov 16, 2025

NewWe find the best price, and if you see it cheaper we match it.
ImprovedOur travel experts are on call around the clock while you are away.
FixedLocal guides show you the places that never make it into guidebooks.

v2.9 Apr 6, 2026

NewTravel insurance and car rental can be added in a single click.
ImprovedFrom city breaks to safaris, we plan trips around how you like to travel.
FixedFamily rooms, adults-only retreats and pet-friendly stays in one search.

<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">Feb 17, 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>We measure success by how many travellers come back and tell their friends.</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-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Aug 20, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every hotel on our list is visited and reviewed by our own travel team.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Flexible dates help you find quieter weeks and better prices.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every trip supports local businesses and responsible tourism.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Nov 16, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We find the best price, and if you see it cheaper we match it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our travel experts are on call around the clock while you are away.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Local guides show you the places that never make it into guidebooks.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Apr 6, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Travel insurance and car rental can be added in a single click.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>From city breaks to safaris, we plan trips around how you like to travel.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Family rooms, adults-only retreats and pet-friendly stays in one search.</li>
        </ul>
      </div>
    </div>
  </div>
</div>