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

We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way. 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. Every detail is handled by people who care about getting it right. Gift wrapping and a handwritten note are free on every order.

Details

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

Pay securely with card, wallet or in three interest-free instalments. 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.

Pricing

New pieces arrive every month, and the best ones sell out fast. Thousands of shoppers already trust us, and we work hard to keep it that way. Every piece is made in small batches from materials we test ourselves.

Thousands of five-star reviews from customers who came back for more. Friendly people answer your questions quickly, by phone, chat or email. Pay securely with card, wallet or in three interest-free instalments.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Mira Deck</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">We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">Each product is checked by hand before it goes into the box. Every detail is handled by people who care about getting it right. Gift wrapping and a handwritten note are free on every order.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">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. Not sure about the size? Our fit guide and live chat help you choose. 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. 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-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">New pieces arrive every month, and the best ones sell out fast. Thousands of shoppers already trust us, and we work hard to keep it that way. Every piece is made in small batches from materials we test ourselves.</p>
    <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. Pay securely with card, wallet or in three interest-free instalments.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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

Step two

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. Not sure about the size? Our fit guide and live chat help you choose.

Step three

Our team has done this many times, so you never have to guess. Free shipping on orders over $50 and easy returns within 30 days. 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.

Step four

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

<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">We work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order. Clear prices, honest advice and no surprises along the way. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">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. Not sure about the size? Our fit guide and live chat help you choose.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Free shipping on orders over $50 and easy returns within 30 days. 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-1129" class="pb-3">
    <h3 class="h6">Step four</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. 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>

3Vertical pills

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

30-day returns

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

Live order tracking

Friendly people answer your questions quickly, by phone, chat or email. Thousands of five-star reviews from customers who came back for more. New pieces arrive every month, and the best ones sell out fast.

Secure checkout

Clear prices, honest advice and no surprises along the way. Pay securely with card, wallet or in three interest-free instalments. Our team has done this many times, so you never have to guess.

Questions

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. Not sure about the size? Our fit guide and live chat help you choose. Start in minutes and get help from a real person whenever you need it.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">30-day returns</a><a class="nav-link" href="#spy-1132">Live order tracking</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">30-day returns</h3>
        <p class="small">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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Live order tracking</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. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Secure checkout</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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">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. Not sure about the size? Our fit guide and live chat help you choose. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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

Install

Friendly people answer your questions quickly, by phone, chat or email. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day.

Configure

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

Usage

Our packaging is plastic-free and every delivery is carbon-neutral. We keep things simple, so you can focus on what matters to you. Free shipping on orders over $50 and easy returns within 30 days.

Examples

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

<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">Thousands of five-star reviews from customers who came back for more. 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. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Gift wrapping and a handwritten note are free on every order. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. We keep things simple, so you can focus on what matters to you. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</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. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

We work directly with makers, so prices stay fair for everyone. Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order.

Midday

Members get early access to new drops and prices only they can see. Our packaging is plastic-free and every delivery is carbon-neutral. New pieces arrive every month, and the best ones sell out fast. We measure success by how many shoppers come back and tell their friends.

Afternoon

We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Every piece is made in small batches from materials we test ourselves.

Evening

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

<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">We work directly with makers, so prices stay fair for everyone. 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-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Members get early access to new drops and prices only they can see. Our packaging is plastic-free and every delivery is carbon-neutral. New pieces arrive every month, and the best ones sell out fast. We measure success by how many shoppers come back and tell their friends.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. Pay securely with card, wallet or in three interest-free instalments. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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. Not sure about the size? Our fit guide and live chat help you choose. Each product is checked by hand before it goes into the box.

Beta

New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral. Gift wrapping and a handwritten note are free on every order.

Gamma

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. 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">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. Not sure about the size? Our fit guide and live chat help you choose. Each product is checked by hand before it goes into the box.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</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. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">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. 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

Members get early access to new drops and prices only they can see. Pay securely with card, wallet or in three interest-free instalments. Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day.

