Scrollspy

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

1In a navbar

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

Intro

We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral.

Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order. Members get early access to new drops and prices only they can see.

Details

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

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

Pricing

Every detail is handled by people who care about getting it right. Not sure about the size? Our fit guide and live chat help you choose. 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.

Thousands of five-star reviews from customers who came back for more. Every piece is made in small batches from materials we test ourselves. Free shipping on orders over $50 and easy returns within 30 days.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Emberium Deck</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-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 work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
    <p class="small">Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order. Members get early access to new drops and prices only they can see.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
    <p class="small">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. Each product is checked by hand before it goes into the box.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Not sure about the size? Our fit guide and live chat help you choose. 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">Thousands of five-star reviews from customers who came back for more. Every piece is made in small batches from materials we test ourselves. Free shipping on orders over $50 and easy returns within 30 days.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Pay securely with card, wallet or in three interest-free instalments. 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. Our team has done this many times, so you never have to guess.

Step two

Every detail is handled by people who care about getting it right. Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more.

Step three

Each product is checked by hand before it goes into the box. We work directly with makers, so prices stay fair for everyone. Members get early access to new drops and prices only they can see. Our packaging is plastic-free and every delivery is carbon-neutral.

Step four

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. Free shipping on orders over $50 and easy returns within 30 days. New pieces arrive every month, and the best ones sell out fast.

<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">Pay securely with card, wallet or in three interest-free instalments. 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. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Pay securely with card, wallet or in three interest-free instalments. Thousands of five-star reviews from customers who came back for more.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Each product is checked by hand before it goes into the box. We work directly with makers, so prices stay fair for everyone. Members get early access to new drops and prices only they can see. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">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. Free shipping on orders over $50 and easy returns within 30 days. New pieces arrive every month, and the best ones sell out fast.</p>
  </div>
</div>

3Vertical pills

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

30-day returns

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

Live order tracking

Not sure about the size? Our fit guide and live chat help you choose. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.

Gift wrapping

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

Questions

Our packaging is plastic-free and every delivery is carbon-neutral. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">30-day returns</a><a class="nav-link" href="#spy-1132">Live order tracking</a><a class="nav-link" href="#spy-1133">Gift wrapping</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">30-day returns</h3>
        <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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Live order tracking</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1133" 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. Gift wrapping and a handwritten note are free on every order. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. We work directly with makers, so prices stay fair for everyone. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We measure success by how many shoppers come back and tell their friends. Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves.

Install

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

Configure

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

Usage

Members get early access to new drops and prices only they can see. Friendly people answer your questions quickly, by phone, chat or email. Thousands of shoppers already trust us, and we work hard to keep it that way.

Examples

New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. We 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 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">We measure success by how many shoppers come back and tell their friends. Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Members get early access to new drops and prices only they can see. Friendly people answer your questions quickly, by phone, chat or email. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. We 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>
</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. 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.

Midday

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

Afternoon

New pieces arrive every month, and the best ones sell out fast. Order before 2 pm and most items leave our warehouse the same day. Clear prices, honest advice and no surprises along the way.

Evening

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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. Not sure about the size? Our fit guide and live chat help you choose. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">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. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">New pieces arrive every month, and the best ones sell out fast. Order before 2 pm and most items leave our warehouse the same day. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</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. Gift wrapping and a handwritten note are free on every order. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Every piece is made in small batches from materials we test ourselves. Members get early access to new drops and prices only they can see. We listen first, then build a plan around what you actually need. Thousands of shoppers already trust us, and we work hard to keep it that way.

Beta

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

Gamma

Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. New pieces arrive every month, and the best ones sell out fast. Every piece is made in small batches from materials we test ourselves.

<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">Every piece is made in small batches from materials we test ourselves. Members get early access to new drops and prices only they can see. We listen first, then build a plan around what you actually need. 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">Each product is checked by hand before it goes into the box. 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. Not sure about the size? Our fit guide and live chat help you choose.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. 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>
  </div>
</div>

7Underline tabs

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

Overview

Start in minutes and get help from a real person whenever you need it. We measure success by how many shoppers come back and tell their friends. Each product is checked by hand before it goes into the box.

Features

