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

Every hotel on our list is visited and reviewed by our own travel team. Airport transfers, tours and dinners are arranged before you arrive. We measure success by how many travellers come back and tell their friends.

From city breaks to safaris, we plan trips around how you like to travel. We listen first, then build a plan around what you actually need. Thousands of travellers already trust us, and we work hard to keep it that way. Travel insurance and car rental can be added in a single click.

Details

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

Every trip supports local businesses and responsible tourism. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.

Pricing

Members get room upgrades and late check-out at selected hotels. Free cancellation on most stays means you can book now and decide later. We find the best price, and if you see it cheaper we match it.

Flexible dates help you find quieter weeks and better prices. Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way.

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

2Horizontal pills

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

Step one

Start in minutes and get help from a real person whenever you need it. Our travel experts are on call around the clock while you are away. 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.

Step two

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. From city breaks to safaris, we plan trips around how you like to travel.

Step three

Family rooms, adults-only retreats and pet-friendly stays in one search. Airport transfers, tours and dinners are arranged before you arrive. We find the best price, and if you see it cheaper we match it.

Step four

We listen first, then build a plan around what you actually need. Local guides show you the places that never make it into guidebooks. Our team has done this many times, so you never have to guess. Members get room upgrades and late check-out at selected hotels.

<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">Start in minutes and get help from a real person whenever you need it. Our travel experts are on call around the clock while you are away. 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.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</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. 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.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</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. We find the best price, and if you see it cheaper we match it.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">We listen first, then build a plan around what you actually need. Local guides show you the places that never make it into guidebooks. Our team has done this many times, so you never have to guess. Members get room upgrades and late check-out at selected hotels.</p>
  </div>
</div>

3Vertical pills

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

Guided tours

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

Hotel booking

Travel insurance and car rental can be added in a single click. Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism.

Holiday packages

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

Questions

Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Members get room upgrades and late check-out at selected hotels. We find the best price, and if you see it cheaper we match it.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Guided tours</a><a class="nav-link" href="#spy-1132">Hotel booking</a><a class="nav-link" href="#spy-1133">Holiday packages</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">Guided tours</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. Flexible dates help you find quieter weeks and better prices. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Hotel booking</h3>
        <p class="small">Travel insurance and car rental can be added in a single click. Free cancellation on most stays means you can book now and decide later. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Holiday packages</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. Every hotel on our list is visited and reviewed by our own travel team.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Members get room upgrades and late check-out at selected hotels. We find the best price, and if you see it cheaper we match it.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Family rooms, adults-only retreats and pet-friendly stays in one search. Clear prices, honest advice and no surprises along the way. Airport transfers, tours and dinners are arranged before you arrive.

Install

Friendly people answer your questions quickly, by phone, chat or email. Flexible dates help you find quieter weeks and better prices. 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.

Configure

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

Usage

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

Examples

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

<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">Family rooms, adults-only retreats and pet-friendly stays in one search. Clear prices, honest advice and no surprises along the way. Airport transfers, tours and dinners are arranged before you arrive.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Flexible dates help you find quieter weeks and better prices. 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 id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">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. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">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. We keep things simple, so you can focus on what matters to you. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Every trip supports local businesses and responsible tourism. 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>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

Members get room upgrades and late check-out at selected hotels. 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. Every hotel on our list is visited and reviewed by our own travel team.

Midday

Family rooms, adults-only retreats and pet-friendly stays in one search. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.

Afternoon

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. Our team has done this many times, so you never have to guess. From city breaks to safaris, we plan trips around how you like to travel.

Evening

We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. 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.

<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">Members get room upgrades and late check-out at selected hotels. 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. Every hotel on our list is visited and reviewed by our own travel team.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Family rooms, adults-only retreats and pet-friendly stays in one search. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Local guides show you the places that never make it into guidebooks. We measure success by how many travellers come back and tell their friends. Our team has done this many times, so you never have to guess. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. 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.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Every detail is handled by people who care about getting it right. Airport transfers, tours and dinners are arranged before you arrive. Our travel experts are on call around the clock while you are away. Flexible dates help you find quieter weeks and better prices.

Beta

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

Gamma

