Scrollspy

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

1In a navbar

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

Intro

Every detail is handled by people who care about getting it right. Thousands of five-star reviews from customers who came back for more. Order before 2 pm and most items leave our warehouse the same day. Not sure about the size? Our fit guide and live chat help you choose.

Gift wrapping and a handwritten note are free on every order. Friendly people answer your questions quickly, by phone, chat or email. 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.

Details

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.

Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box.

Pricing

Our packaging is plastic-free and every delivery is carbon-neutral. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

Pay securely with card, wallet or in three interest-free instalments. Free shipping on orders over $50 and easy returns within 30 days. Members get early access to new drops and prices only they can see. Order before 2 pm and most items leave our warehouse the same day.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Pixel Nest</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">Every detail is handled by people who care about getting it right. Thousands of five-star reviews from customers who came back for more. Order before 2 pm and most items leave our warehouse the same day. Not sure about the size? Our fit guide and live chat help you choose.</p>
    <p class="small">Gift wrapping and a handwritten note are free on every order. Friendly people answer your questions quickly, by phone, chat or email. 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-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 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>
    <p class="small">Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box.</p>
  </div>
  <div id="spy-1124" class="pb-4">
    <h3 class="h6">Pricing</h3>
    <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Free shipping on orders over $50 and easy returns within 30 days. Members get early access to new drops and prices only they can see. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Gift wrapping and a handwritten note are free on every order. Each product is checked by hand before it goes into the box. Clear prices, honest advice and no surprises along the way.

Step two

We work directly with makers, so prices stay fair for everyone. New pieces arrive every month, and the best ones sell out fast. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.

Step three

Our team has done this many times, so you never have to guess. Pay securely with card, wallet or in three interest-free instalments. We keep things simple, so you can focus on what matters to you.

Step four

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

<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">Gift wrapping and a handwritten note are free on every order. 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-1127" class="pb-4">
    <h3 class="h6">Step two</h3>
    <p class="small">We work directly with makers, so prices stay fair for everyone. New pieces arrive every month, and the best ones sell out fast. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Pay securely with card, wallet or in three interest-free instalments. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</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. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
</div>

3Vertical pills

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

Live order tracking

Not sure about the size? Our fit guide and live chat help you choose. Thousands of five-star reviews from customers who came back for more. 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.

Secure checkout

Our packaging is plastic-free and every delivery is carbon-neutral. Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day.

Free shipping

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.

Questions

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

<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">Live order tracking</a><a class="nav-link" href="#spy-1132">Secure checkout</a><a class="nav-link" href="#spy-1133">Free shipping</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-4">
        <h3 class="h6">Live order tracking</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. Thousands of five-star reviews from customers who came back for more. 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.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Secure checkout</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. 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-1133" class="pb-4">
        <h3 class="h6">Free shipping</h3>
        <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-1134" class="pb-4">
        <h3 class="h6">Questions</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Gift wrapping and a handwritten note are free on every order. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Our packaging is plastic-free and every delivery is carbon-neutral. Pay securely with card, wallet or in three interest-free instalments.

Install

Not sure about the size? Our fit guide and live chat help you choose. We measure success by how many shoppers come back and tell their friends. New pieces arrive every month, and the best ones sell out fast.

Configure

Members get early access to new drops and prices only they can see. Our team has done this many times, so you never have to guess. We work directly with makers, so prices stay fair for everyone. Thousands of five-star reviews from customers who came back for more.

Usage

We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. 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.

Examples

Friendly people answer your questions quickly, by phone, chat or email. Not sure about the size? Our fit guide and live chat help you choose. Our packaging is plastic-free and every delivery is carbon-neutral.

<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">Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Our packaging is plastic-free and every delivery is carbon-neutral. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1137" class="pb-4">
        <h3 class="h6">Install</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. We measure success by how many shoppers come back and tell their friends. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1138" class="pb-4">
        <h3 class="h6">Configure</h3>
        <p class="small">Members get early access to new drops and prices only they can see. Our team has done this many times, so you never have to guess. We work directly with makers, so prices stay fair for everyone. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</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. New pieces arrive every month, and the best ones sell out fast. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Not sure about the size? Our fit guide and live chat help you choose. Our packaging is plastic-free and every delivery is carbon-neutral.</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

Start in minutes and get help from a real person whenever you need it. Order before 2 pm and most items leave our warehouse the same day. We keep things simple, so you can focus on what matters to you. Thousands of five-star reviews from customers who came back for more.

Midday

Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone.

Afternoon

Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves. We measure success by how many shoppers come back and tell their friends. Our team has done this many times, so you never have to guess.

