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

New pieces arrive every month, and the best ones sell out fast. Members get early access to new drops and prices only they can see. Our team has done this many times, so you never have to guess. Pay securely with card, wallet or in three interest-free instalments.

Clear prices, honest advice and no surprises along the way. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days.

Details

We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. 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.

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

Pricing

Every piece is made in small batches from materials we test ourselves. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of shoppers already trust us, and we work hard to keep it that way.

We work directly with makers, so prices stay fair for everyone. Every detail is handled by people who care about getting it right. We measure success by how many shoppers come back and tell their friends. 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="#">Lumenen</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">New pieces arrive every month, and the best ones sell out fast. Members get early access to new drops and prices only they can see. Our team has done this many times, so you never have to guess. Pay securely with card, wallet or in three interest-free instalments.</p>
    <p class="small">Clear prices, honest advice and no surprises along the way. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. 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>
    <p class="small">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. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Every piece is made in small batches from materials we test ourselves. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
    <p class="small">We work directly with makers, so prices stay fair for everyone. Every detail is handled by people who care about getting it right. We measure success by how many shoppers come back and tell their friends. 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 team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order.

Step two

We work directly with makers, so prices stay fair for everyone. 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.

Step three

Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves. Members get early access to new drops and prices only they can see. We listen first, then build a plan around what you actually need.

Step four

New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of shoppers already trust us, and we work hard to keep it that way.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-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 team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">We work directly with makers, so prices stay fair for everyone. 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-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves. Members get early access to new drops and prices only they can see. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
  </div>
</div>

3Vertical pills

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

Live order tracking

Thousands of five-star reviews from customers who came back for more. 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.

Free shipping

Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Thousands of shoppers already trust us, and we work hard to keep it that way.

Secure checkout

Friendly people answer your questions quickly, by phone, chat or email. Not sure about the size? Our fit guide and live chat help you choose. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

Questions

Clear prices, honest advice and no surprises along the way. Pay securely with card, wallet or in three interest-free instalments. Every piece is made in small batches from materials we test ourselves.

<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">Live order tracking</a><a class="nav-link" href="#spy-1132">Free shipping</a><a class="nav-link" href="#spy-1133">Secure checkout</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-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Live order tracking</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. 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.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Free shipping</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Secure checkout</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Not sure about the size? Our fit guide and live chat help you choose. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Pay securely with card, wallet or in three interest-free instalments. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order. Order before 2 pm and most items leave our warehouse the same day.

Install

Start in minutes and get help from a real person whenever you need it. Each product is checked by hand before it goes into the box. Our packaging is plastic-free and every delivery is carbon-neutral. We listen first, then build a plan around what you actually need.

Configure

Free shipping on orders over $50 and easy returns within 30 days. 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.

Usage

Thousands of five-star reviews from customers who came back for more. Members get early access to new drops and prices only they can see. 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.

Examples

Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast. 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.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Each product is checked by hand before it goes into the box. Our packaging is plastic-free and every delivery is carbon-neutral. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. 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-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. Members get early access to new drops and prices only they can see. 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-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast. 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.</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

Pay securely with card, wallet or in three interest-free instalments. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.

Midday

We work directly with makers, so prices stay fair for everyone. 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.

Afternoon

Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Gift wrapping and a handwritten note are free on every order.

Evening

Our packaging is plastic-free and every delivery is carbon-neutral. Members get early access to new drops and prices only they can see. 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="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. 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.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Members get early access to new drops and prices only they can see. 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

Thousands of shoppers already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.

Beta

Thousands of five-star reviews from customers who came back for more. Thousands of shoppers already trust us, and we work hard to keep it that way. Order before 2 pm and most items leave our warehouse the same day.

Gamma

Our team has done this many times, so you never have to guess. Each product is checked by hand before it goes into the box. Every piece is made in small batches from materials we test ourselves. Not sure about the size? Our fit guide and live chat help you choose.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. Thousands of shoppers already trust us, and we work hard to keep it that way. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Each product is checked by hand before it goes into the box. Every piece is made in small batches from materials we test ourselves. Not sure about the size? Our fit guide and live chat help you choose.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