Every hotel on our list is visited and reviewed by our own travel team. We keep things simple, so you can focus on what matters to you. We measure success by how many travellers come back and tell their friends.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Airport transfers, tours and dinners are arranged before you arrive. Our travel experts are on call around the clock while you are away. Flexible dates help you find quieter weeks and better prices.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Our travel experts are on call around the clock while you are away. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Every hotel on our list is visited and reviewed by our own travel team. We keep things simple, so you can focus on what matters to you. 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

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

Features

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

Reviews

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

FAQ

Friendly people answer your questions quickly, by phone, chat or email. Every trip supports local businesses and responsible tourism. We find the best price, and if you see it cheaper we match it.

<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">Family rooms, adults-only retreats and pet-friendly stays in one search. 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-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">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. Airport transfers, tours and dinners are arranged before you arrive.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Flexible dates help you find quieter weeks and better prices.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every trip supports local businesses and responsible tourism. We find the best price, and if you see it cheaper we match it.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks. Clear prices, honest advice and no surprises along the way. Family rooms, adults-only retreats and pet-friendly stays in one search.

Background

We measure success by how many travellers come back and tell their friends. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.

Method

Airport transfers, tours and dinners are arranged before you arrive. We listen first, then build a plan around what you actually need. Members get room upgrades and late check-out at selected hotels. Flexible dates help you find quieter weeks and better prices.

Results

We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. Our team has done this many times, so you never have to guess.

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">Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks. 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-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Airport transfers, tours and dinners are arranged before you arrive. We listen first, then build a plan around what you actually need. Members get room upgrades and late check-out at selected hotels. Flexible dates help you find quieter weeks and better prices.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. Our team has done this many times, so you never have to guess.</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

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. Every hotel on our list is visited and reviewed by our own travel team. From city breaks to safaris, we plan trips around how you like to travel.

Set up your profile

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

Invite the team

Travel insurance and car rental can be added in a single click. Free cancellation on most stays means you can book now and decide later. Start in minutes and get help from a real person whenever you need it.

Go live

We measure success by how many travellers come back and tell their friends. From city breaks to safaris, we plan trips around how you like to travel. Local guides show you the places that never make it into guidebooks.

<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">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. Every hotel on our list is visited and reviewed by our own travel team. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">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. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Travel insurance and car rental can be added in a single click. Free cancellation on most stays means you can book now and decide later. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. 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>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

What our travellers asked us most

Every hotel on our list is visited and reviewed by our own travel team. Every detail is handled by people who care about getting it right. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click.

2024

Behind the scenes with our hotel inspectors

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

2025

The small habits that make a big difference

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

2026

Three days in Lisbon, hour by hour

We find the best price, and if you see it cheaper we match it. Family rooms, adults-only retreats and pet-friendly stays in one search. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">What our travellers asked us most</h3>
    <p class="small mb-0">Every hotel on our list is visited and reviewed by our own travel team. Every detail is handled by people who care about getting it right. Members get room upgrades and late check-out at selected hotels. Travel insurance and car rental can be added in a single click.</p>
  </div>
  <div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">Behind the scenes with our hotel inspectors</h3>
    <p class="small mb-0">Flexible dates help you find quieter weeks and better prices. Our travel experts are on call around the clock while you are away. Free cancellation on most stays means you can book now and decide later.</p>
  </div>
  <div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">The small habits that make a big difference</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-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">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. Family rooms, adults-only retreats and pet-friendly stays in one search. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

How to choose the right trip?: We listen first, then build a plan around what you actually need.
Looking back at a busy season?: Airport transfers, tours and dinners are arranged before you arrive.
Ten weekend escapes within two hours of home?: Every trip supports local businesses and responsible tourism.

Shipping

How to travel more responsibly?: Family rooms, adults-only retreats and pet-friendly stays in one search.
Travelling with kids: our tried and tested tips?: We measure success by how many travellers come back and tell their friends.
A beginner's guide to getting started?: We keep things simple, so you can focus on what matters to you.

Returns