Features

Free shipping on orders over $50 and easy returns within 30 days. 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. Thousands of shoppers already trust us, and we work hard to keep it that way.

Reviews

We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess.

FAQ

Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way. We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box.

<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">Members get early access to new drops and prices only they can see. Pay securely with card, wallet or in three interest-free instalments. Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Free shipping on orders over $50 and easy returns within 30 days. 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. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way. We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

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

Method

Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast. Thousands of shoppers already trust us, and we work hard to keep it that way. Not sure about the size? Our fit guide and live chat help you choose.

Results

Every piece is made in small batches from materials we test ourselves. Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more.

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">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. 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-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast. Thousands of shoppers already trust us, and we work hard to keep it that way. Not sure about the size? Our fit guide and live chat help you choose.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Every piece is made in small batches from materials we test ourselves. 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>
  </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

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

Set up your profile

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

Invite the team

Each product is checked by hand before it goes into the box. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast.

Go live

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

<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">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 detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">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 work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</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. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

What to pack for a rainy weekend outdoors

Every piece is made in small batches from materials we test ourselves. 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.

2024

Five pieces for a capsule wardrobe

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. Thousands of five-star reviews from customers who came back for more. Pay securely with card, wallet or in three interest-free instalments.

2025

A small guide to a calmer home

We measure success by how many shoppers come back and tell their friends. Our packaging is plastic-free and every delivery is carbon-neutral. Start in minutes and get help from a real person whenever you need it. Free shipping on orders over $50 and easy returns within 30 days.

2026

The small habits that make a big difference

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. We listen first, then build a plan around what you actually need. Pay securely with card, wallet or in three interest-free instalments.

<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">What to pack for a rainy weekend outdoors</h3>
    <p class="small mb-0">Every piece is made in small batches from materials we test ourselves. 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 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">Five pieces for a capsule wardrobe</h3>
    <p class="small mb-0">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. Thousands of five-star reviews from customers who came back for more. Pay securely with card, wallet or in three interest-free instalments.</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">A small guide to a calmer home</h3>
    <p class="small mb-0">We measure success by how many shoppers come back and tell their friends. Our packaging is plastic-free and every delivery is carbon-neutral. Start in minutes and get help from a real person whenever you need it. Free shipping on orders over $50 and easy returns within 30 days.</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">The small habits that make a big difference</h3>
    <p class="small mb-0">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. We listen first, then build a plan around what you actually need. Pay securely with card, wallet or in three interest-free instalments.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Styling one piece three different ways?: Each product is checked by hand before it goes into the box.
Inside our new autumn collection?: Every detail is handled by people who care about getting it right.
A three-step skincare routine that works?: Friendly people answer your questions quickly, by phone, chat or email.

Shipping

Meet the makers behind our ceramics?: Free shipping on orders over $50 and easy returns within 30 days.
What our shoppers asked us most?: Clear prices, honest advice and no surprises along the way.
Our guide to gifts under $50?: Thousands of shoppers already trust us, and we work hard to keep it that way.

Returns

Five things we learned this year?: Our team has done this many times, so you never have to guess.
Our favourite tips for busy weeks?: Not sure about the size? Our fit guide and live chat help you choose.
How to care for linen so it lasts for years?: Thousands of five-star reviews from customers who came back for more.

<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">Styling one piece three different ways?</dt>
          <dd class="small text-body-secondary">Each product is checked by hand before it goes into the box.</dd>
          <dt class="small">Inside our new autumn collection?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">A three-step skincare routine that works?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</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">Meet the makers behind our ceramics?</dt>
          <dd class="small text-body-secondary">Free shipping on orders over $50 and easy returns within 30 days.</dd>
          <dt class="small">What our shoppers asked us most?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">Our guide to gifts under $50?</dt>
          <dd class="small text-body-secondary">Thousands of shoppers already trust us, and we work hard to keep it that way.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">Our favourite tips for busy weeks?</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">How to care for linen so it lasts for years?</dt>
          <dd class="small text-body-secondary">Thousands of five-star reviews from customers who came back for more.</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. Every piece is made in small batches from materials we test ourselves. We work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order.