We measure success by how many shoppers come back and tell their friends. Our packaging is plastic-free and every delivery is carbon-neutral. We listen first, then build a plan around what you actually need.

Features

Members get early access to new drops and prices only they can see. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way.

Reviews

Thousands of five-star reviews from customers who came back for more. 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. Gift wrapping and a handwritten note are free on every order.

FAQ

Pay securely with card, wallet or in three interest-free instalments. Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">We measure success by how many shoppers come back and tell their friends. Our packaging is plastic-free and every delivery is carbon-neutral. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Members get early access to new drops and prices only they can see. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Thousands of five-star reviews from customers who came back for more. 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. Gift wrapping and a handwritten note are free on every order.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. 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>

8Table of contents on the right

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

Summary

Start in minutes and get help from a real person whenever you need it. 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. Every piece is made in small batches from materials we test ourselves.

Background

Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of five-star reviews from customers who came back for more.

Method

Gift wrapping and a handwritten note are free on every order. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. We work directly with makers, so prices stay fair for everyone.

Results

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

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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. 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. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</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. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Gift wrapping and a handwritten note are free on every order. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">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. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

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

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

Create an account

We measure success by how many shoppers come back and tell their friends. 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. Clear prices, honest advice and no surprises along the way.

Set up your profile

We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.

Invite the team

Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves. Gift wrapping and a handwritten note are free on every order.

Go live

We listen first, then build a plan around what you actually need. We measure success by how many shoppers come back and tell their friends. We keep things simple, so you can focus on what matters to you.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">We measure success by how many shoppers come back and tell their friends. 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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">We listen first, then build a plan around what you actually need. We measure success by how many shoppers come back and tell their friends. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A three-step skincare routine that works

Pay securely with card, wallet or in three interest-free instalments. Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way.

2024

A beginner's guide to getting started

Start in minutes and get help from a real person whenever you need it. We work directly with makers, so prices stay fair for everyone. Not sure about the size? Our fit guide and live chat help you choose.

2025

What to pack for a rainy weekend outdoors

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. Members get early access to new drops and prices only they can see.

2026

Styling one piece three different ways

Order before 2 pm and most items leave our warehouse the same day. 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. Every detail is handled by people who care about getting it right.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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">A three-step skincare routine that works</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. New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way.</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">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">Start in minutes and get help from a real person whenever you need it. We work directly with makers, so prices stay fair for everyone. Not sure about the size? Our fit guide and live chat help you choose.</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">What to pack for a rainy weekend outdoors</h3>
    <p class="small mb-0">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. Members get early access to new drops and prices only they can see.</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">Styling one piece three different ways</h3>
    <p class="small mb-0">Order before 2 pm and most items leave our warehouse the same day. 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. Every detail is handled by people who care about getting it right.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Inside our new autumn collection?: Free shipping on orders over $50 and easy returns within 30 days.
How to care for linen so it lasts for years?: Our packaging is plastic-free and every delivery is carbon-neutral.
How we choose sustainable materials?: Thousands of five-star reviews from customers who came back for more.

Shipping

How to choose the right product?: New pieces arrive every month, and the best ones sell out fast.
Five pieces for a capsule wardrobe?: Free shipping on orders over $50 and easy returns within 30 days.
A small guide to a calmer home?: Our packaging is plastic-free and every delivery is carbon-neutral.

Returns

Our favourite tips for busy weeks?: We measure success by how many shoppers come back and tell their friends.
Five things we learned this year?: Not sure about the size? Our fit guide and live chat help you choose.
Meet the makers behind our ceramics?: Our team has done this many times, so you never have to guess.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-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">Inside our new autumn collection?</dt>
          <dd class="small text-body-secondary">Free shipping on orders over $50 and easy returns within 30 days.</dd>
          <dt class="small">How to care for linen so it lasts for years?</dt>
          <dd class="small text-body-secondary">Our packaging is plastic-free and every delivery is carbon-neutral.</dd>
          <dt class="small">How we choose sustainable materials?</dt>
          <dd class="small text-body-secondary">Thousands of five-star reviews from customers who came back for more.</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 choose the right product?</dt>
          <dd class="small text-body-secondary">New pieces arrive every month, and the best ones sell out fast.</dd>
          <dt class="small">Five pieces for a capsule wardrobe?</dt>
          <dd class="small text-body-secondary">Free shipping on orders over $50 and easy returns within 30 days.</dd>
          <dt class="small">A small guide to a calmer home?</dt>
          <dd class="small text-body-secondary">Our packaging is plastic-free and every delivery is carbon-neutral.</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">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">We measure success by how many shoppers come back and tell their friends.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Not sure about the size? Our fit guide and live chat help you choose.</dd>
          <dt class="small">Meet the makers behind our ceramics?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Order before 2 pm and most items leave our warehouse the same day. Each product is checked by hand before it goes into the box. Every detail is handled by people who care about getting it right.

