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

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. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of five-star reviews from customers who came back for more.

Details

Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it.

We keep things simple, so you can focus on what matters to you. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days. Order before 2 pm and most items leave our warehouse the same day.

Pricing

Pay securely with card, wallet or in three interest-free instalments. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

Clear prices, honest advice and no surprises along the way. Free shipping on orders over $50 and easy returns within 30 days. We measure success by how many shoppers come back and tell their friends. Not sure about the size? Our fit guide and live chat help you choose.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Sage</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="position-relative border rounded p-3" 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-3">
    <h3 class="h6">Intro</h3>
    <p class="small">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. Each product is checked by hand before it goes into the box.</p>
    <p class="small">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. Our packaging is plastic-free and every delivery is carbon-neutral. Thousands of five-star reviews from customers who came back for more.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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>
    <p class="small">We keep things simple, so you can focus on what matters to you. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
    <p class="small">Clear prices, honest advice and no surprises along the way. Free shipping on orders over $50 and easy returns within 30 days. We measure success by how many shoppers come back and tell their friends. 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

Each product is checked by hand before it goes into the box. Every detail is handled by people who care about getting it right. Thousands of five-star reviews from customers who came back for more. Clear prices, honest advice and no surprises along the way.

Step two

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.

Step three

Gift wrapping and a handwritten note are free on every order. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.

Step four

Order before 2 pm and most items leave our warehouse the same day. We listen first, then build a plan around what you actually need. 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="position-relative border rounded p-3" 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-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Each product is checked by hand before it goes into the box. Every detail is handled by people who care about getting it right. Thousands of five-star reviews from customers who came back for more. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. We work directly with makers, so prices stay fair for everyone.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Gift wrapping and a handwritten note are free on every order. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Order before 2 pm and most items leave our warehouse the same day. We listen first, then build a plan around what you actually need. 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.

Loyalty rewards

New pieces arrive every month, and the best ones sell out fast. Friendly people answer your questions quickly, by phone, chat or email. Members get early access to new drops and prices only they can see.

Gift wrapping

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

Live order tracking

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

Questions

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. We work directly with makers, so prices stay fair for everyone. 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-column">
      <a class="nav-link" href="#spy-1131">Loyalty rewards</a><a class="nav-link" href="#spy-1132">Gift wrapping</a><a class="nav-link" href="#spy-1133">Live order tracking</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Loyalty rewards</h3>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Friendly people answer your questions quickly, by phone, chat or email. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Gift wrapping</h3>
        <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Every piece is made in small batches from materials we test ourselves. Not sure about the size? Our fit guide and live chat help you choose. We measure success by how many shoppers come back and tell their friends.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Live order tracking</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Gift wrapping and a handwritten note are free on every order. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">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. 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>
  </div>
</div>

4Nested navigation

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

Getting started

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

Install

We keep things simple, so you can focus on what matters to you. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.

Configure

Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. New pieces arrive every month, and the best ones sell out fast.

Usage

Pay securely with card, wallet or in three interest-free instalments. Each product is checked by hand before it goes into the box. 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.

Examples

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Free shipping on orders over $50 and easy returns within 30 days. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</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. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. Each product is checked by hand before it goes into the box. 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-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. 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. Every piece is made in small batches from materials we test ourselves.</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

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

Midday

Thousands of five-star reviews from customers who came back for more. Clear prices, honest advice and no surprises along the way. 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.

Afternoon

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. Members get early access to new drops and prices only they can see. Free shipping on orders over $50 and easy returns within 30 days.

Evening

Gift wrapping and a handwritten note are free on every order. New pieces arrive every month, and the best ones sell out fast. Friendly people answer your questions quickly, by phone, chat or email.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Pay securely with card, wallet or in three interest-free instalments. We listen first, then build a plan around what you actually need. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. Clear prices, honest advice and no surprises along the way. 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-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">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. Members get early access to new drops and prices only they can see. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Gift wrapping and a handwritten note are free on every order. New pieces arrive every month, and the best ones sell out fast. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Order before 2 pm and most items leave our warehouse the same day. Free shipping on orders over $50 and easy returns within 30 days. 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.

Beta

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

Gamma

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

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Free shipping on orders over $50 and easy returns within 30 days. 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.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</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. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Every piece is made in small batches from materials we test ourselves. Friendly people answer your questions quickly, by phone, chat or email. Each product is checked by hand before it goes into the box. Gift wrapping and a handwritten note are free on every order.

Features

Our packaging is plastic-free and every delivery is carbon-neutral. Members get early access to new drops and prices only they can see. We keep things simple, so you can focus on what matters to you.

Reviews

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. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.

FAQ

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Each product is checked by hand before it goes into the box.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">Every piece is made in small batches from materials we test ourselves. Friendly people answer your questions quickly, by phone, chat or email. Each product is checked by hand before it goes into the box. Gift wrapping and a handwritten note are free on every order.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Members get early access to new drops and prices only they can see. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">We measure success by how many shoppers come back and tell their friends. New pieces arrive every month, and the best ones sell out fast. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. 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>

8Table of contents on the right

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