Battery

We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral. Start in minutes and get help from a real person whenever you need it. We measure success by how many shoppers come back and tell their friends.

Connectivity

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. Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way.

Security

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

<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. Every piece is made in small batches from materials we test ourselves. We work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral. Start in minutes and get help from a real person whenever you need it. We measure success by how many shoppers come back and tell their friends.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. Every piece is made in small batches from materials we test ourselves. 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">Start in minutes and get help from a real person whenever you need it. 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.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$17.66 / mo

Member prices
Member prices
Carbon-neutral delivery

Team

$45.57 / mo

Carbon-neutral delivery
Sustainable materials
Carbon-neutral delivery

Business

$69.87 / mo

Sustainable materials
Hand-checked quality
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">$17.66<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Member prices</li>
        <li>Member prices</li>
        <li>Carbon-neutral delivery</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.57<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Carbon-neutral delivery</li>
        <li>Sustainable materials</li>
        <li>Carbon-neutral delivery</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">$69.87<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Sustainable materials</li>
        <li>Hand-checked quality</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: Looking back at a busy season

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

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. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 2: How to choose the right product

Each product is checked by hand before it goes into the box. Free shipping on orders over $50 and easy returns within 30 days. Thousands of five-star reviews from customers who came back for more.

We work directly with makers, so prices stay fair for everyone. Our packaging is plastic-free and every delivery is carbon-neutral. We keep things simple, so you can focus on what matters to you. Gift wrapping and a handwritten note are free on every order.

Chapter 3: How we choose sustainable materials

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. New pieces arrive every month, and the best ones sell out fast. Friendly people answer your questions quickly, by phone, chat or email.

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

Chapter 4: A beginner's guide to getting started

Each product is checked by hand before it goes into the box. Start in minutes and get help from a real person whenever you need it. 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. We work directly with makers, so prices stay fair for everyone. Every detail is handled by people who care about getting it right.

<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: Looking back at a busy season</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. 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>
    <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: How to choose the right product</h3>
    <p class="small">Each product is checked by hand before it goes into the box. Free shipping on orders over $50 and easy returns within 30 days. 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 packaging is plastic-free and every delivery is carbon-neutral. 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-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How we choose sustainable materials</h3>
    <p class="small">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. New pieces arrive every month, and the best ones sell out fast. Friendly people answer your questions quickly, by phone, chat or email.</p>
    <p class="small">Free shipping on orders over $50 and easy returns within 30 days. 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.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: A beginner&#39;s guide to getting started</h3>
    <p class="small">Each product is checked by hand before it goes into the box. Start in minutes and get help from a real person whenever you need it. 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.</p>
    <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. Every detail is handled by people who care about getting it right.</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

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

Notifications

Product news

Weekly digest

Thousands of five-star reviews from customers who came back for more. Our packaging is plastic-free and every delivery is carbon-neutral. Gift wrapping and a handwritten note are free on every order.

Privacy

Hide my profile from search

Members get early access to new drops and prices only they can see. We measure success by how many shoppers come back and tell their friends. 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.

<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="Diego Whitaker">
        </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="Barcelona">
        </div>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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.</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">Thousands of five-star reviews from customers who came back for more. Our packaging is plastic-free and every delivery is carbon-neutral. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">Members get early access to new drops and prices only they can see. We measure success by how many shoppers come back and tell their friends. 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>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Operations

Freya Kim
Backend Engineer
Ruby Alvarez
Content Writer
Sofia Lindqvist
Sales Executive

Legal

Noah Fischer
Marketing Lead
Aria Moreau
Customer Success
Jonah Whitaker
Art Director

Engineering