Evening

We listen first, then build a plan around what you actually need. 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.

<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">Start in minutes and get help from a real person whenever you need it. Order before 2 pm and most items leave our warehouse the same day. We keep things simple, so you can focus on what matters to you. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. 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-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves. We measure success by how many shoppers come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">We listen first, then build a plan around what you actually need. 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>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

Beta

We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box. We keep things simple, so you can focus on what matters to you.

Gamma

Free shipping on orders over $50 and easy returns within 30 days. New pieces arrive every month, and the best ones sell out fast. Gift wrapping and a handwritten note are free on every order. We listen first, then build a plan around what you actually need.

<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">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. New pieces arrive every month, and the best ones sell out fast. Gift wrapping and a handwritten note are free on every order. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Thousands of five-star reviews from customers who came back for more. 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. Order before 2 pm and most items leave our warehouse the same day.

Features

Members get early access to new drops and prices only they can see. Our team has done this many times, so you never have to guess. Our packaging is plastic-free and every delivery is carbon-neutral.

Reviews

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. Every piece is made in small batches from materials we test ourselves. Thousands of shoppers already trust us, and we work hard to keep it that way.

FAQ

Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments.

<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">Thousands of five-star reviews from customers who came back for more. 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. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1152" class="pb-4">
    <h3 class="h6">Features</h3>
    <p class="small">Members get early access to new drops and prices only they can see. Our team has done this many times, so you never have to guess. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
  </div>
  <div id="spy-1153" class="pb-4">
    <h3 class="h6">Reviews</h3>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments.</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 team has done this many times, so you never have to guess. Thousands of five-star reviews from customers who came back for more. Gift wrapping and a handwritten note are free on every order. Every piece is made in small batches from materials we test ourselves.

Background

Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box.

Method

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

Results

Members get early access to new drops and prices only they can see. Thousands of shoppers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral.

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 team has done this many times, so you never have to guess. Thousands of five-star reviews from customers who came back for more. 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-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1159" class="pb-4">
        <h3 class="h6">Results</h3>
        <p class="small">Members get early access to new drops and prices only they can see. Thousands of shoppers already trust us, and we work hard to keep it that way. 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>
  </div>
  <div class="col-md-3 order-first md:order-last">
    <p class="small font-semibold uppercase text-muted mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-col small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

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

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

Create an account

Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.

Set up your profile

Members get early access to new drops and prices only they can see. Order before 2 pm and most items leave our warehouse the same day. Our team has done this many times, so you never have to guess. Thousands of five-star reviews from customers who came back for more.

Invite the team

We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral. We work directly with makers, so prices stay fair for everyone. Start in minutes and get help from a real person whenever you need it.

Go live

New pieces arrive every month, and the best ones sell out fast. We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. Clear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-4">
        <h3 class="h6">Create an account</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Members get early access to new drops and prices only they can see. Order before 2 pm and most items leave our warehouse the same day. Our team has done this many times, so you never have to guess. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</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. We work directly with makers, so prices stay fair for everyone. Start in minutes and get help from a real person whenever you need it.</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. We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our favourite tips for busy weeks

Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Friendly people answer your questions quickly, by phone, chat or email.

2024

How to choose the right product

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. We measure success by how many shoppers come back and tell their friends. Not sure about the size? Our fit guide and live chat help you choose.

2025

Five pieces for a capsule wardrobe

Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

2026

A beginner's guide to getting started

Each product is checked by hand before it goes into the box. Order before 2 pm and most items leave our warehouse the same day. Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order.

<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 favourite tips for busy weeks</h3>
    <p class="small mb-0">Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box. Friendly people answer your questions quickly, by phone, chat or email.</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">How to choose the right product</h3>
    <p class="small mb-0">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. We measure success by how many shoppers come back and tell their friends. Not sure about the size? Our fit guide and live chat help you choose.</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">Five pieces for a capsule wardrobe</h3>
    <p class="small mb-0">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">Each product is checked by hand before it goes into the box. Order before 2 pm and most items leave our warehouse the same day. 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>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

The small habits that make a big difference?: We work directly with makers, so prices stay fair for everyone.
Five things we learned this year?: Free shipping on orders over $50 and easy returns within 30 days.
Styling one piece three different ways?: Pay securely with card, wallet or in three interest-free instalments.

Shipping

A three-step skincare routine that works?: Our packaging is plastic-free and every delivery is carbon-neutral.
What to pack for a rainy weekend outdoors?: We listen first, then build a plan around what you actually need.
Looking back at a busy season?: Start in minutes and get help from a real person whenever you need it.

