Scrollspy

Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.

1In a navbar

Scroll the box: the navbar pill for the visible section becomes active.

Intro

Travel insurance and car rental can be added in a single click. 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. 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. Thousands of travellers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Family rooms, adults-only retreats and pet-friendly stays in one search.

Details

We find the best price, and if you see it cheaper we match it. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.

Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

Pricing

Every trip supports local businesses and responsible tourism. Free cancellation on most stays means you can book now and decide later. 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. Our travel experts are on call around the clock while you are away.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Orbiora</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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Intro</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. Our travel experts are on call around the clock while you are away. Start in minutes and get help from a real person whenever you need it.</p>
    <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. We keep things simple, so you can focus on what matters to you. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
  </div>
  <div id="spy-1123" class="pb-4">
    <h3 class="h6">Details</h3>
    <p class="small">We find the best price, and if you see it cheaper we match it. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1124" class="pb-4">
    <h3 class="h6">Pricing</h3>
    <p class="small">Every trip supports local businesses and responsible tourism. Free cancellation on most stays means you can book now and decide later. Members get room upgrades and late check-out at selected hotels.</p>
    <p class="small">Clear prices, honest advice and no surprises along the way. From city breaks to safaris, we plan trips around how you like to travel. Our travel experts are on call around the clock while you are away.</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. 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. Our team has done this many times, so you never have to guess.

Step two

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

Step three

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

Step four

Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. We measure success by how many travellers come back and tell their friends. Flexible dates help you find quieter weeks and better prices.

<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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Step one</h3>
    <p class="small">Family rooms, adults-only retreats and pet-friendly stays in one search. Airport transfers, tours and dinners are arranged before you arrive. 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-1127" class="pb-4">
    <h3 class="h6">Step two</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Members get room upgrades and late check-out at selected hotels. Local guides show you the places that never make it into guidebooks. Every hotel on our list is visited and reviewed by our own travel team.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">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. We find the best price, and if you see it cheaper we match it.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</h3>
    <p class="small">Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. We measure success by how many travellers come back and tell their friends. Flexible dates help you find quieter weeks and better prices.</p>
  </div>
</div>

3Vertical pills

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

Travel insurance

We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Every trip supports local businesses and responsible tourism. Start in minutes and get help from a real person whenever you need it.

Guided tours

Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.

Airport transfers

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

Questions

Our team has done this many times, so you never have to guess. Free cancellation on most stays means you can book now and decide later. Family rooms, adults-only retreats and pet-friendly stays in one search. Every hotel on our list is visited and reviewed by our own travel team.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-col">
      <a class="nav-link" href="#spy-1131">Travel insurance</a><a class="nav-link" href="#spy-1132">Guided tours</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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Travel insurance</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Every trip supports local businesses and responsible tourism. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Guided tours</h3>
        <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1133" class="pb-4">
        <h3 class="h6">Airport transfers</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. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1134" class="pb-4">
        <h3 class="h6">Questions</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Free cancellation on most stays means you can book now and decide later. Family rooms, adults-only retreats and pet-friendly stays in one search. Every hotel on our list is visited and reviewed by our own travel team.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Friendly people answer your questions quickly, by phone, chat or email. Members get room upgrades and late check-out at selected hotels. Every trip supports local businesses and responsible tourism. Travel insurance and car rental can be added in a single click.

Install

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. We keep things simple, so you can focus on what matters to you. Our travel experts are on call around the clock while you are away.

Configure

We measure success by how many travellers come back and tell their friends. We listen first, then build a plan around what you actually need. Flexible dates help you find quieter weeks and better prices. Start in minutes and get help from a real person whenever you need it.

Usage

Members get room upgrades and late check-out at selected hotels. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.

Examples

We find the best price, and if you see it cheaper we match it. Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-full flex-col items-stretch">
      <nav class="nav nav-pills flex-col">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Getting started</h3>
        <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. Every trip supports local businesses and responsible tourism. Travel insurance and car rental can be added in a single click.</p>
      </div>
      <div id="spy-1137" class="pb-4">
        <h3 class="h6">Install</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. We keep things simple, so you can focus on what matters to you. Our travel experts are on call around the clock while you are away.</p>
      </div>
      <div id="spy-1138" class="pb-4">
        <h3 class="h6">Configure</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. We listen first, then build a plan around what you actually need. Flexible dates help you find quieter weeks and better prices. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</h3>
        <p class="small">Members get room upgrades and late check-out at selected hotels. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <p class="small">We find the best price, and if you see it cheaper we match it. Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way.</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

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