Five things we learned this year?: Our travel experts are on call around the clock while you are away.
The best time of year to visit Japan?: We listen first, then build a plan around what you actually need.
Our favourite tips for busy weeks?: Start in minutes and get help from a real person whenever you need it.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">How to choose the right trip?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Airport transfers, tours and dinners are arranged before you arrive.</dd>
          <dt class="small">Ten weekend escapes within two hours of home?</dt>
          <dd class="small text-body-secondary">Every trip supports local businesses and responsible tourism.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">How to travel more responsibly?</dt>
          <dd class="small text-body-secondary">Family rooms, adults-only retreats and pet-friendly stays in one search.</dd>
          <dt class="small">Travelling with kids: our tried and tested tips?</dt>
          <dd class="small text-body-secondary">We measure success by how many travellers come back and tell their friends.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Our travel experts are on call around the clock while you are away.</dd>
          <dt class="small">The best time of year to visit Japan?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Free cancellation on most stays means you can book now and decide later. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way.

Battery

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

Connectivity

Members get room upgrades and late check-out at selected hotels. Flexible dates help you find quieter weeks and better prices. Every hotel on our list is visited and reviewed by our own travel team. Every trip supports local businesses and responsible tourism.

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Free cancellation on most stays means you can book now and decide later. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">From city breaks to safaris, we plan trips around how you like to travel. Clear prices, honest advice and no surprises along the way. Local guides show you the places that never make it into guidebooks.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Members get room upgrades and late check-out at selected hotels. Flexible dates help you find quieter weeks and better prices. Every hotel on our list is visited and reviewed by our own travel team. Every trip supports local businesses and responsible tourism.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Every detail is handled by people who care about getting it right. 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.</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.30 / mo

Flexible dates
Free cancellation
Local guides

Team

$45.53 / mo

Best price guarantee
Free cancellation
Flexible dates

Business

$58.09 / mo

24/7 assistance
Best price guarantee
Local guides

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

14Chapter reader

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

Chapter 1: Our favourite small hotels this year

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

Our travel experts are on call around the clock while you are away. We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search.

Chapter 2: Hidden beaches of the Mediterranean

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

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Local guides show you the places that never make it into guidebooks.

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

We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. We keep things simple, so you can focus on what matters to you.

Our team has done this many times, so you never have to guess. 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. Free cancellation on most stays means you can book now and decide later.

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

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

Family rooms, adults-only retreats and pet-friendly stays in one search. Airport transfers, tours and dinners are arranged before you arrive. We listen first, then build a plan around what you actually need.

<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: Our favourite small hotels this year</h3>
    <p class="small">Airport transfers, tours and dinners are arranged before you arrive. Every hotel on our list is visited and reviewed by our own travel team. Start in minutes and get help from a real person whenever you need it.</p>
    <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. Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Hidden beaches of the Mediterranean</h3>
    <p class="small">Members get room upgrades and late check-out at selected hotels. Airport transfers, tours and dinners are arranged before you arrive. We measure success by how many travellers come back and tell their friends.</p>
    <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. Local guides show you the places that never make it into guidebooks.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How to pack for two weeks with one bag</h3>
    <p class="small">We find the best price, and if you see it cheaper we match it. Every trip supports local businesses and responsible tourism. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">Our team has done this many times, so you never have to guess. Thousands of travellers already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Free cancellation on most stays means you can book now and decide later.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: A first-timer&#39;s guide to safari</h3>
    <p class="small">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. Flexible dates help you find quieter weeks and better prices.</p>
    <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. We listen first, then build a plan around what you actually need.</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 keep things simple, so you can focus on what matters to you. Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess.

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

We find the best price, and if you see it cheaper we match it. Members get room upgrades and late check-out at selected hotels. From city breaks to safaris, we plan trips around how you like to travel.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Ravi Alvarez">
        </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 keep things simple, so you can focus on what matters to you. Flexible dates help you find quieter weeks and better prices. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-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">Every trip supports local businesses and responsible tourism. 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. 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">We find the best price, and if you see it cheaper we match it. Members get room upgrades and late check-out at selected hotels. From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Customer Support

Nadia Nguyen
Art Director
Samir Delgado
Support Specialist
Hana Okafor
QA Engineer

Legal

Kenji Rossi
Finance Lead
Isla Hughes
Customer Success
Luna Haddad
Sales Executive

Human Resources

