Scrollspy

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

1In a navbar

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

Intro

Our team has done this many times, so you never have to guess. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. Thousands of shoppers already trust us, and we work hard to keep it that way.

Members get early access to new drops and prices only they can see. Thousands of five-star reviews from customers who came back for more. We listen first, then build a plan around what you actually need.

Details

Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Gift wrapping and a handwritten note are free on every order. Start in minutes and get help from a real person whenever you need it.

Not sure about the size? Our fit guide and live chat help you choose. We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. Every detail is handled by people who care about getting it right.

Pricing

Pay securely with card, wallet or in three interest-free instalments. We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral. Free shipping on orders over $50 and easy returns within 30 days.

Every piece is made in small batches from materials we test ourselves. Order before 2 pm and most items leave our warehouse the same day. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Xenoara Pro</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">Our team has done this many times, so you never have to guess. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
    <p class="small">Members get early access to new drops and prices only they can see. Thousands of five-star reviews from customers who came back for more. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1123" class="pb-4">
    <h3 class="h6">Details</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Gift wrapping and a handwritten note are free on every order. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Not sure about the size? Our fit guide and live chat help you choose. We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. 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">Pay securely with card, wallet or in three interest-free instalments. We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral. Free shipping on orders over $50 and easy returns within 30 days.</p>
    <p class="small">Every piece is made in small batches from materials we test ourselves. Order before 2 pm and most items leave our warehouse the same day. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days. Not sure about the size? Our fit guide and live chat help you choose.

Step two

We work directly with makers, so prices stay fair for everyone. New pieces arrive every month, and the best ones sell out fast. We keep things simple, so you can focus on what matters to you. Members get early access to new drops and prices only they can see.

Step three

Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day. We measure success by how many shoppers come back and tell their friends.

Step four

Friendly people answer your questions quickly, by phone, chat or email. Thousands of five-star reviews from customers who came back for more. Every piece is made in small batches from materials we test ourselves.

<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">Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days. Not sure about the size? Our fit guide and live chat help you choose.</p>
  </div>
  <div id="spy-1127" class="pb-4">
    <h3 class="h6">Step two</h3>
    <p class="small">We work directly with makers, so prices stay fair for everyone. New pieces arrive every month, and the best ones sell out fast. We keep things simple, so you can focus on what matters to you. Members get early access to new drops and prices only they can see.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day. We measure success by how many shoppers come back and tell their friends.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Thousands of five-star reviews from customers who came back for more. Every piece is made in small batches from materials we test ourselves.</p>
  </div>
</div>

3Vertical pills

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

Secure checkout

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

Loyalty rewards

Each product is checked by hand before it goes into the box. Thousands of shoppers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.

Free shipping

Clear prices, honest advice and no surprises along the way. Not sure about the size? Our fit guide and live chat help you choose. Free shipping on orders over $50 and easy returns within 30 days. Gift wrapping and a handwritten note are free on every order.

Questions

Each product is checked by hand before it goes into the box. Every piece is made in small batches from materials we test ourselves. Friendly people answer your questions quickly, by phone, chat or email.

<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">Secure checkout</a><a class="nav-link" href="#spy-1132">Loyalty rewards</a><a class="nav-link" href="#spy-1133">Free shipping</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">Secure checkout</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Loyalty rewards</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Thousands of shoppers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1133" class="pb-4">
        <h3 class="h6">Free shipping</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Not sure about the size? Our fit guide and live chat help you choose. Free shipping on orders over $50 and easy returns within 30 days. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1134" class="pb-4">
        <h3 class="h6">Questions</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Every piece is made in small batches from materials we test ourselves. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We listen first, then build a plan around what you actually need. We work directly with makers, so prices stay fair for everyone. Members get early access to new drops and prices only they can see. Order before 2 pm and most items leave our warehouse the same day.

Install

Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right. New pieces arrive every month, and the best ones sell out fast.

Configure

Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more. Our team has done this many times, so you never have to guess.

Usage

We keep things simple, so you can focus on what matters to you. We measure success by how many shoppers come back and tell their friends. New pieces arrive every month, and the best ones sell out fast.

Examples

We listen first, then build a plan around what you actually need. Order before 2 pm and most items leave our warehouse the same day. We measure success by how many shoppers come back and tell their friends.

<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">We listen first, then build a plan around what you actually need. We work directly with makers, so prices stay fair for everyone. Members get early access to new drops and prices only they can see. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1137" class="pb-4">
        <h3 class="h6">Install</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1138" class="pb-4">
        <h3 class="h6">Configure</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. We measure success by how many shoppers come back and tell their friends. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Order before 2 pm and most items leave our warehouse the same day. We measure success by how many shoppers come back and tell their friends.</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