Members get early access to new drops and prices only they can see. Our packaging is plastic-free and every delivery is carbon-neutral. Free shipping on orders over $50 and easy returns within 30 days. Pay securely with card, wallet or in three interest-free instalments.

Reviews

Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order. We keep things simple, so you can focus on what matters to you.

FAQ

Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. 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.

<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">Start in minutes and get help from a real person whenever you need it. We measure success by how many shoppers come back and tell their friends. Each product is checked by hand before it goes into the box.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Members get early access to new drops and prices only they can see. Our packaging is plastic-free and every delivery is carbon-neutral. Free shipping on orders over $50 and easy returns within 30 days. Pay securely with card, wallet or in three interest-free instalments.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone. Gift wrapping and a handwritten note are free on every order. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</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. 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.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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. Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day.

Background

Each product is checked by hand before it goes into the box. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it.

Method

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

Results

Not sure about the size? Our fit guide and live chat help you choose. 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. We keep things simple, so you can focus on what matters to you.

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">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. 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-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. We measure success by how many shoppers come back and tell their friends. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. 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. We keep things simple, so you can focus on what matters to you.</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

Thousands of five-star reviews from customers who came back for more. Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral.

Set up your profile

Pay securely with card, wallet or in three interest-free instalments. New pieces arrive every month, and the best ones sell out fast. We work directly with makers, so prices stay fair for everyone.

Invite the team

Members get early access to new drops and prices only they can see. We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves. Members get early access to new drops and prices only they can see.

Go live

Each product is checked by hand before it goes into the box. Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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">Thousands of five-star reviews from customers who came back for more. Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. New pieces arrive every month, and the best ones sell out fast. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Members get early access to new drops and prices only they can see. We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Meet the makers behind our ceramics

We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. We measure success by how many shoppers come back and tell their friends.

2024

Looking back at a busy season

Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Free shipping on orders over $50 and easy returns within 30 days. Clear prices, honest advice and no surprises along the way.

2025

How to care for linen so it lasts for years

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

2026

How we choose sustainable materials

Thousands of shoppers already trust us, and we work hard to keep it that way. New pieces arrive every month, and the best ones sell out fast. Order before 2 pm and most items leave our warehouse the same day.

<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">Meet the makers behind our ceramics</h3>
    <p class="small mb-0">We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. We measure success by how many shoppers come back and tell their friends.</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">Looking back at a busy season</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Free shipping on orders over $50 and easy returns within 30 days. Clear prices, honest advice and no surprises along the way.</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">How to care for linen so it lasts for years</h3>
    <p class="small mb-0">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. Not sure about the size? Our fit guide and live chat help you choose.</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">How we choose sustainable materials</h3>
    <p class="small mb-0">Thousands of shoppers already trust us, and we work hard to keep it that way. New pieces arrive every month, and the best ones sell out fast. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

A three-step skincare routine that works?: Our packaging is plastic-free and every delivery is carbon-neutral.
Inside our new autumn collection?: We work directly with makers, so prices stay fair for everyone.
What to pack for a rainy weekend outdoors?: Start in minutes and get help from a real person whenever you need it.

Shipping

Our favourite tips for busy weeks?: Not sure about the size? Our fit guide and live chat help you choose.
Our guide to gifts under $50?: Start in minutes and get help from a real person whenever you need it.
What our shoppers asked us most?: Every piece is made in small batches from materials we test ourselves.

Returns

Five things we learned this year?: New pieces arrive every month, and the best ones sell out fast.
Five pieces for a capsule wardrobe?: Each product is checked by hand before it goes into the box.
The small habits that make a big difference?: Thousands of five-star reviews from customers who came back for more.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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">A three-step skincare routine that works?</dt>
          <dd class="small text-body-secondary">Our packaging is plastic-free and every delivery is carbon-neutral.</dd>
          <dt class="small">Inside our new autumn collection?</dt>
          <dd class="small text-body-secondary">We work directly with makers, so prices stay fair for everyone.</dd>
          <dt class="small">What to pack for a rainy weekend outdoors?</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 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">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Not sure about the size? Our fit guide and live chat help you choose.</dd>
          <dt class="small">Our guide to gifts under $50?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">What our shoppers asked us most?</dt>
          <dd class="small text-body-secondary">Every piece is made in small batches from materials we test ourselves.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">New pieces arrive every month, and the best ones sell out fast.</dd>
          <dt class="small">Five pieces for a capsule wardrobe?</dt>
          <dd class="small text-body-secondary">Each product is checked by hand before it goes into the box.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Thousands of five-star reviews from customers who came back for more.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

