Scrollspy

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

1In a navbar

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

Intro

We work directly with makers, so prices stay fair for everyone. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.

Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. New pieces arrive every month, and the best ones sell out fast.

Details

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

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

Pricing

Gift wrapping and a handwritten note are free on every order. Our packaging is plastic-free and every delivery is carbon-neutral. 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. Free shipping on orders over $50 and easy returns within 30 days. Not sure about the size? Our fit guide and live chat help you choose.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Mira Point</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
  </ul>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-4">
    <h3 class="h6">Intro</h3>
    <p class="small">We work directly with makers, so prices stay fair for everyone. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. New pieces arrive every month, and the best ones sell out fast.</p>
  </div>
  <div id="spy-1123" class="pb-4">
    <h3 class="h6">Details</h3>
    <p class="small">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. Order before 2 pm and most items leave our warehouse the same day.</p>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. 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.</p>
  </div>
  <div id="spy-1124" class="pb-4">
    <h3 class="h6">Pricing</h3>
    <p class="small">Gift wrapping and a handwritten note are free on every order. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of five-star reviews from customers who came back for more.</p>
    <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Free shipping on orders over $50 and easy returns within 30 days. Not sure about the size? Our fit guide and live chat help you choose.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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. Every piece is made in small batches from materials we test ourselves. Friendly people answer your questions quickly, by phone, chat or email.

Step two

Gift wrapping and a handwritten note are free on every order. Each product is checked by hand before it goes into the box. We measure success by how many shoppers come back and tell their friends.

Step three

Order before 2 pm and most items leave our warehouse the same day. Our packaging is plastic-free and every delivery is carbon-neutral. Not sure about the size? Our fit guide and live chat help you choose. Start in minutes and get help from a real person whenever you need it.

Step four

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. Thousands of five-star reviews from customers who came back for more. Free shipping on orders over $50 and easy returns within 30 days.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-4">
    <h3 class="h6">Step one</h3>
    <p class="small">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. Every piece is made in small batches from materials we test ourselves. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1127" class="pb-4">
    <h3 class="h6">Step two</h3>
    <p class="small">Gift wrapping and a handwritten note are free on every order. Each product is checked by hand before it goes into the box. We measure success by how many shoppers come back and tell their friends.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">Order before 2 pm and most items leave our warehouse the same day. Our packaging is plastic-free and every delivery is carbon-neutral. Not sure about the size? Our fit guide and live chat help you choose. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</h3>
    <p class="small">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. Thousands of five-star reviews from customers who came back for more. Free shipping on orders over $50 and easy returns within 30 days.</p>
  </div>
</div>

3Vertical pills

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

Free shipping

Pay securely with card, wallet or in three interest-free instalments. Every piece is made in small batches from materials we test ourselves. New pieces arrive every month, and the best ones sell out fast. Every detail is handled by people who care about getting it right.

Secure checkout

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

30-day returns

We work directly with makers, so prices stay fair for everyone. 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. Each product is checked by hand before it goes into the box.

Questions

We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. Thousands of five-star reviews from customers who came back for more.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-col">
      <a class="nav-link" href="#spy-1131">Free shipping</a><a class="nav-link" href="#spy-1132">Secure checkout</a><a class="nav-link" href="#spy-1133">30-day returns</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-4">
        <h3 class="h6">Free shipping</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. Every piece is made in small batches from materials we test ourselves. New pieces arrive every month, and the best ones sell out fast. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Secure checkout</h3>
        <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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1133" class="pb-4">
        <h3 class="h6">30-day returns</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. Members get early access to new drops and prices only they can see. Each product is checked by hand before it goes into the box.</p>
      </div>
      <div id="spy-1134" class="pb-4">
        <h3 class="h6">Questions</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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

Install

Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order. Pay securely with card, wallet or in three interest-free instalments. Every piece is made in small batches from materials we test ourselves.

Configure

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

Usage

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

Examples

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-full flex-col items-stretch">
      <nav class="nav nav-pills flex-col">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-4">
        <h3 class="h6">Getting started</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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-1137" class="pb-4">
        <h3 class="h6">Install</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order. 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 id="spy-1138" class="pb-4">
        <h3 class="h6">Configure</h3>
        <p class="small">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. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</h3>
        <p class="small">Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</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 packaging is plastic-free and every delivery is carbon-neutral. 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.

Midday

We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. Friendly people answer your questions quickly, by phone, chat or email.

Afternoon

Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Order before 2 pm and most items leave our warehouse the same day. Free shipping on orders over $50 and easy returns within 30 days.

Evening

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

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-4">
        <h3 class="h6">Morning</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. Our packaging is plastic-free and every delivery is carbon-neutral. 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.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Order before 2 pm and most items leave our warehouse the same day. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. 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.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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