Gift wrapping and a handwritten note are free on every order. Not sure about the size? Our fit guide and live chat help you choose. Thousands of five-star reviews from customers who came back for more.

Midday

Our team has done this many times, so you never have to guess. Pay securely with card, wallet or in three interest-free instalments. Members get early access to new drops and prices only they can see.

Afternoon

Each product is checked by hand before it goes into the box. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Thousands of shoppers already trust us, and we work hard to keep it that way.

Evening

We keep things simple, so you can focus on what matters to you. Every piece is made in small batches from materials we test ourselves. Free shipping on orders over $50 and easy returns within 30 days.

<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">Gift wrapping and a handwritten note are free on every order. Not sure about the size? Our fit guide and live chat help you choose. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Pay securely with card, wallet or in three interest-free instalments. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Every piece is made in small batches from materials we test ourselves. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

We work directly with makers, so prices stay fair for everyone. Start in minutes and get help from a real person whenever you need it. Our packaging is plastic-free and every delivery is carbon-neutral. Friendly people answer your questions quickly, by phone, chat or email.

Beta

Clear prices, honest advice and no surprises along the way. We measure success by how many shoppers come back and tell their friends. Pay securely with card, wallet or in three interest-free instalments.

Gamma

We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it. Thousands of five-star reviews from customers who came back for more.

<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">We work directly with makers, so prices stay fair for everyone. Start in minutes and get help from a real person whenever you need it. Our packaging is plastic-free and every delivery is carbon-neutral. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. We measure success by how many shoppers come back and tell their friends. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

New pieces arrive every month, and the best ones sell out fast. Free shipping on orders over $50 and easy returns within 30 days. Order before 2 pm and most items leave our warehouse the same day.

Features

Every detail is handled by people who care about getting it right. Each product is checked by hand before it goes into the box. We keep things simple, so you can focus on what matters to you. Gift wrapping and a handwritten note are free on every order.

Reviews

Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Members get early access to new drops and prices only they can see. Thousands of shoppers already trust us, and we work hard to keep it that way.

FAQ

Our packaging is plastic-free and every delivery is carbon-neutral. Not sure about the size? Our fit guide and live chat help you choose. We work directly with makers, so prices stay fair for everyone.

<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">New pieces arrive every month, and the best ones sell out fast. Free shipping on orders over $50 and easy returns within 30 days. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1152" class="pb-4">
    <h3 class="h6">Features</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Each product is checked by hand before it goes into the box. We keep things simple, so you can focus on what matters to you. Gift wrapping and a handwritten note are free on every order.</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. Our team has done this many times, so you never have to guess. Members get early access to new drops and prices only they can see. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</h3>
    <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Not sure about the size? Our fit guide and live chat help you choose. We work directly with makers, so prices stay fair for everyone.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box. Not sure about the size? Our fit guide and live chat help you choose.

Background

New pieces arrive every month, and the best ones sell out fast. Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more.

Method

Start in minutes and get help from a real person whenever you need it. Members get early access to new drops and prices only they can see. Gift wrapping and a handwritten note are free on every order. Every detail is handled by people who care about getting it right.

Results

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

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">We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box. Not sure about the size? Our fit guide and live chat help you choose.</p>
      </div>
      <div id="spy-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Members get early access to new drops and prices only they can see. Gift wrapping and a handwritten note are free on every order. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1159" class="pb-4">
        <h3 class="h6">Results</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Thousands of shoppers 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 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

Free shipping on orders over $50 and easy returns within 30 days. Our team has done this many times, so you never have to guess. Order before 2 pm and most items leave our warehouse the same day. Friendly people answer your questions quickly, by phone, chat or email.

Set up your profile

Our packaging is plastic-free and every delivery is carbon-neutral. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it. Gift wrapping and a handwritten note are free on every order.

Invite the team

We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day. Our packaging is plastic-free and every delivery is carbon-neutral.

Go live

New pieces arrive every month, and the best ones sell out fast. Our team has done this many times, so you never have to guess. Thousands of shoppers already trust us, and we work hard to keep it that way.

<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">Free shipping on orders over $50 and easy returns within 30 days. Our team has done this many times, so you never have to guess. Order before 2 pm and most items leave our warehouse the same day. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</h3>
        <p class="small">We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1164" class="pb-4">
        <h3 class="h6">Go live</h3>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Our team has done this many times, so you never have to guess. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Styling one piece three different ways

