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. Order before 2 pm and most items leave our warehouse the same day. We measure success by how many shoppers come back and tell their friends.

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

Details

Members get early access to new drops and prices only they can see. Gift wrapping and a handwritten note are free on every order. Thousands of five-star reviews from customers who came back for more. Our packaging is plastic-free and every delivery is carbon-neutral.

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

Pricing

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. 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. Start in minutes and get help from a real person whenever you need it. New pieces arrive every month, and the best ones sell out fast.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Coraeon</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. Order before 2 pm and most items leave our warehouse the same day. We measure success by how many shoppers come back and tell their friends.</p>
    <p class="small">New pieces arrive every month, and the best ones sell out fast. We listen first, then build a plan around what you actually need. Free shipping on orders over $50 and easy returns within 30 days.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Members get early access to new drops and prices only they can see. Gift wrapping and a handwritten note are free on every order. Thousands of five-star reviews from customers who came back for more. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
    <p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">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. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
    <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. New pieces arrive every month, and the best ones sell out fast.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Our packaging is plastic-free and every delivery is carbon-neutral. 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. We work directly with makers, so prices stay fair for everyone.

Step two

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

Step three

Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way.

Step four

Gift wrapping and a handwritten note are free on every order. We measure success by how many shoppers come back and tell their friends. Our team has done this many times, so you never have to guess.

<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">Our packaging is plastic-free and every delivery is carbon-neutral. 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. We work directly with makers, so prices stay fair for everyone.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Order before 2 pm and most items leave our warehouse the same day. Thousands of shoppers already trust us, and we work hard to keep it that way. Members get early access to new drops and prices only they can see.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</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. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Gift wrapping and a handwritten note are free on every order. We measure success by how many shoppers come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

3Vertical pills

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

Free shipping

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

Gift wrapping

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

Live order tracking

We measure success by how many shoppers come back and tell their friends. Thousands of shoppers already trust us, and we work hard to keep it that way. 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.

Questions

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

<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">Free shipping</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">Free shipping</h3>
        <p class="small">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. Each product is checked by hand before it goes into the box.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Gift wrapping</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Thousands of five-star reviews from customers who came back for more. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Live order tracking</h3>
        <p class="small">We measure success by how many shoppers come back and tell their friends. Thousands of shoppers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-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. Order before 2 pm and most items leave our warehouse the same day. Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. Free shipping on orders over $50 and easy returns within 30 days.

Install

Members get early access to new drops and prices only they can see. Our packaging is plastic-free and every delivery is carbon-neutral. 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.

Configure

Every piece is made in small batches from materials we test ourselves. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Pay securely with card, wallet or in three interest-free instalments.

Usage

Gift wrapping and a handwritten note are free on every order. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Order before 2 pm and most items leave our warehouse the same day.

Examples

Gift wrapping and a handwritten note are free on every order. 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. 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-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">Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</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. 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 id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Every piece is made in small batches from materials we test ourselves. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</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. Clear prices, honest advice and no surprises along the way. Order before 2 pm and most items leave our warehouse the same day.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Gift wrapping and a handwritten note are free on every order. 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. Thousands of five-star reviews from customers who came back for more.</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

Friendly people answer your questions quickly, by phone, chat or email. We work directly with makers, so prices stay fair for everyone. Free shipping on orders over $50 and easy returns within 30 days. Our packaging is plastic-free and every delivery is carbon-neutral.

Midday

We measure success by how many shoppers come back and tell their friends. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.

Afternoon

Members get early access to new drops and prices only they can see. Thousands of shoppers already trust us, and we work hard to keep it that way. 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.

Evening

Pay securely with card, wallet or in three interest-free instalments. Every piece is made in small batches from materials we test ourselves. New pieces arrive every month, and the best ones sell out fast.

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

6Simple anchors

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

Alpha Beta Gamma

Alpha

Our packaging is plastic-free and every delivery is carbon-neutral. We measure success by how many shoppers come back and tell their friends. Every piece is made in small batches from materials we test ourselves.

Beta

Not sure about the size? Our fit guide and live chat help you choose. Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order.

Gamma

Our team has done this many times, so you never have to guess. New pieces arrive every month, and the best ones sell out fast. Start in minutes and get help from a real person whenever you need it. Pay securely with card, wallet or in three interest-free instalments.