Battery

Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Pay securely with card, wallet or in three interest-free instalments.

Connectivity

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. Members get early access to new drops and prices only they can see. Clear prices, honest advice and no surprises along the way.

Security

Thousands of shoppers already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves. We work directly with makers, so prices stay fair for everyone.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Each product is checked by hand before it goes into the box. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">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. Members get early access to new drops and prices only they can see. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$18.37 / mo

Member prices
Carbon-neutral delivery
Member prices

Team

$45.74 / mo

Carbon-neutral delivery
Easy exchanges
Hand-checked quality

Business

$79.53 / mo

Sustainable materials
Secure payments
Secure payments

<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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-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">$18.37<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Member prices</li>
        <li>Carbon-neutral delivery</li>
        <li>Member prices</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.74<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Carbon-neutral delivery</li>
        <li>Easy exchanges</li>
        <li>Hand-checked quality</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">$79.53<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Sustainable materials</li>
        <li>Secure payments</li>
        <li>Secure payments</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: The small habits that make a big difference

Each product is checked by hand before it goes into the box. Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. 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. New pieces arrive every month, and the best ones sell out fast. Thousands of five-star reviews from customers who came back for more.

Chapter 2: Looking back at a busy season

We measure success by how many shoppers come back and tell their friends. Every piece is made in small batches from materials we test ourselves. We listen first, then build a plan around what you actually need.

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.

Chapter 3: What our shoppers asked us most

Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Free shipping on orders over $50 and easy returns within 30 days. Gift wrapping and a handwritten note are free on every order.

Order before 2 pm and most items leave our warehouse the same day. 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.

Chapter 4: Our guide to gifts under $50

We keep things simple, so you can focus on what matters to you. New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral.

Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right. 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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: The small habits that make a big difference</h3>
    <p class="small">Each product is checked by hand before it goes into the box. Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
    <p class="small">Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast. Thousands of five-star reviews from customers who came back for more.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Looking back at a busy season</h3>
    <p class="small">We measure success by how many shoppers come back and tell their friends. Every piece is made in small batches from materials we test ourselves. We listen first, then build a plan around what you actually need.</p>
    <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.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: What our shoppers asked us most</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Free shipping on orders over $50 and easy returns within 30 days. Gift wrapping and a handwritten note are free on every order.</p>
    <p class="small">Order before 2 pm and most items leave our warehouse the same day. 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 id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Our guide to gifts under $50</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right. 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

Order before 2 pm and most items leave our warehouse the same day. 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.

Notifications

Product news

Weekly digest

Gift wrapping and a handwritten note are free on every order. We work directly with makers, so prices stay fair for everyone. 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.

Privacy

Hide my profile from search

Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. 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-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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Liam Delgado">
        </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="Cape Town">
        </div>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. 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.</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">Gift wrapping and a handwritten note are free on every order. We work directly with makers, so prices stay fair for everyone. 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-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">Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Customer Support

Theo Ashford
Project Manager
Sofia Sato
Backend Engineer
Mia Ortega
HR Partner

Human Resources

Chloe Brennan
Art Director
Ivy Carter
Sales Executive
Leo Patel
Art Director

Legal

Ella Delgado
Backend Engineer
Lea Kowalski
Support Specialist
Lucas Ashford
Finance Lead