Kai Kowalski
Sales Executive
Ivy Rossi
QA Engineer
Elena Sato
Data Analyst

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Operations</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Engineering</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">Operations</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="Freya Kim"><div><div class="small fw-semibold">Freya Kim</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-5.svg" class="rounded-circle" width="36" height="36" alt="Ruby Alvarez"><div><div class="small fw-semibold">Ruby Alvarez</div><div class="small text-body-secondary">Content Writer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Sofia Lindqvist"><div><div class="small fw-semibold">Sofia Lindqvist</div><div class="small text-body-secondary">Sales Executive</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Noah Fischer"><div><div class="small fw-semibold">Noah Fischer</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Aria Moreau"><div><div class="small fw-semibold">Aria Moreau</div><div class="small text-body-secondary">Customer Success</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Jonah Whitaker"><div><div class="small fw-semibold">Jonah Whitaker</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Engineering</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="Kai Kowalski"><div><div class="small fw-semibold">Kai Kowalski</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-8.svg" class="rounded-circle" width="36" height="36" alt="Ivy Rossi"><div><div class="small fw-semibold">Ivy Rossi</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Elena Sato"><div><div class="small fw-semibold">Elena Sato</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Home

Linen shirt$63.00
Canvas tote$31.00
Leather wallet$61.00

Outdoor

Desk lamp$93.00
Hand cream$18.00
Ceramic mug$19.99

Beauty

Running cap$26.99
Ceramic mug$20.00
Wool scarf$49.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">Outdoor</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>Linen shirt</span><span class="fw-semibold">$63.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Canvas tote</span><span class="fw-semibold">$31.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$61.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Outdoor</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">$93.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Hand cream</span><span class="fw-semibold">$18.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ceramic mug</span><span class="fw-semibold">$19.99</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>Running cap</span><span class="fw-semibold">$26.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ceramic mug</span><span class="fw-semibold">$20.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Wool scarf</span><span class="fw-semibold">$49.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Clear prices, honest advice and no surprises along the way.

This week

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. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.

Later

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. Our packaging is plastic-free and every delivery is carbon-neutral.

<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">Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <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. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</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. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Our team has done this many times, so you never have to guess. Free shipping on orders over $50 and easy returns within 30 days. Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right.

Orbit

We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. Thousands of shoppers already trust us, and we work hard to keep it that way.

Landing

New pieces arrive every month, and the best ones sell out fast. Gift wrapping and a handwritten note are free on every order. Order before 2 pm and most items leave our warehouse the same day.

<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">Our team has done this many times, so you never have to guess. Free shipping on orders over $50 and easy returns within 30 days. Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</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. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">New pieces arrive every month, and the best ones sell out fast. 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>
</div>

20Changelog

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

v3.2 Aug 9, 2026

NewWe listen first, then build a plan around what you actually need.
ImprovedFree shipping on orders over $50 and easy returns within 30 days.
FixedOrder before 2 pm and most items leave our warehouse the same day.

v3.1 Oct 21, 2025

NewMembers get early access to new drops and prices only they can see.
ImprovedWe work directly with makers, so prices stay fair for everyone.
FixedGift wrapping and a handwritten note are free on every order.

v3.0 Sep 25, 2026

NewEach product is checked by hand before it goes into the box.
ImprovedEvery detail is handled by people who care about getting it right.
FixedNew pieces arrive every month, and the best ones sell out fast.

v2.9 Sep 24, 2025

NewWe measure success by how many shoppers come back and tell their friends.
ImprovedEvery piece is made in small batches from materials we test ourselves.
FixedNot sure about the size? Our fit guide and live chat help you choose.

<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">Aug 9, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</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>Order before 2 pm and most items leave our warehouse the same day.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 21, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Members get early access to new drops and prices only they can see.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We work directly with makers, so prices stay fair for everyone.</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-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 25, 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>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>New pieces arrive every month, and the best ones sell out fast.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Sep 24, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many shoppers come back and tell their friends.</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>Not sure about the size? Our fit guide and live chat help you choose.</li>
        </ul>
      </div>
    </div>
  </div>
</div>