Theo Mensah
Data Analyst
Mateo Moreau
Backend Engineer
Lea Tanaka
Art Director

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Customer Support</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Human Resources</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Customer Support</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Nadia Nguyen"><div><div class="small fw-semibold">Nadia Nguyen</div><div class="small text-body-secondary">Art Director</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Samir Delgado"><div><div class="small fw-semibold">Samir Delgado</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Hana Okafor"><div><div class="small fw-semibold">Hana Okafor</div><div class="small text-body-secondary">QA Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Kenji Rossi"><div><div class="small fw-semibold">Kenji Rossi</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="Isla Hughes"><div><div class="small fw-semibold">Isla Hughes</div><div class="small text-body-secondary">Customer Success</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Luna Haddad"><div><div class="small fw-semibold">Luna Haddad</div><div class="small text-body-secondary">Sales Executive</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Theo Mensah"><div><div class="small fw-semibold">Theo Mensah</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-8.svg" class="rounded-circle" width="36" height="36" alt="Mateo Moreau"><div><div class="small fw-semibold">Mateo Moreau</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Lea Tanaka"><div><div class="small fw-semibold">Lea Tanaka</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Mountain

Northern lights trip$1,300
Food tour$82.00
Safari adventure$1,850

Beach

Vineyard stay$206.00
Old town walk$31.99
Surf camp$508.99

City

Vineyard stay$210.00
Surf camp$493.99
Safari adventure$1,900

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Mountain</a><a class="nav-link" href="#spy-1203">Beach</a><a class="nav-link" href="#spy-1204">City</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">Mountain</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Northern lights trip</span><span class="fw-semibold">$1,300</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Food tour</span><span class="fw-semibold">$82.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Safari adventure</span><span class="fw-semibold">$1,850</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Beach</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vineyard stay</span><span class="fw-semibold">$206.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Old town walk</span><span class="fw-semibold">$31.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Surf camp</span><span class="fw-semibold">$508.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">City</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Vineyard stay</span><span class="fw-semibold">$210.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Surf camp</span><span class="fw-semibold">$493.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Safari adventure</span><span class="fw-semibold">$1,900</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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

This week

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

Later

Clear prices, honest advice and no surprises along the way. Travel insurance and car rental can be added in a single click. Local guides show you the places that never make it into guidebooks.

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">We measure success by how many travellers come back and tell their friends. 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.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">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. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <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. Local guides show you the places that never make it into guidebooks.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Start in minutes and get help from a real person whenever you need it. Every trip supports local businesses and responsible tourism. We listen first, then build a plan around what you actually need.

Orbit

Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. We find the best price, and if you see it cheaper we match it.

Landing

Travel insurance and car rental can be added in a single click. 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 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">Start in minutes and get help from a real person whenever you need it. Every trip supports local businesses and responsible tourism. We listen first, then build a plan around what you actually need.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Members get room upgrades and late check-out at selected hotels. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. We find the best price, and if you see it cheaper we match it.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Travel insurance and car rental can be added in a single click. 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>

20Changelog

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

v3.2 Aug 19, 2026

NewWe measure success by how many travellers come back and tell their friends.
ImprovedAirport transfers, tours and dinners are arranged before you arrive.
FixedWe keep things simple, so you can focus on what matters to you.

v3.1 Nov 2, 2025

NewFrom city breaks to safaris, we plan trips around how you like to travel.
ImprovedFlexible dates help you find quieter weeks and better prices.
FixedThousands of travellers already trust us, and we work hard to keep it that way.

v3.0 Apr 20, 2026

NewOur travel experts are on call around the clock while you are away.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
FixedFree cancellation on most stays means you can book now and decide later.

v2.9 Oct 18, 2025

NewEvery detail is handled by people who care about getting it right.
ImprovedEvery trip supports local businesses and responsible tourism.
FixedOur team has done this many times, so you never have to guess.

<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">Aug 19, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many travellers come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Airport transfers, tours and dinners are arranged before you arrive.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Nov 2, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</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-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>Thousands of travellers already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Apr 20, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our travel experts are on call around the clock while you are away.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</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-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Oct 18, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every trip supports local businesses and responsible tourism.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
        </ul>
      </div>
    </div>
  </div>
</div>