<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">Human Resources</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-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-4.svg" class="rounded-circle" width="36" height="36" alt="Theo Ashford"><div><div class="small fw-semibold">Theo Ashford</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Sofia Sato"><div><div class="small fw-semibold">Sofia Sato</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="Mia Ortega"><div><div class="small fw-semibold">Mia Ortega</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" 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-3.svg" class="rounded-circle" width="36" height="36" alt="Chloe Brennan"><div><div class="small fw-semibold">Chloe Brennan</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-6.svg" class="rounded-circle" width="36" height="36" alt="Ivy Carter"><div><div class="small fw-semibold">Ivy Carter</div><div class="small text-body-secondary">Sales Executive</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Leo Patel"><div><div class="small fw-semibold">Leo Patel</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-5.svg" class="rounded-circle" width="36" height="36" alt="Ella Delgado"><div><div class="small fw-semibold">Ella Delgado</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-2.svg" class="rounded-circle" width="36" height="36" alt="Lea Kowalski"><div><div class="small fw-semibold">Lea Kowalski</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-8.svg" class="rounded-circle" width="36" height="36" alt="Lucas Ashford"><div><div class="small fw-semibold">Lucas Ashford</div><div class="small text-body-secondary">Finance Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Home

Canvas tote$30.99
Desk lamp$81.00
Leather wallet$53.00

Accessories

Desk lamp$98.00
Wool scarf$46.00
Hand cream$19.00

Beauty

Linen shirt$66.00
Glass bottle$26.00
Hand cream$20.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Home</a><a class="nav-link" href="#spy-1203">Accessories</a><a class="nav-link" href="#spy-1204">Beauty</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Home</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Canvas tote</span><span class="fw-semibold">$30.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$81.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$53.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Accessories</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$98.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Wool scarf</span><span class="fw-semibold">$46.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Hand cream</span><span class="fw-semibold">$19.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Beauty</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Linen shirt</span><span class="fw-semibold">$66.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Glass bottle</span><span class="fw-semibold">$26.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Hand cream</span><span class="fw-semibold">$20.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Start in minutes and get help from a real person whenever you need it. Thousands of shoppers already trust us, and we work hard to keep it that way. Thousands of five-star reviews from customers who came back for more.

This week

Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Members get early access to new drops and prices only they can see.

Later

We keep things simple, so you can focus on what matters to you. Not sure about the size? Our fit guide and live chat help you choose. Pay securely with card, wallet or in three interest-free instalments.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">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. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</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. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Not sure about the size? Our fit guide and live chat help you choose. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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.

Orbit

Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast. Members get early access to new drops and prices only they can see.

Landing

Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right. We measure success by how many shoppers come back and tell their friends.

<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</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 id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast. Members get early access to new drops and prices only they can see.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right. We measure success by how many shoppers come back and tell their friends.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 May 29, 2026

NewFree shipping on orders over $50 and easy returns within 30 days.
ImprovedThousands of shoppers already trust us, and we work hard to keep it that way.
FixedGift wrapping and a handwritten note are free on every order.

v3.1 Jan 21, 2026

NewOrder before 2 pm and most items leave our warehouse the same day.
ImprovedWe listen first, then build a plan around what you actually need.
FixedWe work directly with makers, so prices stay fair for everyone.

v3.0 Feb 12, 2026

NewEach product is checked by hand before it goes into the box.
ImprovedOur team has done this many times, so you never have to guess.
FixedFriendly people answer your questions quickly, by phone, chat or email.

v2.9 Feb 4, 2026

NewThousands of five-star reviews from customers who came back for more.
ImprovedFree shipping on orders over $50 and easy returns within 30 days.
FixedWe keep things simple, so you can focus on what matters to you.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">May 29, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Free shipping on orders over $50 and easy returns within 30 days.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</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-danger me-1">Fixed</span>Gift wrapping and a handwritten note are free on every order.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jan 21, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Order before 2 pm and most items leave our warehouse the same day.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We listen first, then build a plan around what you actually need.</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 id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Feb 12, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Each product is checked by hand before it goes into the box.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 4, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of five-star reviews from customers who came back for more.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Free shipping on orders over $50 and easy returns within 30 days.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
    </div>
  </div>
</div>