Beta

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

Gamma

Every piece is made in small batches from materials we test ourselves. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="flex flex-col gap-2 small">
      <a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-4">
        <h3 class="h6">Alpha</h3>
        <p class="small">We measure success by how many shoppers come back and tell their friends. 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.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. 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-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">Every piece is made in small batches from materials we test ourselves. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

New pieces arrive every month, and the best ones sell out fast. 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.

Features

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.

Reviews

We work directly with makers, so prices stay fair for everyone. 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. Pay securely with card, wallet or in three interest-free instalments.

FAQ

Gift wrapping and a handwritten note are free on every order. Thousands of five-star reviews from customers who came back for more. Friendly people answer your questions quickly, by phone, chat or email.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="relative border rounded-md p-4 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-4">
    <h3 class="h6">Overview</h3>
    <p class="small">New pieces arrive every month, and the best ones sell out fast. 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-1152" class="pb-4">
    <h3 class="h6">Features</h3>
    <p class="small">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.</p>
  </div>
  <div id="spy-1153" class="pb-4">
    <h3 class="h6">Reviews</h3>
    <p class="small">We work directly with makers, so prices stay fair for everyone. 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. Pay securely with card, wallet or in three interest-free instalments.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</h3>
    <p class="small">Gift wrapping and a handwritten note are free on every order. Thousands of five-star reviews from customers who came back for more. 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

Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right. 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.

Background

Each product is checked by hand before it goes into the box. Thousands of five-star reviews from customers who came back for more. Free shipping on orders over $50 and easy returns within 30 days. Pay securely with card, wallet or in three interest-free instalments.

Method

Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone.

Results

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. Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-4">
        <h3 class="h6">Summary</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right. 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-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Thousands of five-star reviews from customers who came back for more. Free shipping on orders over $50 and easy returns within 30 days. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
      <div id="spy-1159" class="pb-4">
        <h3 class="h6">Results</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. Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first md:order-last">
    <p class="small font-semibold uppercase text-muted mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-col small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

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

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

Create an account

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. Each product is checked by hand before it goes into the box.

Set up your profile

Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral.

Invite the team

Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it.

Go live

New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way. Gift wrapping and a handwritten note are free on every order. 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="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-4">
        <h3 class="h6">Create an account</h3>
        <p class="small">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. Each product is checked by hand before it goes into the box.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1164" class="pb-4">
        <h3 class="h6">Go live</h3>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way. Gift wrapping and a handwritten note are free on every order. 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

Our guide to gifts under $50

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

2024

Looking back at a busy season

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. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box.

2025

How to care for linen so it lasts for years

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. Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves.

2026

Five things we learned this year

Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments. We listen first, then build a plan around what you actually need.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Our guide to gifts under $50</h3>
    <p class="small mb-0">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. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">Looking back at a busy season</h3>
    <p class="small mb-0">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. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box.</p>
  </div>
  <div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">How to care for linen so it lasts for years</h3>
    <p class="small mb-0">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. Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves.</p>
  </div>
  <div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Five things we learned this year</h3>
    <p class="small mb-0">Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments. We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Five pieces for a capsule wardrobe?: Our team has done this many times, so you never have to guess.
What our shoppers asked us most?: We work directly with makers, so prices stay fair for everyone.
Our favourite tips for busy weeks?: Every detail is handled by people who care about getting it right.

Shipping

Inside our new autumn collection?: Friendly people answer your questions quickly, by phone, chat or email.
The small habits that make a big difference?: Clear prices, honest advice and no surprises along the way.
A beginner's guide to getting started?: Not sure about the size? Our fit guide and live chat help you choose.

Returns

Styling one piece three different ways?: Gift wrapping and a handwritten note are free on every order.
How we choose sustainable materials?: We listen first, then build a plan around what you actually need.
What to pack for a rainy weekend outdoors?: 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 sm:flex-col">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Five pieces for a capsule wardrobe?</dt>
          <dd class="small text-muted">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">What our shoppers asked us most?</dt>
          <dd class="small text-muted">We work directly with makers, so prices stay fair for everyone.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-muted">Every detail is handled by people who care about getting it right.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Inside our new autumn collection?</dt>
          <dd class="small text-muted">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-muted">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-muted">Not sure about the size? Our fit guide and live chat help you choose.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Styling one piece three different ways?</dt>
          <dd class="small text-muted">Gift wrapping and a handwritten note are free on every order.</dd>
          <dt class="small">How we choose sustainable materials?</dt>
          <dd class="small text-muted">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">What to pack for a rainy weekend outdoors?</dt>
          <dd class="small text-muted">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

Every detail is handled by people who care about getting it right. New pieces arrive every month, and the best ones sell out fast. Pay securely with card, wallet or in three interest-free instalments. Thousands of shoppers already trust us, and we work hard to keep it that way.