We measure success by how many shoppers come back and tell their friends. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.

Battery

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

Connectivity

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. Pay securely with card, wallet or in three interest-free instalments. Our team has done this many times, so you never have to guess.

Security

Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Free shipping on orders over $50 and easy returns within 30 days.

<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">We measure success by how many shoppers come back and tell their friends. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Order before 2 pm and most items leave our warehouse the same day. We work directly with makers, so prices stay fair for everyone. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Members get early access to new drops and prices only they can see. Pay securely with card, wallet or in three interest-free instalments. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$17.71 / mo

Member prices
Carbon-neutral delivery
Easy exchanges

Team

$42.85 / mo

Member prices
Sustainable materials
Secure payments

Business

$51.46 / mo

Carbon-neutral delivery
Hand-checked quality
Carbon-neutral delivery

<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">$17.71<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Member prices</li>
        <li>Carbon-neutral delivery</li>
        <li>Easy exchanges</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">$42.85<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Member prices</li>
        <li>Sustainable materials</li>
        <li>Secure payments</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">$51.46<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Carbon-neutral delivery</li>
        <li>Hand-checked quality</li>
        <li>Carbon-neutral delivery</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: How to choose the right product

Gift wrapping and a handwritten note are free on every order. Pay securely with card, wallet or in three interest-free instalments. We listen first, then build a plan around what you actually need.

Thousands of five-star reviews from customers who came back for more. Gift wrapping and a handwritten note are free on every order. Clear prices, honest advice and no surprises along the way.

Chapter 2: A beginner's guide to getting started

Thousands of shoppers already trust us, and we work hard to keep it that way. 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 keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many shoppers come back and tell their friends.

Chapter 3: A small guide to a calmer home

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

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.

Chapter 4: Styling one piece three different ways

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. Not sure about the size? Our fit guide and live chat help you choose. 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. Members get early access to new drops and prices only they can see. Pay securely with card, wallet or in three interest-free instalments. Gift wrapping and a handwritten note are free on every order.

<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: How to choose the right product</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. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Thousands of five-star reviews from customers who came back for more. Gift wrapping and a handwritten note are free on every order. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: A beginner&#39;s guide to getting started</h3>
    <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. 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.</p>
    <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. We measure success by how many shoppers come back and tell their friends.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: A small guide to a calmer home</h3>
    <p class="small">Every detail is handled by people who care about getting it right. New pieces arrive every month, and the best ones sell out fast. 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>
    <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 id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Styling one piece three different ways</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. Not sure about the size? Our fit guide and live chat help you choose. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Members get early access to new drops and prices only they can see. Pay securely with card, wallet or in three interest-free instalments. Gift wrapping and a handwritten note are free on every order.</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

Our packaging is plastic-free and every delivery is carbon-neutral. 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. Our team has done this many times, so you never have to guess.

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

Every detail is handled by people who care about getting it right. Each product is checked by hand before it goes into the box. Start in minutes and get help from a real person whenever you need it.

<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="Maya Carter">
        </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="Auckland">
        </div>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. 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. Our team has done this many times, so you never have to guess.</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">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. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">Every detail is handled by people who care about getting it right. Each product is checked by hand before it goes into the box. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Design

Ruby Varga
Data Analyst
Isla Whitaker
Project Manager
Lucas Moreau
Data Analyst

Engineering

Aria Ortega
Product Designer
Liam Brennan
Marketing Lead
Samir Novak
Sales Executive

Sales