Midday

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

Afternoon

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

Evening

Every hotel on our list is visited and reviewed by our own travel team. Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Morning</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 measure success by how many travellers come back and tell their friends.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">Every trip supports local businesses and responsible tourism. Every detail is handled by people who care about getting it right. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
      <div id="spy-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <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. Our travel experts are on call around the clock while you are away. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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

Beta

Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks.

Gamma

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

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="flex flex-col gap-2 small">
      <a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Alpha</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. We find the best price, and if you see it cheaper we match it.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">Flexible dates help you find quieter weeks and better prices. Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Every trip supports local businesses and responsible tourism. Airport transfers, tours and dinners are arranged before you arrive. We measure success by how many travellers come back and tell their friends.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

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

Features

We keep things simple, so you can focus on what matters to you. Our travel experts are on call around the clock while you are away. Thousands of travellers already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.

Reviews

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

FAQ

Members get room upgrades and late check-out at selected hotels. Clear prices, honest advice and no surprises along the way. Airport transfers, tours and dinners are arranged before you arrive. Our team has done this many times, so you never have to guess.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
  <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="relative border rounded-md p-4 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-4">
    <h3 class="h6">Overview</h3>
    <p class="small">Free cancellation on most stays means you can book now and decide later. Every detail is handled by people who care about getting it right. We 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.</p>
  </div>
  <div id="spy-1152" class="pb-4">
    <h3 class="h6">Features</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Our travel experts are on call around the clock while you are away. Thousands of travellers already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1153" class="pb-4">
    <h3 class="h6">Reviews</h3>
    <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. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</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. Airport transfers, tours and dinners are arranged before you arrive. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Every 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. Flexible dates help you find quieter weeks and better prices. Members get room upgrades and late check-out at selected hotels.

Background

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

Method

Free cancellation on most stays means you can book now and decide later. We listen first, then build a plan around what you actually need. Every trip supports local businesses and responsible tourism.

Results

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

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Summary</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Family rooms, adults-only retreats and pet-friendly stays in one search. Flexible dates help you find quieter weeks and better prices. Members get room upgrades and late check-out at selected hotels.</p>
      </div>
      <div id="spy-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. Local guides show you the places that never make it into guidebooks. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">Free cancellation on most stays means you can book now and decide later. We listen first, then build a plan around what you actually need. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1159" class="pb-4">
        <h3 class="h6">Results</h3>
        <p class="small">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. 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.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first md:order-last">
    <p class="small font-semibold uppercase text-muted mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-col small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

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

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

Create an account

Start in minutes and get help from a real person whenever you need it. 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. We find the best price, and if you see it cheaper we match it.

Set up your profile

Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. We find the best price, and if you see it cheaper we match it. We listen first, then build a plan around what you actually need.

Invite the team

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

Go live

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

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Create an account</h3>
        <p class="small">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. 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.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</h3>
        <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. We find the best price, and if you see it cheaper we match it. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</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. 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 id="spy-1164" class="pb-4">
        <h3 class="h6">Go live</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 trip supports local businesses and responsible tourism.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A beginner's guide to getting started

Family rooms, adults-only retreats and pet-friendly stays in one search. Free cancellation on most stays means you can book now and decide later. Local guides show you the places that never make it into guidebooks.

2024

What our travellers asked us most

Our travel experts are on call around the clock while you are away. Start in minutes and get help from a real person whenever you need it. Airport transfers, tours and dinners are arranged before you arrive. Every hotel on our list is visited and reviewed by our own travel team.

2025

The small habits that make a big difference

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. Flexible dates help you find quieter weeks and better prices. Members get room upgrades and late check-out at selected hotels.

2026

How to choose the right trip

Friendly people answer your questions quickly, by phone, chat or email. Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it.