Battery

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

Connectivity

Clear prices, honest advice and no surprises along the way. We work directly with makers, so prices stay fair for everyone. Free shipping on orders over $50 and easy returns within 30 days.

Security

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. Every piece is made in small batches from materials we test ourselves. Our packaging is plastic-free and every delivery is carbon-neutral.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-col">
      <a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-4">
        <h3 class="h6">Performance</h3>
        <p class="small">Every detail is handled by people who care about getting it right. New pieces arrive every month, and the best ones sell out fast. Pay securely with card, wallet or in three interest-free instalments. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1176" class="pb-4">
        <h3 class="h6">Battery</h3>
        <p class="small">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. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1177" class="pb-4">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. We work directly with makers, so prices stay fair for everyone. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</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. Every piece is made in small batches from materials we test ourselves. Our packaging is plastic-free and every delivery is carbon-neutral.</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.06 / mo

Secure payments
Carbon-neutral delivery
Secure payments

Team

$46.46 / mo

Hand-checked quality
Easy exchanges
Carbon-neutral delivery

Business

$77.60 / mo

Hand-checked quality
Sustainable materials
Hand-checked quality

<nav id="spy-nav-1179" class="nav nav-pills justify-center mb-2">
  <a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="relative border rounded-md p-4 bg-surface-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1180" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="text-xl font-bold mb-1">$18.06<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Secure payments</li>
        <li>Carbon-neutral delivery</li>
        <li>Secure payments</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="text-xl font-bold mb-1">$46.46<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Hand-checked quality</li>
        <li>Easy exchanges</li>
        <li>Carbon-neutral delivery</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="text-xl font-bold mb-1">$77.60<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Hand-checked quality</li>
        <li>Sustainable materials</li>
        <li>Hand-checked quality</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: A small guide to a calmer home

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

Members get early access to new drops and prices only they can see. Gift wrapping and a handwritten note are free on every order. We measure success by how many shoppers come back and tell their friends. Free shipping on orders over $50 and easy returns within 30 days.

Chapter 2: Meet the makers behind our ceramics

Order before 2 pm and most items leave our warehouse the same day. Our packaging is plastic-free and every delivery is carbon-neutral. Pay securely with card, wallet or in three interest-free instalments.

Thousands of five-star reviews from customers who came back for more. Friendly people answer your questions quickly, by phone, chat or email. Each product is checked by hand before it goes into the box.

Chapter 3: How to choose the right product

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. We work directly with makers, so prices stay fair for everyone. 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. Every piece is made in small batches from materials we test ourselves. Our team has done this many times, so you never have to guess.

Chapter 4: A three-step skincare routine that works

Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

We work directly with makers, so prices stay fair for everyone. Members get early access to new drops and prices only they can see. Not sure about the size? Our fit guide and live chat help you choose.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-4">
    <h3 class="h6">Chapter 1: A small guide to a calmer home</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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.</p>
    <p class="small">Members get early access to new drops and prices only they can see. Gift wrapping and a handwritten note are free on every order. We measure success by how many shoppers come back and tell their friends. Free shipping on orders over $50 and easy returns within 30 days.</p>
  </div>
  <div id="spy-1185" class="pb-4">
    <h3 class="h6">Chapter 2: Meet the makers behind our ceramics</h3>
    <p class="small">Order before 2 pm and most items leave our warehouse the same day. Our packaging is plastic-free and every delivery is carbon-neutral. Pay securely with card, wallet or in three interest-free instalments.</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. Each product is checked by hand before it goes into the box.</p>
  </div>
  <div id="spy-1186" class="pb-4">
    <h3 class="h6">Chapter 3: How to choose the right product</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. We work directly with makers, so prices stay fair for everyone. New pieces arrive every month, and the best ones sell out fast.</p>
    <p class="small">Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1187" class="pb-4">
    <h3 class="h6">Chapter 4: A three-step skincare routine that works</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
    <p class="small">We work directly with makers, so prices stay fair for everyone. Members get early access to new drops and prices only they can see. Not sure about the size? Our fit guide and live chat help you choose.</p>
  </div>
</div>

15Settings form

A long settings form split into sections with a side menu that follows along.

Profile Notifications Privacy

Profile

Display name

City

We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box.

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral. Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-4">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Jonah Silva">
        </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="Vancouver">
        </div>
        <p class="small">We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box.</p>
      </div>
      <div id="spy-1190" class="pb-4">
        <h3 class="h6">Notifications</h3>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
          <label class="form-check-label small" for="spy-sw-1194">Product news</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
          <label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
        </div>
        <p class="small">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. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1191" class="pb-4">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral. 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>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Research