Returns

A small guide to a calmer home?: New pieces arrive every month, and the best ones sell out fast.
Meet the makers behind our ceramics?: We measure success by how many shoppers come back and tell their friends.
How to care for linen so it lasts for years?: Every detail is handled by people who care about getting it right.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-muted">We work directly with makers, so prices stay fair for everyone.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-muted">Free shipping on orders over $50 and easy returns within 30 days.</dd>
          <dt class="small">Styling one piece three different ways?</dt>
          <dd class="small text-muted">Pay securely with card, wallet or in three interest-free instalments.</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">A three-step skincare routine that works?</dt>
          <dd class="small text-muted">Our packaging is plastic-free and every delivery is carbon-neutral.</dd>
          <dt class="small">What to pack for a rainy weekend outdoors?</dt>
          <dd class="small text-muted">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-muted">Start in minutes and get help from a real person whenever you need it.</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">A small guide to a calmer home?</dt>
          <dd class="small text-muted">New pieces arrive every month, and the best ones sell out fast.</dd>
          <dt class="small">Meet the makers behind our ceramics?</dt>
          <dd class="small text-muted">We measure success by how many shoppers come back and tell their friends.</dd>
          <dt class="small">How to care for linen so it lasts for years?</dt>
          <dd class="small text-muted">Every detail is handled by people who care about getting it right.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Every piece is made in small batches from materials we test ourselves. Not sure about the size? Our fit guide and live chat help you choose. We keep things simple, so you can focus on what matters to you.

Battery

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

Connectivity

We keep things simple, so you can focus on what matters to you. Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. We work directly with makers, so prices stay fair for everyone.

Security

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

<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 piece is made in small batches from materials we test ourselves. Not sure about the size? Our fit guide and live chat help you choose. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1176" class="pb-4">
        <h3 class="h6">Battery</h3>
        <p class="small">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. 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.</p>
      </div>
      <div id="spy-1177" class="pb-4">
        <h3 class="h6">Connectivity</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</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. Members get early access to new drops and prices only they can see.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$10.62 / mo

Carbon-neutral delivery
Sustainable materials
Secure payments

Team

$41.51 / mo

Sustainable materials
Carbon-neutral delivery
Hand-checked quality

Business

$54.65 / mo

Sustainable materials
Hand-checked quality
Member prices

<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">$10.62<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Carbon-neutral delivery</li>
        <li>Sustainable materials</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">$41.51<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Sustainable materials</li>
        <li>Carbon-neutral delivery</li>
        <li>Hand-checked quality</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">$54.65<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Sustainable materials</li>
        <li>Hand-checked quality</li>
        <li>Member prices</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Inside our new autumn collection

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

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

Chapter 2: What our shoppers asked us most

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.

Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. We measure success by how many shoppers come back and tell their friends.

Chapter 3: How we choose sustainable materials

Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Gift wrapping and a handwritten note are free on every order. New pieces arrive every month, and the best ones sell out fast.

Our team has done this many times, so you never have to guess. Our packaging is plastic-free and every delivery is carbon-neutral. Clear prices, honest advice and no surprises along the way. Not sure about the size? Our fit guide and live chat help you choose.

Chapter 4: Our guide to gifts under $50

Every piece is made in small batches from materials we test ourselves. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.

Thousands of shoppers already trust us, and we work hard to keep it that way. Free shipping on orders over $50 and easy returns within 30 days. Each product is checked by hand before it goes into the box.

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

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

We keep things simple, so you can focus on what matters to you. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day. Thousands of five-star reviews from customers who came back for more.

Notifications

Product news

Weekly digest

Pay securely with card, wallet or in three interest-free instalments. 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 packaging is plastic-free and every delivery is carbon-neutral.

Privacy

Hide my profile from search

Start in minutes and get help from a real person whenever you need it. Not sure about the size? Our fit guide and live chat help you choose. Each product is checked by hand before it goes into the box. We keep things simple, so you can focus on what matters to you.

<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="Aria Kim">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Melbourne">
        </div>
        <p class="small">We keep things simple, so you can focus on what matters to you. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day. Thousands of five-star reviews from customers who came back for more.</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">Pay securely with card, wallet or in three interest-free instalments. 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 packaging is plastic-free and every delivery is carbon-neutral.</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">Start in minutes and get help from a real person whenever you need it. Not sure about the size? Our fit guide and live chat help you choose. Each product is checked by hand before it goes into the box. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Research

Finn Larsen
Marketing Lead
Kai Sato
Art Director
Theo Quinn
Project Manager