<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">Our packaging is plastic-free and every delivery is carbon-neutral. We measure success by how many shoppers come back and tell their friends. Every piece is made in small batches from materials we test ourselves.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Not sure about the size? Our fit guide and live chat help you choose. Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Our team has done this many times, so you never have to guess. New pieces arrive every month, and the best ones sell out fast. Start in minutes and get help from a real person whenever you need it. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Thousands of shoppers already trust us, and we work hard to keep it that way. Thousands of five-star reviews from customers who came back for more. 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. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

Reviews

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

FAQ

We listen first, then build a plan around what you actually need. New pieces arrive every month, and the best ones sell out fast. We keep things simple, so you can focus on what matters to you. We work directly with makers, so prices stay fair for everyone.

<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">Thousands of shoppers already trust us, and we work hard to keep it that way. Thousands of five-star reviews from customers who came back for more. 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. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">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. 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-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">We listen first, then build a plan around what you actually need. New pieces arrive every month, and the best ones sell out fast. We keep things simple, so you can focus on what matters to you. We work directly with makers, so prices stay fair for everyone.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

Our team has done this many times, so you never have to guess. 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. Gift wrapping and a handwritten note are free on every order.

Method

Thousands of five-star reviews from customers who came back for more. Start in minutes and get help from a real person whenever you need it. Members get early access to new drops and prices only they can see. Every piece is made in small batches from materials we test ourselves.

Results

We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Pay securely with card, wallet or in three interest-free instalments. Each product is checked by hand before it goes into the box.

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">Clear prices, honest advice and no surprises along the way. We measure success by how many shoppers come back and tell their friends. Free shipping on orders over $50 and easy returns within 30 days.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</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. Not sure about the size? Our fit guide and live chat help you choose. Gift wrapping and a handwritten note are free on every order.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. Start in minutes and get help from a real person whenever you need it. Members get early access to new drops and prices only they can see. Every piece is made in small batches from materials we test ourselves.</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. Every detail is handled by people who care about getting it right. Pay securely with card, wallet or in three interest-free instalments. Each product is checked by hand before it goes into the box.</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

Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day. Thousands of shoppers already trust us, and we work hard to keep it that way. Our packaging is plastic-free and every delivery is carbon-neutral.

Set up your profile

Every detail is handled by people who care about getting it right. Pay securely with card, wallet or in three interest-free instalments. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.

Invite the team

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

Go live

Thousands of five-star reviews from customers who came back for more. New pieces arrive every month, and the best ones sell out fast. Thousands of shoppers already trust us, and we work hard to keep it that way.

<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">Friendly people answer your questions quickly, by phone, chat or email. Order before 2 pm and most items leave our warehouse the same day. Thousands of shoppers already trust us, and we work hard to keep it that way. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</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. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</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. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Thousands of five-star reviews from customers who came back for more. New pieces arrive every month, and the best ones sell out fast. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Styling one piece three different ways

Order before 2 pm and most items leave our warehouse the same day. Start in minutes and get help from a real person whenever you need it. Not sure about the size? Our fit guide and live chat help you choose. Each product is checked by hand before it goes into the box.

2024

What to pack for a rainy weekend outdoors

Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves. Gift wrapping and a handwritten note are free on every order.

2025

Our guide to gifts under $50

Our team has done this many times, so you never have to guess. We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way. Not sure about the size? Our fit guide and live chat help you choose.

2026

Five things we learned this year

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

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="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">Styling one piece three different ways</h3>
    <p class="small mb-0">Order before 2 pm and most items leave our warehouse the same day. Start in minutes and get help from a real person whenever you need it. Not sure about the size? Our fit guide and live chat help you choose. Each product is checked by hand before it goes into the box.</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">What to pack for a rainy weekend outdoors</h3>
    <p class="small mb-0">Free shipping on orders over $50 and easy returns within 30 days. Every piece is made in small batches from materials we test ourselves. Gift wrapping and a handwritten note are free on every order.</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">Our guide to gifts under $50</h3>
    <p class="small mb-0">Our team has done this many times, so you never have to guess. We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way. Not sure about the size? Our fit guide and live chat help you choose.</p>
  </div>
  <div id="spy-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">Five things we learned this year</h3>
    <p class="small mb-0">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. We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

A small guide to a calmer home?: Order before 2 pm and most items leave our warehouse the same day.
What our shoppers asked us most?: Our packaging is plastic-free and every delivery is carbon-neutral.
Our favourite tips for busy weeks?: Each product is checked by hand before it goes into the box.

Shipping