Noah Harlow
Customer Success
Finn Morgan
HR Partner
Ella Delgado
Operations Manager

Finance

Noah Nguyen
Data Analyst
Omar Kim
Project Manager
Lucas Silva
Data Analyst

Marketing

Jonah Alvarez
HR Partner
Isla Harlow
Product Designer
Kenji Carter
QA Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Research</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Marketing</a>
</nav>
<div class="relative border rounded-md p-4" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-4">
    <h3 class="h6">Research</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-full" width="36" height="36" alt="Noah Harlow"><div><div class="small font-semibold">Noah Harlow</div><div class="small text-muted">Customer Success</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Finn Morgan"><div><div class="small font-semibold">Finn Morgan</div><div class="small text-muted">HR Partner</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Ella Delgado"><div><div class="small font-semibold">Ella Delgado</div><div class="small text-muted">Operations Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Finance</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Noah Nguyen"><div><div class="small font-semibold">Noah Nguyen</div><div class="small text-muted">Data Analyst</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Omar Kim"><div><div class="small font-semibold">Omar Kim</div><div class="small text-muted">Project Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Lucas Silva"><div><div class="small font-semibold">Lucas Silva</div><div class="small text-muted">Data Analyst</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-4">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Jonah Alvarez"><div><div class="small font-semibold">Jonah Alvarez</div><div class="small text-muted">HR Partner</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-full" width="36" height="36" alt="Isla Harlow"><div><div class="small font-semibold">Isla Harlow</div><div class="small text-muted">Product Designer</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Kenji Carter"><div><div class="small font-semibold">Kenji Carter</div><div class="small text-muted">QA Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Outdoor

Rain jacket$120.00
Glass bottle$24.00
Hand cream$16.00

Apparel

Glass bottle$24.00
Running cap$24.99
Wool scarf$41.00

Beauty

Face oil$36.99
Rain jacket$124.99
Ceramic mug$21.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Outdoor</a><a class="nav-link" href="#spy-1203">Apparel</a><a class="nav-link" href="#spy-1204">Beauty</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-4">
    <h3 class="h6">Outdoor</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Rain jacket</span><span class="font-semibold">$120.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Glass bottle</span><span class="font-semibold">$24.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Hand cream</span><span class="font-semibold">$16.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Apparel</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Glass bottle</span><span class="font-semibold">$24.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Running cap</span><span class="font-semibold">$24.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Wool scarf</span><span class="font-semibold">$41.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">Beauty</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Face oil</span><span class="font-semibold">$36.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Rain jacket</span><span class="font-semibold">$124.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Ceramic mug</span><span class="font-semibold">$21.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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

This week

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

Later

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

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="relative border rounded-md p-4 border-0 rounded-none" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-4">
        <h3 class="h6">Today</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. 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. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">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. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
      <div id="spy-1208" class="pb-4">
        <h3 class="h6">Later</h3>
        <p class="small">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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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

Orbit

Pay securely with card, wallet or in three interest-free instalments. Gift wrapping and a handwritten note are free on every order. Members get early access to new drops and prices only they can see. We work directly with makers, so prices stay fair for everyone.

Landing

Thousands of five-star reviews from customers who came back for more. 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-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="relative border rounded-md p-4 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-4">
      <h3 class="h6">Launch</h3>
      <p class="small">Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast. We listen first, then build a plan around what you actually need.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">Pay securely with card, wallet or in three interest-free instalments. Gift wrapping and a handwritten note are free on every order. Members get early access to new drops and prices only they can see. We work directly with makers, so prices stay fair for everyone.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">Thousands of five-star reviews from customers who came back for more. 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 Oct 1, 2026

NewEvery piece is made in small batches from materials we test ourselves.
ImprovedOrder before 2 pm and most items leave our warehouse the same day.
FixedOur team has done this many times, so you never have to guess.

v3.1 Mar 22, 2026

NewWe keep things simple, so you can focus on what matters to you.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedNot sure about the size? Our fit guide and live chat help you choose.

v3.0 Dec 2, 2025

NewEach product is checked by hand before it goes into the box.
ImprovedFree shipping on orders over $50 and easy returns within 30 days.
FixedGift wrapping and a handwritten note are free on every order.

v2.9 Mar 22, 2026

NewOur team has done this many times, so you never have to guess.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedWe listen first, then build a plan around what you actually need.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-col small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-4">
        <h3 class="h6">v3.2 <small class="text-muted font-normal">Oct 1, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every piece is made in small batches from materials we test ourselves.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Order before 2 pm and most items leave our warehouse the same day.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">Mar 22, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Not sure about the size? Our fit guide and live chat help you choose.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Dec 2, 2025</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>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>Gift wrapping and a handwritten note are free on every order.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Mar 22, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
    </div>
  </div>
</div>