Summary

Gift wrapping and a handwritten note are free on every order. Every detail is handled by people who care about getting it right. Thousands of shoppers already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.

Background

Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way. We measure success by how many shoppers come back and tell their friends.

Method

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

Results

We listen first, then build a plan around what you actually need. Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more. New pieces arrive every month, and the best ones sell out fast.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Gift wrapping and a handwritten note are free on every order. Every detail is handled by people who care about getting it right. Thousands of shoppers already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way. We measure success by how many shoppers come back and tell their friends.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. 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.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

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

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

Create an account

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

Set up your profile

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.

Invite the team

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. Our team has done this many times, so you never have to guess.

Go live

Gift wrapping and a handwritten note are free on every order. 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.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. 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>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</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.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Gift wrapping and a handwritten note are free on every order. 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>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

How we choose sustainable materials

Friendly people answer your questions quickly, by phone, chat or email. Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right.

2024

Meet the makers behind our ceramics

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. Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone.

2025

Styling one piece three different ways

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

2026

Our guide to gifts under $50

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. New pieces arrive every month, and the best ones sell out fast. Every piece is made in small batches from materials we test ourselves.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">How we choose sustainable materials</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Our packaging is plastic-free and every delivery is carbon-neutral. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">Meet the makers behind our ceramics</h3>
    <p class="small mb-0">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. Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone.</p>
  </div>
  <div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">Styling one piece three different ways</h3>
    <p class="small mb-0">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. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Our guide to gifts under $50</h3>
    <p class="small mb-0">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. New pieces arrive every month, and the best ones sell out fast. Every piece is made in small batches from materials we test ourselves.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

What to pack for a rainy weekend outdoors?: Order before 2 pm and most items leave our warehouse the same day.
The small habits that make a big difference?: Pay securely with card, wallet or in three interest-free instalments.
Our favourite tips for busy weeks?: New pieces arrive every month, and the best ones sell out fast.

Shipping

Five things we learned this year?: Free shipping on orders over $50 and easy returns within 30 days.
How to care for linen so it lasts for years?: Thousands of five-star reviews from customers who came back for more.
What our shoppers asked us most?: Our packaging is plastic-free and every delivery is carbon-neutral.

Returns

Looking back at a busy season?: We keep things simple, so you can focus on what matters to you.
A three-step skincare routine that works?: Clear prices, honest advice and no surprises along the way.
A beginner's guide to getting started?: Start in minutes and get help from a real person whenever you need it.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">What to pack for a rainy weekend outdoors?</dt>
          <dd class="small text-body-secondary">Order before 2 pm and most items leave our warehouse the same day.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Pay securely with card, wallet or in three interest-free instalments.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">New pieces arrive every month, and the best ones sell out fast.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Free shipping on orders over $50 and easy returns within 30 days.</dd>
          <dt class="small">How to care for linen so it lasts for years?</dt>
          <dd class="small text-body-secondary">Thousands of five-star reviews from customers who came back for more.</dd>
          <dt class="small">What our shoppers asked us most?</dt>
          <dd class="small text-body-secondary">Our packaging is plastic-free and every delivery is carbon-neutral.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">A three-step skincare routine that works?</dt>
          <dd class="small text-body-secondary">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-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

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

Battery

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. Friendly people answer your questions quickly, by phone, chat or email. We work directly with makers, so prices stay fair for everyone.

Connectivity

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. Gift wrapping and a handwritten note are free on every order.

Security

Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Each product is checked by hand before it goes into the box.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</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. Each product is checked by hand before it goes into the box.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</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. Friendly people answer your questions quickly, by phone, chat or email. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">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. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Each product is checked by hand before it goes into the box.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$16.76 / mo

Carbon-neutral delivery
Sustainable materials
Secure payments

Team

$37.37 / mo

Carbon-neutral delivery
Secure payments
Sustainable materials

Business

$52.07 / mo

Carbon-neutral delivery
Easy exchanges
Sustainable materials

<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
  <a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1180" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="fs-4 fw-bold mb-1">$16.76<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Carbon-neutral delivery</li>
        <li>Sustainable materials</li>
        <li>Secure payments</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="fs-4 fw-bold mb-1">$37.37<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Carbon-neutral delivery</li>
        <li>Secure payments</li>
        <li>Sustainable materials</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="fs-4 fw-bold mb-1">$52.07<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Carbon-neutral delivery</li>
        <li>Easy exchanges</li>
        <li>Sustainable materials</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Five pieces for a capsule wardrobe

Gift wrapping and a handwritten note are free on every order. New pieces arrive every month, and the best ones sell out fast. We work directly with makers, so prices stay fair for everyone.

Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Thousands of five-star reviews from customers who came back for more.

Chapter 2: How to choose the right product

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

Chapter 3: Inside our new autumn collection

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

Chapter 4: A small guide to a calmer home

Start in minutes and get help from a real person whenever you need it. Each product is checked by hand before it goes into the box. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

Free shipping on orders over $50 and easy returns within 30 days. Gift wrapping and a handwritten note are free on every order. Thousands of shoppers already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right.

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

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