Pay securely with card, wallet or in three interest-free instalments. Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves.

2024

Looking back at a busy season

Members get early access to new drops and prices only they can see. Each product is checked by hand before it goes into the box. Thousands of five-star reviews from customers who came back for more.

2025

Meet the makers behind our ceramics

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

2026

A small guide to a calmer home

Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Not sure about the size? Our fit guide and live chat help you choose.

<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">Styling one piece three different ways</h3>
    <p class="small mb-0">Pay securely with card, wallet or in three interest-free instalments. Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves.</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">Looking back at a busy season</h3>
    <p class="small mb-0">Members get early access to new drops and prices only they can see. Each product is checked by hand before it goes into the box. Thousands of five-star reviews from customers who came back for more.</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">Meet the makers behind our ceramics</h3>
    <p class="small mb-0">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. Clear prices, honest advice and no surprises along the way.</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">A small guide to a calmer home</h3>
    <p class="small mb-0">Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Not sure about the size? Our fit guide and live chat help you choose.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

The small habits that make a big difference?: Members get early access to new drops and prices only they can see.
How to care for linen so it lasts for years?: Clear prices, honest advice and no surprises along the way.
A three-step skincare routine that works?: Start in minutes and get help from a real person whenever you need it.

Shipping

Five things we learned this year?: Our team has done this many times, so you never have to guess.
What our shoppers asked us most?: New pieces arrive every month, and the best ones sell out fast.
Our favourite tips for busy weeks?: Each product is checked by hand before it goes into the box.

Returns

Inside our new autumn collection?: Gift wrapping and a handwritten note are free on every order.
A beginner's guide to getting started?: Every detail is handled by people who care about getting it right.
Five pieces for a capsule wardrobe?: Every piece is made in small batches from materials we test ourselves.

<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">The small habits that make a big difference?</dt>
          <dd class="small text-muted">Members get early access to new drops and prices only they can see.</dd>
          <dt class="small">How to care for linen so it lasts for years?</dt>
          <dd class="small text-muted">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">A three-step skincare routine that works?</dt>
          <dd class="small text-muted">Start in minutes and get help from a real person whenever you need it.</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">Five things we learned this year?</dt>
          <dd class="small text-muted">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">What our shoppers asked us most?</dt>
          <dd class="small text-muted">New pieces arrive every month, and the best ones sell out fast.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-muted">Each product is checked by hand before it goes into the box.</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">Inside our new autumn collection?</dt>
          <dd class="small text-muted">Gift wrapping and a handwritten note are free on every order.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-muted">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">Five pieces for a capsule wardrobe?</dt>
          <dd class="small text-muted">Every piece is made in small batches from materials we test ourselves.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. We listen first, then build a plan around what you actually need.

Battery

Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments. Not sure about the size? Our fit guide and live chat help you choose. We keep things simple, so you can focus on what matters to you.

Connectivity

Thousands of five-star reviews from customers who came back for more. Friendly people answer your questions quickly, by phone, chat or email. Free shipping on orders over $50 and easy returns within 30 days. Our packaging is plastic-free and every delivery is carbon-neutral.

Security

Thousands of shoppers 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. Our packaging is plastic-free and every delivery is carbon-neutral. Not sure about the size? Our fit guide and live chat help you choose.

<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">We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1176" class="pb-4">
        <h3 class="h6">Battery</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments. Not sure about the size? Our fit guide and live chat help you choose. 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">Thousands of five-star reviews from customers who came back for more. Friendly people answer your questions quickly, by phone, chat or email. Free shipping on orders over $50 and easy returns within 30 days. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</h3>
        <p class="small">Thousands of shoppers 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. Our packaging is plastic-free and every delivery is carbon-neutral. Not sure about the size? Our fit guide and live chat help you choose.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$19.34 / mo

Secure payments
Easy exchanges
Easy exchanges

Team

$31.39 / mo

Sustainable materials
Easy exchanges
Secure payments

Business

$78.72 / mo

Easy exchanges
Member prices
Hand-checked quality

<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">$19.34<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Secure payments</li>
        <li>Easy exchanges</li>
        <li>Easy exchanges</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">$31.39<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Sustainable materials</li>
        <li>Easy exchanges</li>
        <li>Secure payments</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">$78.72<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Easy exchanges</li>
        <li>Member prices</li>
        <li>Hand-checked quality</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Our guide to gifts under $50