How to choose the right product?: We work directly with makers, so prices stay fair for everyone.
A three-step skincare routine that works?: Our team has done this many times, so you never have to guess.
A beginner's guide to getting started?: We measure success by how many shoppers come back and tell their friends.

Returns

Meet the makers behind our ceramics?: Pay securely with card, wallet or in three interest-free instalments.
Looking back at a busy season?: Every detail is handled by people who care about getting it right.
The small habits that make a big difference?: Every piece is made in small batches from materials we test ourselves.

<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-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">A small guide to a calmer home?</dt>
          <dd class="small text-body-secondary">Order before 2 pm and most items leave our warehouse the same day.</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>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Each product is checked by hand before it goes into the box.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">How to choose the right product?</dt>
          <dd class="small text-body-secondary">We work directly with makers, so prices stay fair for everyone.</dd>
          <dt class="small">A three-step skincare routine that works?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">We measure success by how many shoppers come back and tell their friends.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Meet the makers behind our ceramics?</dt>
          <dd class="small text-body-secondary">Pay securely with card, wallet or in three interest-free instalments.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Every piece is made in small batches from materials we test ourselves.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

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

Battery

Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast.

Connectivity

We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way.

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" 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">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. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. New pieces arrive every month, and the best ones sell out fast. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">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. Members get early access to new drops and prices only they can see.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$19.07 / mo

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

Team

$48.39 / mo

Secure payments
Carbon-neutral delivery
Hand-checked quality

Business

$49.27 / mo

Easy exchanges
Easy exchanges
Secure payments

<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
  <a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-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">$19.07<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 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">$48.39<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Secure payments</li>
        <li>Carbon-neutral delivery</li>
        <li>Hand-checked quality</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">$49.27<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Easy exchanges</li>
        <li>Easy exchanges</li>
        <li>Secure payments</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: How to care for linen so it lasts for years

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

We work directly with makers, so prices stay fair for everyone. 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. Every detail is handled by people who care about getting it right.

Chapter 2: Five pieces for a capsule wardrobe

Every piece is made in small batches from materials we test ourselves. Gift wrapping and a handwritten note are free on every order. Our packaging is plastic-free and every delivery is carbon-neutral.

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

Chapter 3: Inside our new autumn collection

Our team has done this many times, so you never have to guess. 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. We listen first, then build a plan around what you actually need.

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

Chapter 4: How we choose sustainable materials

Our team has done this many times, so you never have to guess. Gift wrapping and a handwritten note are free on every order. 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. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.

<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 care for linen so it lasts for years</h3>
    <p class="small">Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email. Pay securely with card, wallet or in three interest-free instalments.</p>
    <p class="small">We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. Each product is checked by hand before it goes into the box. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Five pieces for a capsule wardrobe</h3>
    <p class="small">Every piece is made in small batches from materials we test ourselves. Gift wrapping and a handwritten note are free on every order. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
    <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. Thousands of five-star reviews from customers who came back for more. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Inside our new autumn collection</h3>
    <p class="small">Our team has done this many times, so you never have to guess. 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. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Free shipping on orders over $50 and easy returns within 30 days. 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.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: How we choose sustainable materials</h3>
    <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. Friendly people answer your questions quickly, by phone, chat or email.</p>
    <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
</div>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

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

Notifications

Product news

Weekly digest

We work directly with makers, so prices stay fair for everyone. Pay securely with card, wallet or in three interest-free instalments. New pieces arrive every month, and the best ones sell out fast. Thousands of five-star reviews from customers who came back for more.

Privacy

Hide my profile from search

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

<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="Mason Lindqvist">
        </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">Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. We measure success by how many shoppers come back and tell their friends.</p>
      </div>
      <div id="spy-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">We work directly with makers, so prices stay fair for everyone. Pay securely with card, wallet or in three interest-free instalments. New pieces arrive every month, and the best ones sell out fast. Thousands of five-star reviews from customers who came back for more.</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">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. Not sure about the size? Our fit guide and live chat help you choose. Each product is checked by hand before it goes into the box.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Marketing

Amara Larsen
Support Specialist
Ravi Haddad
Project Manager
Aria Rossi
QA Engineer

Finance

Zoe Moreau
Backend Engineer
Mia Sato
Project Manager
Samir Duarte
HR Partner

Legal