We measure success by how many shoppers come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves.

Notifications

Product news

Weekly digest

Members get early access to new drops and prices only they can see. Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone.

Privacy

Hide my profile from search

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

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Chloe Ibrahim">
        </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="Kyoto">
        </div>
        <p class="small">We measure success by how many shoppers come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
      <div id="spy-1190" class="pb-3">
        <h3 class="h6">Notifications</h3>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
          <label class="form-check-label small" for="spy-sw-1194">Product news</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
          <label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
        </div>
        <p class="small">Members get early access to new drops and prices only they can see. Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. 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>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Operations

Samir Hughes
Marketing Lead
Lea Duarte
HR Partner
Lucas Larsen
Frontend Engineer

Customer Support

Jonah Ortega
Project Manager
Ruby Alvarez
HR Partner
Aria Rossi
Project Manager

Legal

Nadia Harlow
Support Specialist
Chloe Novak
Customer Success
Nora Fischer
Project Manager

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Operations</a><a class="nav-link" href="#spy-1199">Customer Support</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Operations</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Samir Hughes"><div><div class="small fw-semibold">Samir Hughes</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Lea Duarte"><div><div class="small fw-semibold">Lea Duarte</div><div class="small text-body-secondary">HR Partner</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Lucas Larsen"><div><div class="small fw-semibold">Lucas Larsen</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Customer Support</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Jonah Ortega"><div><div class="small fw-semibold">Jonah Ortega</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Ruby Alvarez"><div><div class="small fw-semibold">Ruby Alvarez</div><div class="small text-body-secondary">HR Partner</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Aria Rossi"><div><div class="small fw-semibold">Aria Rossi</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Nadia Harlow"><div><div class="small fw-semibold">Nadia Harlow</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Chloe Novak"><div><div class="small fw-semibold">Chloe Novak</div><div class="small text-body-secondary">Customer Success</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Nora Fischer"><div><div class="small fw-semibold">Nora Fischer</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Home

Cotton throw$84.00
Wool scarf$47.99
Leather wallet$64.00

Accessories

Ceramic mug$23.00
Desk lamp$95.00
Canvas tote$31.00

Outdoor

Cotton throw$75.00
Leather wallet$53.00
Ceramic mug$22.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Home</a><a class="nav-link" href="#spy-1203">Accessories</a><a class="nav-link" href="#spy-1204">Outdoor</a>
</nav>
<div class="position-relative border rounded p-3" 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-3">
    <h3 class="h6">Home</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Cotton throw</span><span class="fw-semibold">$84.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Wool scarf</span><span class="fw-semibold">$47.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$64.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Accessories</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ceramic mug</span><span class="fw-semibold">$23.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$95.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Canvas tote</span><span class="fw-semibold">$31.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Outdoor</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Cotton throw</span><span class="fw-semibold">$75.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$53.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ceramic mug</span><span class="fw-semibold">$22.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

We listen first, then build a plan around what you actually need. Pay securely with card, wallet or in three interest-free instalments. New pieces arrive every month, and the best ones sell out fast. Gift wrapping and a handwritten note are free on every order.

This week

Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.

Later

We work directly with makers, so prices stay fair for everyone. 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="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Pay securely with card, wallet or in three interest-free instalments. New pieces arrive every month, and the best ones sell out fast. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. 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>

19Dark theme

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

Launch

Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more. Our team has done this many times, so you never have to guess. Order before 2 pm and most items leave our warehouse the same day.

Orbit

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

Landing

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

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more. Our team has done this many times, so you never have to guess. Order before 2 pm and most items leave our warehouse the same day.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">We measure success by how many shoppers come back and tell their friends. Members get early access to new drops and prices only they can see. Every detail is handled by people who care about getting it right.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</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. Not sure about the size? Our fit guide and live chat help you choose.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Nov 12, 2025

NewThousands of shoppers already trust us, and we work hard to keep it that way.
ImprovedEach product is checked by hand before it goes into the box.
FixedClear prices, honest advice and no surprises along the way.

v3.1 May 24, 2026

NewWe measure success by how many shoppers come back and tell their friends.
ImprovedWe work directly with makers, so prices stay fair for everyone.
FixedPay securely with card, wallet or in three interest-free instalments.

v3.0 Apr 17, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedOur team has done this many times, so you never have to guess.
FixedMembers get early access to new drops and prices only they can see.

v2.9 Oct 15, 2026

NewWe keep things simple, so you can focus on what matters to you.
ImprovedThousands of five-star reviews from customers who came back for more.
FixedGift wrapping and a handwritten note are free on every order.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Nov 12, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of shoppers already trust us, and we work hard to keep it that way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Each product is checked by hand before it goes into the box.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 24, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many shoppers come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We work directly with makers, so prices stay fair for everyone.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Pay securely with card, wallet or in three interest-free instalments.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Apr 17, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Members get early access to new drops and prices only they can see.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Oct 15, 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>Thousands of five-star reviews from customers who came back for more.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Gift wrapping and a handwritten note are free on every order.</li>
        </ul>
      </div>
    </div>
  </div>
</div>