<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="relative border rounded-md p-4" 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-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">Family rooms, adults-only retreats and pet-friendly stays in one search. Free cancellation on most stays means you can book now and decide later. Local guides show you the places that never make it into guidebooks.</p>
  </div>
  <div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">What our travellers asked us most</h3>
    <p class="small mb-0">Our travel experts are on call around the clock while you are away. Start in minutes and get help from a real person whenever you need it. Airport transfers, tours and dinners are arranged before you arrive. Every hotel on our list is visited and reviewed by our own travel team.</p>
  </div>
  <div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">The small habits that make a big difference</h3>
    <p class="small mb-0">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. Flexible dates help you find quieter weeks and better prices. Members get room upgrades and late check-out at selected hotels.</p>
  </div>
  <div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">How to choose the right trip</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Airport transfers, tours and dinners are arranged before you arrive. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Behind the scenes with our hotel inspectors?: We measure success by how many travellers come back and tell their friends.
Our favourite tips for busy weeks?: Our travel experts are on call around the clock while you are away.
Travelling with kids: our tried and tested tips?: Every hotel on our list is visited and reviewed by our own travel team.

Shipping

Three days in Lisbon, hour by hour?: Family rooms, adults-only retreats and pet-friendly stays in one search.
Five things we learned this year?: Free cancellation on most stays means you can book now and decide later.
A first-timer's guide to safari?: Clear prices, honest advice and no surprises along the way.

Returns

Hidden beaches of the Mediterranean?: Local guides show you the places that never make it into guidebooks.
Ten weekend escapes within two hours of home?: Travel insurance and car rental can be added in a single click.
Our favourite small hotels this year?: Every trip supports local businesses and responsible tourism.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
      <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="relative border rounded-md p-4" 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-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Behind the scenes with our hotel inspectors?</dt>
          <dd class="small text-muted">We measure success by how many travellers come back and tell their friends.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-muted">Our travel experts are on call around the clock while you are away.</dd>
          <dt class="small">Travelling with kids: our tried and tested tips?</dt>
          <dd class="small text-muted">Every hotel on our list is visited and reviewed by our own travel team.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Three days in Lisbon, hour by hour?</dt>
          <dd class="small text-muted">Family rooms, adults-only retreats and pet-friendly stays in one search.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-muted">Free cancellation on most stays means you can book now and decide later.</dd>
          <dt class="small">A first-timer&#39;s guide to safari?</dt>
          <dd class="small text-muted">Clear prices, honest advice and no surprises along the way.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Hidden beaches of the Mediterranean?</dt>
          <dd class="small text-muted">Local guides show you the places that never make it into guidebooks.</dd>
          <dt class="small">Ten weekend escapes within two hours of home?</dt>
          <dd class="small text-muted">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-muted">Every trip supports local businesses and responsible tourism.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

From city breaks to safaris, we plan trips around how you like to travel. Our team has done this many times, so you never have to guess. Flexible dates help you find quieter weeks and better prices. We find the best price, and if you see it cheaper we match it.

Battery

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

Connectivity

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

Security

Airport transfers, tours and dinners are arranged before you arrive. Travel insurance and car rental can be added in a single click. From city breaks to safaris, we plan trips around how you like to travel. Our team has done this many times, so you never have to guess.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-col">
      <a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Performance</h3>
        <p class="small">From city breaks to safaris, we plan trips around how you like to travel. Our team has done this many times, so you never have to guess. Flexible dates help you find quieter weeks and better prices. We find the best price, and if you see it cheaper we match it.</p>
      </div>
      <div id="spy-1176" class="pb-4">
        <h3 class="h6">Battery</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Thousands of travellers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1177" class="pb-4">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Free cancellation on most stays means you can book now and decide later. 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.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</h3>
        <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Travel insurance and car rental can be added in a single click. From city breaks to safaris, we plan trips around how you like to travel. Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$15.60 / mo

Curated stays
Free cancellation
Best price guarantee

Team

$35.15 / mo

Flexible dates
Curated stays
Flexible dates

Business

$66.03 / mo

Local guides
Local guides
Flexible dates

<nav id="spy-nav-1179" class="nav nav-pills justify-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="relative border rounded-md p-4 bg-surface-3" 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-4">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="text-xl font-bold mb-1">$15.60<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Curated stays</li>
        <li>Free cancellation</li>
        <li>Best price guarantee</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="text-xl font-bold mb-1">$35.15<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Flexible dates</li>
        <li>Curated stays</li>
        <li>Flexible dates</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="text-xl font-bold mb-1">$66.03<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Local guides</li>
        <li>Local guides</li>
        <li>Flexible dates</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

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