Ethan Mensah
Operations Manager
Omar Whitaker
Marketing Lead
Felix Alvarez
Frontend Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Marketing</a><a class="nav-link" href="#spy-1199">Finance</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">Marketing</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="Amara Larsen"><div><div class="small fw-semibold">Amara Larsen</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-12.svg" class="rounded-circle" width="36" height="36" alt="Ravi Haddad"><div><div class="small fw-semibold">Ravi Haddad</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-2.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">QA Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Finance</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Zoe Moreau"><div><div class="small fw-semibold">Zoe Moreau</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Mia Sato"><div><div class="small fw-semibold">Mia Sato</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-4.svg" class="rounded-circle" width="36" height="36" alt="Samir Duarte"><div><div class="small fw-semibold">Samir Duarte</div><div class="small text-body-secondary">HR Partner</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-3.svg" class="rounded-circle" width="36" height="36" alt="Ethan Mensah"><div><div class="small fw-semibold">Ethan Mensah</div><div class="small text-body-secondary">Operations 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="Omar Whitaker"><div><div class="small fw-semibold">Omar Whitaker</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-10.svg" class="rounded-circle" width="36" height="36" alt="Felix Alvarez"><div><div class="small fw-semibold">Felix Alvarez</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Apparel

Leather wallet$59.99
Glass bottle$24.00
Face oil$35.00

Outdoor

Desk lamp$85.00
Canvas tote$36.99
Cotton throw$80.99

Beauty

Leather wallet$63.00
Glass bottle$24.00
Desk lamp$95.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Apparel</a><a class="nav-link" href="#spy-1203">Outdoor</a><a class="nav-link" href="#spy-1204">Beauty</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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">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">$59.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Glass bottle</span><span class="fw-semibold">$24.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Face oil</span><span class="fw-semibold">$35.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Outdoor</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$85.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Canvas tote</span><span class="fw-semibold">$36.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Cotton throw</span><span class="fw-semibold">$80.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Beauty</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$63.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Glass bottle</span><span class="fw-semibold">$24.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$95.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral. 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

Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Members get early access to new drops and prices only they can see.

Later

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. Every piece is made in small batches from materials we test ourselves. We listen first, then build a plan around what you actually need.

<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">Clear prices, honest advice and no surprises along the way. Our packaging is plastic-free and every delivery is carbon-neutral. 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">Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Pay securely with card, wallet or in three interest-free instalments. Thousands of shoppers already trust us, and we work hard to keep it that way. Every piece is made in small batches from materials we test ourselves. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Thousands of five-star reviews from customers who came back for more. Order before 2 pm and most items leave our warehouse the same day. Free shipping on orders over $50 and easy returns within 30 days.

Orbit

Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.

Landing

We measure success by how many shoppers come back and tell their friends. Our team has done this many times, so you never have to guess. New pieces arrive every month, and the best ones sell out fast.

<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">Thousands of five-star reviews from customers who came back for more. Order before 2 pm and most items leave our warehouse the same day. Free shipping on orders over $50 and easy returns within 30 days.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">We measure success by how many shoppers come back and tell their friends. Our team has done this many times, so you never have to guess. New pieces arrive every month, and the best ones sell out fast.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Mar 20, 2026

NewWe measure success by how many shoppers come back and tell their friends.
ImprovedGift wrapping and a handwritten note are free on every order.
FixedEvery detail is handled by people who care about getting it right.

v3.1 Dec 31, 2025

NewFree shipping on orders over $50 and easy returns within 30 days.
ImprovedThousands of shoppers already trust us, and we work hard to keep it that way.
FixedWe work directly with makers, so prices stay fair for everyone.

v3.0 Jul 23, 2026

NewClear prices, honest advice and no surprises along the way.
ImprovedEvery piece is made in small batches from materials we test ourselves.
FixedOrder before 2 pm and most items leave our warehouse the same day.

v2.9 Dec 28, 2025

NewMembers get early access to new drops and prices only they can see.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
FixedPay securely with card, wallet or in three interest-free instalments.

<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">Mar 20, 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>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>Every detail is handled by people who care about getting it right.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Dec 31, 2025</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>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-danger me-1">Fixed</span>We work directly with makers, so prices stay fair for everyone.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jul 23, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every piece is made in small batches from materials we test ourselves.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Order before 2 pm and most items leave our warehouse the same day.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Dec 28, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Members get early access to new drops and prices only they can see.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Pay securely with card, wallet or in three interest-free instalments.</li>
        </ul>
      </div>
    </div>
  </div>
</div>