Every detail is handled by people who care about getting it right. Free shipping on orders over $50 and easy returns within 30 days. Members get early access to new drops and prices only they can see.

We work directly with makers, so prices stay fair for everyone. Pay securely with card, wallet or in three interest-free instalments. Each product is checked by hand before it goes into the box. Order before 2 pm and most items leave our warehouse the same day.

Chapter 2: How we choose sustainable materials

We listen first, then build a plan around what you actually need. New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

We measure success by how many shoppers come back and tell their friends. Thousands of shoppers already trust us, and we work hard to keep it that way. Gift wrapping and a handwritten note are free on every order. Start in minutes and get help from a real person whenever you need it.

Chapter 3: How to choose the right product

Every piece is made in small batches from materials we test ourselves. Our team has done this many times, so you never have to guess. Thousands of five-star reviews from customers who came back for more.

We work directly with makers, so prices stay fair for everyone. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 4: What to pack for a rainy weekend outdoors

Thousands of shoppers already trust us, and we work hard to keep it that way. Free shipping on orders over $50 and easy returns within 30 days. New pieces arrive every month, and the best ones sell out fast.

Pay securely with card, wallet or in three interest-free instalments. Not sure about the size? Our fit guide and live chat help you choose. We listen first, then build a plan around what you actually need. Members get early access to new drops and prices only they can see.

<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: Our guide to gifts under $50</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Free shipping on orders over $50 and easy returns within 30 days. Members get early access to new drops and prices only they can see.</p>
    <p class="small">We work directly with makers, so prices stay fair for everyone. Pay securely with card, wallet or in three interest-free instalments. Each product is checked by hand before it goes into the box. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1185" class="pb-4">
    <h3 class="h6">Chapter 2: How we choose sustainable materials</h3>
    <p class="small">We listen first, then build a plan around what you actually need. New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
    <p class="small">We measure success by how many shoppers come back and tell their friends. Thousands of shoppers already trust us, and we work hard to keep it that way. Gift wrapping and a handwritten note are free on every order. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1186" class="pb-4">
    <h3 class="h6">Chapter 3: How to choose the right product</h3>
    <p class="small">Every piece is made in small batches from materials we test ourselves. Our team has done this many times, so you never have to guess. Thousands of five-star reviews from customers who came back for more.</p>
    <p class="small">We work directly with makers, so prices stay fair for everyone. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1187" class="pb-4">
    <h3 class="h6">Chapter 4: What to pack for a rainy weekend outdoors</h3>
    <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Free shipping on orders over $50 and easy returns within 30 days. New pieces arrive every month, and the best ones sell out fast.</p>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Not sure about the size? Our fit guide and live chat help you choose. We listen first, then build a plan around what you actually need. Members get early access to new drops and prices only they can see.</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. Thousands of five-star reviews from customers who came back for more. Our packaging is plastic-free and every delivery is carbon-neutral.

Notifications

Product news

Weekly digest

Gift wrapping and a handwritten note are free on every order. Order before 2 pm and most items leave our warehouse the same day. Every detail is handled by people who care about getting it right.

Privacy

Hide my profile from search

Every piece is made in small batches from materials we test ourselves. We measure success by how many shoppers come back and tell their friends. Each product is checked by hand before it goes into the box.

<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="Leo Moreau">
        </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="Austin">
        </div>
        <p class="small">We keep things simple, so you can focus on what matters to you. Thousands of five-star reviews from customers who came back for more. Our packaging is plastic-free and every delivery is carbon-neutral.</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">Gift wrapping and a handwritten note are free on every order. Order before 2 pm and most items leave our warehouse the same day. Every detail is handled by people who care about getting it right.</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">Every piece is made in small batches from materials we test ourselves. We measure success by how many shoppers come back and tell their friends. Each product is checked by hand before it goes into the box.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Marketing

Ella Delgado
Frontend Engineer
Zoe Haddad
Support Specialist
Isla Ashford
Product Designer

Sales

Noah Patel
Marketing Lead
Elena Varga
Data Analyst
Samir Tanaka
Sales Executive

Engineering