Thousands of travellers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.

Start in minutes and get help from a real person whenever you need it. Every trip supports local businesses and responsible tourism. 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.

Chapter 2: How to travel more responsibly

Every hotel on our list is visited and reviewed by our own travel team. We measure success by how many travellers come back and tell their friends. Members get room upgrades and late check-out at selected hotels.

Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Local guides show you the places that never make it into guidebooks.

Chapter 3: Looking back at a busy season

Every detail is handled by people who care about getting it right. Thousands of travellers already trust us, and we work hard to keep it that way. Every trip supports local businesses and responsible tourism.

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.

Chapter 4: The best time of year to visit Japan

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. 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. Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. From city breaks to safaris, we plan trips around how you like to travel.

<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="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" 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-4">
    <h3 class="h6">Chapter 1: How to pack for two weeks with one bag</h3>
    <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Every trip supports local businesses and responsible tourism. 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.</p>
  </div>
  <div id="spy-1185" class="pb-4">
    <h3 class="h6">Chapter 2: How to travel more responsibly</h3>
    <p class="small">Every hotel on our list is visited and reviewed by our own travel team. We measure success by how many travellers come back and tell their friends. Members get room upgrades and late check-out at selected hotels.</p>
    <p class="small">Flexible dates help you find quieter weeks and better prices. Friendly people answer your questions quickly, by phone, chat or email. 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-1186" class="pb-4">
    <h3 class="h6">Chapter 3: Looking back at a busy season</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Thousands of travellers already trust us, and we work hard to keep it that way. Every trip supports local businesses and responsible tourism.</p>
    <p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1187" class="pb-4">
    <h3 class="h6">Chapter 4: 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. Travel insurance and car rental can be added in a single click. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Free cancellation on most stays means you can book now and decide later. Clear prices, honest advice and no surprises along the way. Flexible dates help you find quieter weeks and better prices. From city breaks to safaris, we plan trips around how you like to travel.</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 find the best price, and if you see it cheaper we match it. Local guides show you the places that never make it into guidebooks. Every hotel on our list is visited and reviewed by our own travel team.

Notifications

Product news

Weekly digest

Family rooms, adults-only retreats and pet-friendly stays in one search. Members get room upgrades and late check-out at selected hotels. Airport transfers, tours and dinners are arranged before you arrive.

Privacy

Hide my profile from search

We measure success by how many travellers come back and tell their friends. Our travel experts are on call around the clock while you are away. Local guides show you the places that never make it into guidebooks.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
      <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="relative border rounded-md p-4" 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-4">
        <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="Ava Sato">
        </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="Valencia">
        </div>
        <p class="small">We find the best price, and if you see it cheaper we match it. Local guides show you the places that never make it into guidebooks. Every hotel on our list is visited and reviewed by our own travel team.</p>
      </div>
      <div id="spy-1190" class="pb-4">
        <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">Family rooms, adults-only retreats and pet-friendly stays in one search. 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-1191" class="pb-4">
        <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">We measure success by how many travellers come back and tell their friends. Our travel experts are on call around the clock while you are away. Local guides show you the places that never make it into guidebooks.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Engineering

Felix Silva
Finance Lead
Theo Hughes
Operations Manager
Noah Duarte
Content Writer

Finance

Nadia Ortega
Content Writer
Arjun Varga
Data Analyst
Ravi Silva
Finance Lead

Marketing

Omar Larsen
Backend Engineer
Sofia Okafor
Data Analyst
Kai Rossi
Frontend Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Engineering</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Marketing</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="36" height="36" alt="Felix Silva"><div><div class="small font-semibold">Felix Silva</div><div class="small text-muted">Finance Lead</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Theo Hughes"><div><div class="small font-semibold">Theo Hughes</div><div class="small text-muted">Operations Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-full" width="36" height="36" alt="Noah Duarte"><div><div class="small font-semibold">Noah Duarte</div><div class="small text-muted">Content Writer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Finance</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Nadia Ortega"><div><div class="small font-semibold">Nadia Ortega</div><div class="small text-muted">Content Writer</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Arjun Varga"><div><div class="small font-semibold">Arjun Varga</div><div class="small text-muted">Data Analyst</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Ravi Silva"><div><div class="small font-semibold">Ravi Silva</div><div class="small text-muted">Finance Lead</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-4">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Omar Larsen"><div><div class="small font-semibold">Omar Larsen</div><div class="small text-muted">Backend Engineer</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Sofia Okafor"><div><div class="small font-semibold">Sofia Okafor</div><div class="small text-muted">Data Analyst</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-full" width="36" height="36" alt="Kai Rossi"><div><div class="small font-semibold">Kai Rossi</div><div class="small text-muted">Frontend Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Culture