Legal

Ava Haddad
Marketing Lead
Leo Mensah
Data Analyst
Ruby Whitaker
HR Partner

Sales

Nadia Duarte
Operations Manager
Zoe Delgado
Support Specialist
Priya Alvarez
Operations Manager

<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">Legal</a><a class="nav-link" href="#spy-1200">Sales</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-1.svg" class="rounded-full" width="36" height="36" alt="Finn Larsen"><div><div class="small font-semibold">Finn Larsen</div><div class="small text-muted">Marketing Lead</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Kai Sato"><div><div class="small font-semibold">Kai Sato</div><div class="small text-muted">Art Director</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="Theo Quinn"><div><div class="small font-semibold">Theo Quinn</div><div class="small text-muted">Project Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="36" height="36" alt="Ava Haddad"><div><div class="small font-semibold">Ava Haddad</div><div class="small text-muted">Marketing Lead</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Leo Mensah"><div><div class="small font-semibold">Leo Mensah</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-10.svg" class="rounded-full" width="36" height="36" alt="Ruby Whitaker"><div><div class="small font-semibold">Ruby Whitaker</div><div class="small text-muted">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-4">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Nadia Duarte"><div><div class="small font-semibold">Nadia Duarte</div><div class="small text-muted">Operations Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Zoe Delgado"><div><div class="small font-semibold">Zoe Delgado</div><div class="small text-muted">Support Specialist</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Priya Alvarez"><div><div class="small font-semibold">Priya Alvarez</div><div class="small text-muted">Operations Manager</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Outdoor

Leather wallet$55.00
Face oil$37.00
Glass bottle$25.00

Home

Cotton throw$77.00
Linen shirt$73.00
Desk lamp$85.99

Apparel

Cotton throw$79.00
Face oil$37.99
Glass bottle$26.00

<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">Home</a><a class="nav-link" href="#spy-1204">Apparel</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>Leather wallet</span><span class="font-semibold">$55.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Face oil</span><span class="font-semibold">$37.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Glass bottle</span><span class="font-semibold">$25.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Home</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Cotton throw</span><span class="font-semibold">$77.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Linen shirt</span><span class="font-semibold">$73.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Desk lamp</span><span class="font-semibold">$85.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">Apparel</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Cotton throw</span><span class="font-semibold">$79.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Face oil</span><span class="font-semibold">$37.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Glass bottle</span><span class="font-semibold">$26.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. We measure success by how many shoppers come back and tell their friends. Clear prices, honest advice and no surprises along the way.

This week

Order before 2 pm and most items leave our warehouse the same day. New pieces arrive every month, and the best ones sell out fast. Every detail is handled by people who care about getting it right. Gift wrapping and a handwritten note are free on every order.

Later

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

<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">Every piece is made in small batches from materials we test ourselves. We measure success by how many shoppers come back and tell their friends. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. New pieces arrive every month, and the best ones sell out fast. 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-1208" class="pb-4">
        <h3 class="h6">Later</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. Thousands of shoppers already trust us, and we work hard to keep it that way. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Pay securely with card, wallet or in three interest-free instalments. We work directly with makers, so prices stay fair for everyone. Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email.

Orbit

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. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.

Landing

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

<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">Pay securely with card, wallet or in three interest-free instalments. We work directly with makers, so prices stay fair for everyone. Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">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. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">Pay securely with card, wallet or in three interest-free instalments. 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>
</div>

20Changelog

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

v3.2 Oct 6, 2026

NewNew pieces arrive every month, and the best ones sell out fast.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedThousands of five-star reviews from customers who came back for more.

v3.1 Oct 7, 2026

NewFree shipping on orders over $50 and easy returns within 30 days.
ImprovedNot sure about the size? Our fit guide and live chat help you choose.
FixedOur team has done this many times, so you never have to guess.

v3.0 Jun 22, 2026

NewEvery piece is made in small batches from materials we test ourselves.
ImprovedWe listen first, then build a plan around what you actually need.
FixedWe keep things simple, so you can focus on what matters to you.

v2.9 Oct 28, 2025

NewEach product is checked by hand before it goes into the box.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
FixedClear prices, honest advice and no surprises along the way.

<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 6, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>New pieces arrive every month, and the best ones sell out fast.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Thousands of five-star reviews from customers who came back for more.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">Oct 7, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Free shipping on orders over $50 and easy returns within 30 days.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Not sure about the size? Our fit guide and live chat help you choose.</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-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Jun 22, 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>We listen first, then build a plan around what you actually need.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Oct 28, 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>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
    </div>
  </div>
</div>