Nora Sato
Frontend Engineer
Omar Ashford
Support Specialist
Theo Delgado
Art Director

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Design</a><a class="nav-link" href="#spy-1199">Engineering</a><a class="nav-link" href="#spy-1200">Sales</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">Design</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Ruby Varga"><div><div class="small fw-semibold">Ruby Varga</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Isla Whitaker"><div><div class="small fw-semibold">Isla Whitaker</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-9.svg" class="rounded-circle" width="36" height="36" alt="Lucas Moreau"><div><div class="small fw-semibold">Lucas Moreau</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Aria Ortega"><div><div class="small fw-semibold">Aria Ortega</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Liam Brennan"><div><div class="small fw-semibold">Liam Brennan</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-8.svg" class="rounded-circle" width="36" height="36" alt="Samir Novak"><div><div class="small fw-semibold">Samir Novak</div><div class="small text-body-secondary">Sales Executive</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Nora Sato"><div><div class="small fw-semibold">Nora Sato</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Omar Ashford"><div><div class="small fw-semibold">Omar Ashford</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="Theo Delgado"><div><div class="small fw-semibold">Theo Delgado</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Home

Running cap$25.00
Wool scarf$41.00
Desk lamp$96.00

Outdoor

Linen shirt$71.99
Running cap$26.00
Canvas tote$36.00

Apparel

Leather wallet$55.00
Face oil$38.99
Canvas tote$37.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Home</a><a class="nav-link" href="#spy-1203">Outdoor</a><a class="nav-link" href="#spy-1204">Apparel</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>Running cap</span><span class="fw-semibold">$25.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Wool scarf</span><span class="fw-semibold">$41.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$96.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Outdoor</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Linen shirt</span><span class="fw-semibold">$71.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Running cap</span><span class="fw-semibold">$26.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Canvas tote</span><span class="fw-semibold">$36.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Apparel</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$55.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Face oil</span><span class="fw-semibold">$38.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Canvas tote</span><span class="fw-semibold">$37.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Free shipping on orders over $50 and easy returns within 30 days. Clear prices, honest advice and no surprises along the way. We work directly with makers, so prices stay fair for everyone. We keep things simple, so you can focus on what matters to you.

This week

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

Later

Each product is checked by hand before it goes into the box. Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast.

<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">Free shipping on orders over $50 and easy returns within 30 days. Clear prices, honest advice and no surprises along the way. We work directly with makers, so prices stay fair for everyone. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. 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-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Each product is checked by hand before it goes into the box. Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it. Not sure about the size? Our fit guide and live chat help you choose. Thousands of shoppers already trust us, and we work hard to keep it that way.

Orbit

Our team has done this many times, so you never have to guess. Our packaging is plastic-free and every delivery is carbon-neutral. Members get early access to new drops and prices only they can see. Free shipping on orders over $50 and easy returns within 30 days.

Landing

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

<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">Every piece is made in small batches from materials we test ourselves. Start in minutes and get help from a real person whenever you need it. Not sure about the size? Our fit guide and live chat help you choose. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <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. 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-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">We work directly with makers, so prices stay fair for everyone. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. 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 Nov 28, 2025

NewOrder before 2 pm and most items leave our warehouse the same day.
ImprovedGift wrapping and a handwritten note are free on every order.
FixedThousands of five-star reviews from customers who came back for more.

v3.1 Jul 18, 2026

NewWe keep things simple, so you can focus on what matters to you.
ImprovedPay securely with card, wallet or in three interest-free instalments.
FixedClear prices, honest advice and no surprises along the way.

v3.0 Sep 18, 2026

NewFree shipping on orders over $50 and easy returns within 30 days.
ImprovedOur team has done this many times, so you never have to guess.
FixedOur packaging is plastic-free and every delivery is carbon-neutral.

v2.9 Sep 26, 2025

NewGift wrapping and a handwritten note are free on every order.
ImprovedMembers get early access to new drops and prices only they can see.
FixedWe keep things simple, so you can focus on what matters to you.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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 28, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Order before 2 pm and most items leave our warehouse the same day.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Gift wrapping and a handwritten note are free on every order.</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-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jul 18, 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>Pay securely with card, wallet or in three interest-free instalments.</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-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 18, 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>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>Our packaging is plastic-free and every delivery is carbon-neutral.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Sep 26, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Gift wrapping and a handwritten note are free on every order.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Members get early access to new drops and prices only they can see.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
    </div>
  </div>
</div>