Mountain lodge$217.00
Vineyard stay$220.99
Northern lights trip$1,300

Adventure

Island hopping tour$590.99
Weekend getaway$152.00
Mountain lodge$232.00

City

Ski chalet$380.00
Northern lights trip$1,300
Surf camp$484.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Culture</a><a class="nav-link" href="#spy-1203">Adventure</a><a class="nav-link" href="#spy-1204">City</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Culture</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Mountain lodge</span><span class="font-semibold">$217.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Vineyard stay</span><span class="font-semibold">$220.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Northern lights trip</span><span class="font-semibold">$1,300</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Adventure</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Island hopping tour</span><span class="font-semibold">$590.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Weekend getaway</span><span class="font-semibold">$152.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Mountain lodge</span><span class="font-semibold">$232.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">City</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Ski chalet</span><span class="font-semibold">$380.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Northern lights trip</span><span class="font-semibold">$1,300</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Surf camp</span><span class="font-semibold">$484.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.

This week

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

Later

Clear prices, honest advice and no surprises along the way. 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="relative border rounded-md p-4 border-0 rounded-none" 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-4">
        <h3 class="h6">Today</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">We find the best price, and if you see it cheaper we match it. Airport transfers, tours and dinners are arranged before you arrive. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1208" class="pb-4">
        <h3 class="h6">Later</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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

Every trip supports local businesses and responsible tourism. 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. Free cancellation on most stays means you can book now and decide later.

Orbit

We measure success by how many travellers come back and tell their friends. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Family rooms, adults-only retreats and pet-friendly stays in one search.

Landing

Every hotel on our list is visited and reviewed by our own travel team. Members get room upgrades and late check-out at selected hotels. Every hotel on our list is visited and reviewed by our own travel team.

<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
  <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="relative border rounded-md p-4 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-4">
      <h3 class="h6">Launch</h3>
      <p class="small">Every trip supports local businesses and responsible tourism. 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. Free cancellation on most stays means you can book now and decide later.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">We measure success by how many travellers come back and tell their friends. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">Every hotel on our list is visited and reviewed by our own travel team. Members get room upgrades and late check-out at selected hotels. Every hotel on our list is visited and reviewed by our own travel team.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Dec 14, 2025

NewFamily rooms, adults-only retreats and pet-friendly stays in one search.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedClear prices, honest advice and no surprises along the way.

v3.1 Apr 19, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedEvery trip supports local businesses and responsible tourism.
FixedFrom city breaks to safaris, we plan trips around how you like to travel.

v3.0 Sep 18, 2025

NewThousands of travellers already trust us, and we work hard to keep it that way.
ImprovedWe find the best price, and if you see it cheaper we match it.
FixedOur travel experts are on call around the clock while you are away.

v2.9 Sep 1, 2026

NewTravel insurance and car rental can be added in a single click.
ImprovedOur team has done this many times, so you never have to guess.
FixedLocal guides show you the places that never make it into guidebooks.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-col 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">v3.2 <small class="text-muted font-normal">Dec 14, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Family rooms, adults-only retreats and pet-friendly stays in one search.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">Apr 19, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every trip supports local businesses and responsible tourism.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>From city breaks to safaris, we plan trips around how you like to travel.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Sep 18, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of travellers already trust us, and we work hard to keep it that way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We find the best price, and if you see it cheaper we match it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our travel experts are on call around the clock while you are away.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Sep 1, 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>Our team has done this many times, so you never have to guess.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Local guides show you the places that never make it into guidebooks.</li>
        </ul>
      </div>
    </div>
  </div>
</div>