Priya Carter
QA Engineer
Kenji Delgado
Customer Success
Jonah Rossi
QA Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Marketing</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Engineering</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">Marketing</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Ella Delgado"><div><div class="small font-semibold">Ella Delgado</div><div class="small text-muted">Frontend 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="Zoe Haddad"><div><div class="small font-semibold">Zoe Haddad</div><div class="small text-muted">Support Specialist</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="Isla Ashford"><div><div class="small font-semibold">Isla Ashford</div><div class="small text-muted">Product Designer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Sales</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="Noah Patel"><div><div class="small font-semibold">Noah Patel</div><div class="small text-muted">Marketing Lead</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Elena Varga"><div><div class="small font-semibold">Elena 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-5.svg" class="rounded-full" width="36" height="36" alt="Samir Tanaka"><div><div class="small font-semibold">Samir Tanaka</div><div class="small text-muted">Sales Executive</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-2.svg" class="rounded-full" width="36" height="36" alt="Priya Carter"><div><div class="small font-semibold">Priya Carter</div><div class="small text-muted">QA 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="Kenji Delgado"><div><div class="small font-semibold">Kenji Delgado</div><div class="small text-muted">Customer Success</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="36" height="36" alt="Jonah Rossi"><div><div class="small font-semibold">Jonah Rossi</div><div class="small text-muted">QA Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Apparel

Glass bottle$25.00
Leather wallet$56.00
Running cap$24.99

Outdoor

Canvas tote$31.99
Desk lamp$81.00
Ceramic mug$22.00

Beauty

Leather wallet$64.99
Desk lamp$93.00
Cotton throw$76.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Apparel</a><a class="nav-link" href="#spy-1203">Outdoor</a><a class="nav-link" href="#spy-1204">Beauty</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">Apparel</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Glass bottle</span><span class="font-semibold">$25.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Leather wallet</span><span class="font-semibold">$56.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Running cap</span><span class="font-semibold">$24.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Outdoor</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Canvas tote</span><span class="font-semibold">$31.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Desk lamp</span><span class="font-semibold">$81.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Ceramic mug</span><span class="font-semibold">$22.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">Beauty</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Leather wallet</span><span class="font-semibold">$64.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Desk lamp</span><span class="font-semibold">$93.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Cotton throw</span><span class="font-semibold">$76.99</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. Clear prices, honest advice and no surprises along the way. Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email.

This week

Thousands of shoppers 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. We measure success by how many shoppers come back and tell their friends. Pay securely with card, wallet or in three interest-free instalments.

Later

New pieces arrive every month, and the best ones sell out fast. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone. We keep things simple, so you can focus on what matters to you.

<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. Clear prices, honest advice and no surprises along the way. Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">Thousands of shoppers 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. We measure success by how many shoppers come back and tell their friends. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1208" class="pb-4">
        <h3 class="h6">Later</h3>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Thousands of five-star reviews from customers who came back for more. Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order.

Orbit

Our packaging is plastic-free and every delivery is carbon-neutral. Every piece is made in small batches from materials we test ourselves. We listen first, then build a plan around what you actually need. Each product is checked by hand before it goes into the box.

Landing

Not sure about the size? Our fit guide and live chat help you choose. Members get early access to new drops and prices only they can see. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.

<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">Thousands of five-star reviews from customers who came back for more. Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Every piece is made in small batches from materials we test ourselves. We listen first, then build a plan around what you actually need. Each product is checked by hand before it goes into the box.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">Not sure about the size? Our fit guide and live chat help you choose. Members get early access to new drops and prices only they can see. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Dec 23, 2025

NewThousands of shoppers already trust us, and we work hard to keep it that way.
ImprovedEvery piece is made in small batches from materials we test ourselves.
FixedEvery detail is handled by people who care about getting it right.

v3.1 Nov 13, 2025

NewNew pieces arrive every month, and the best ones sell out fast.
ImprovedThousands of five-star reviews from customers who came back for more.
FixedWe measure success by how many shoppers come back and tell their friends.

v3.0 Feb 1, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedGift wrapping and a handwritten note are free on every order.
FixedOur team has done this many times, so you never have to guess.

v2.9 Jun 8, 2026

NewStart in minutes and get help from a real person whenever you need it.
ImprovedEach product is checked by hand before it goes into the box.
FixedWe work directly with makers, so prices stay fair for everyone.

<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 23, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of shoppers 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>Every piece is made in small batches from materials we test ourselves.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every detail is handled by people who care about getting it right.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">Nov 13, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>New pieces arrive every month, and the best ones sell out fast.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Thousands of five-star reviews from customers who came back for more.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many shoppers come back and tell their friends.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Feb 1, 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>Gift wrapping and a handwritten note are free on every order.</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 id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Jun 8, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Each product is checked by hand before it goes into the box.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We work directly with makers, so prices stay fair for everyone.</li>
        </ul>
      </div>
    </div>
  </div>
</div>