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

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. 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. Members get early access to new drops and prices only they can see. Start in minutes and get help from a real person whenever you need it. Order before 2 pm and most items leave our warehouse the same day.

Details

Friendly people answer your questions quickly, by phone, chat or email. We work directly with makers, so prices stay fair for everyone. Our packaging is plastic-free and every delivery is carbon-neutral.

Gift wrapping and a handwritten note are free on every order. Pay securely with card, wallet or in three interest-free instalments. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

Pricing

Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. 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. Friendly people answer your questions quickly, by phone, chat or email. Our packaging is plastic-free and every delivery is carbon-neutral. Gift wrapping and a handwritten note are free on every order.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Novao Hub</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">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. Our team has done this many times, so you never have to guess.</p>
    <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. Start in minutes and get help from a real person whenever you need it. Order before 2 pm and most items leave our warehouse the same day.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</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. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
    <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. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Each product is checked by hand before it goes into the box.</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. Our packaging is plastic-free and every delivery is carbon-neutral. Gift wrapping and a handwritten note are free on every order.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.

Step two

We keep things simple, so you can focus on what matters to you. Thousands of shoppers already trust us, and we work hard to keep it that way. Every piece is made in small batches from materials we test ourselves. Clear prices, honest advice and no surprises along the way.

Step three

Free shipping on orders over $50 and easy returns within 30 days. Each product is checked by hand before it goes into the box. Pay securely with card, wallet or in three interest-free instalments. We work directly with makers, so prices stay fair for everyone.

Step four

Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. New pieces arrive every month, and the best ones sell out fast. Not sure about the size? Our fit guide and live chat help you choose.

<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">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. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Thousands of shoppers already trust us, and we work hard to keep it that way. 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-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. Each product is checked by hand before it goes into the box. Pay securely with card, wallet or in three interest-free instalments. We work directly with makers, so prices stay fair for everyone.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. New pieces arrive every month, and the best ones sell out fast. Not sure about the size? Our fit guide and live chat help you choose.</p>
  </div>
</div>

3Vertical pills

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

Secure checkout

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

30-day returns

Every piece is made in small batches from materials we test ourselves. Pay securely with card, wallet or in three interest-free instalments. 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.

Live order tracking

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

Questions

Members get early access to new drops and prices only they can see. Clear prices, honest advice and no surprises along the way. 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-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Secure checkout</a><a class="nav-link" href="#spy-1132">30-day returns</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">Secure checkout</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 measure success by how many shoppers come back and tell their friends.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">30-day returns</h3>
        <p class="small">Every piece is made in small batches from materials we test ourselves. Pay securely with card, wallet or in three interest-free instalments. Our team has done this many times, so you never have to guess. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Live order tracking</h3>
        <p class="small">We work directly with makers, so prices stay fair for everyone. 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.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</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. 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>

4Nested navigation

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

Getting started

Free shipping on orders over $50 and easy returns within 30 days. Each product is checked by hand before it goes into the box. Order before 2 pm and most items leave our warehouse the same day. Friendly people answer your questions quickly, by phone, chat or email.

Install

Gift wrapping and a handwritten note are free on every order. 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. Our packaging is plastic-free and every delivery is carbon-neutral.

Configure

We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. 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.

Usage

Members get early access to new drops and prices only they can see. Not sure about the size? Our fit guide and live chat help you choose. 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.

Examples

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

<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">Free shipping on orders over $50 and easy returns within 30 days. Each product is checked by hand before it goes into the box. Order before 2 pm and most items leave our warehouse the same day. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Gift wrapping and a handwritten note are free on every order. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">We measure success by how many shoppers come back and tell their friends. We work directly with makers, so prices stay fair for everyone. 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 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. Not sure about the size? Our fit guide and live chat help you choose. 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.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order. Every detail is handled by people who care about getting it right.</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

Every piece is made in small batches from materials we test ourselves. Pay securely with card, wallet or in three interest-free instalments. 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.

Midday

Our packaging is plastic-free and every delivery is carbon-neutral. We keep things simple, so you can focus on what matters to you. Thousands of five-star reviews from customers who came back for more. New pieces arrive every month, and the best ones sell out fast.

Afternoon

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

Evening

Free shipping on orders over $50 and easy returns within 30 days. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone.

<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">Every piece is made in small batches from materials we test ourselves. Pay securely with card, wallet or in three interest-free instalments. 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-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. We keep things simple, so you can focus on what matters to you. Thousands of five-star reviews from customers who came back for more. New pieces arrive every month, and the best ones sell out fast.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Free shipping on orders over $50 and easy returns within 30 days. Gift wrapping and a handwritten note are free on every order. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Free shipping on orders over $50 and easy returns within 30 days. Every detail is handled by people who care about getting it right. We work directly with makers, so prices stay fair for everyone.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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

Beta

Our packaging is plastic-free and every delivery is carbon-neutral. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.

Gamma

Order before 2 pm and most items leave our warehouse the same day. Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box.

<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">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 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.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Not sure about the size? Our fit guide and live chat help you choose. Every piece is made in small batches from materials we test ourselves. Each product is checked by hand before it goes into the box.</p>
      </div>
    </div>
  </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. Members get early access to new drops and prices only they can see. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.

Features

Thousands of five-star reviews from customers who came back for more. Gift wrapping and a handwritten note are free on every order. Our team has done this many times, so you never have to guess.

Reviews

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. Pay securely with card, wallet or in three interest-free instalments. We measure success by how many shoppers come back and tell their friends.

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

<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. Members get early access to new drops and prices only they can see. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <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. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">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. Pay securely with card, wallet or in three interest-free instalments. We measure success by how many shoppers come back and tell their friends.</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. Every piece is made in small batches from materials we test ourselves.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

Order before 2 pm and most items leave our warehouse the same day. Not sure about the size? Our fit guide and live chat help you choose. We work directly with makers, so prices stay fair for everyone. Thousands of five-star reviews from customers who came back for more.

Method

Free shipping on orders over $50 and easy returns within 30 days. Clear prices, honest advice and no surprises along the way. Members get early access to new drops and prices only they can see.

Results

Our packaging is plastic-free and every delivery is carbon-neutral. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.

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">Each product is checked by hand before it goes into the box. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Not sure about the size? Our fit guide and live chat help you choose. We work directly with makers, so prices stay fair for everyone. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</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. Members get early access to new drops and prices only they can see.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Our packaging is plastic-free and every delivery is carbon-neutral. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.</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

Members get early access to new drops and prices only they can see. Each product is checked by hand before it goes into the box. 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. 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. Thousands of shoppers already trust us, and we work hard to keep it that way.

Invite the team

Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order. Clear prices, honest advice and no surprises along the way. We measure success by how many shoppers come back and tell their friends.

Go live

Thousands of five-star reviews from customers who came back for more. We work directly with makers, so prices stay fair for everyone. Free shipping on orders over $50 and easy returns within 30 days. 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">Members get early access to new drops and prices only they can see. Each product is checked by hand before it goes into the box. 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. 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. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Order before 2 pm and most items leave our warehouse the same day. Gift wrapping and a handwritten note are free on every order. Clear prices, honest advice and no surprises along the way. We measure success by how many shoppers come back and tell their friends.</p>
      </div>
      <div id="spy-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. We work directly with makers, so prices stay fair for everyone. Free shipping on orders over $50 and easy returns within 30 days. 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

A three-step skincare routine that works

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

2024

Five things we learned this year

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. Thousands of shoppers already trust us, and we work hard to keep it that way.

2025

The small habits that make a big difference

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. Order before 2 pm and most items leave our warehouse the same day. New pieces arrive every month, and the best ones sell out fast.

2026

Looking back at a busy season

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

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">A three-step skincare routine that works</h3>
    <p class="small mb-0">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. We listen first, then build a plan around what you actually need.</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">Five things we learned this year</h3>
    <p class="small mb-0">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. Thousands of shoppers already trust us, and we work hard to keep it that 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">The small habits that make a big difference</h3>
    <p class="small mb-0">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. Order before 2 pm and most items leave our warehouse the same day. New pieces arrive every month, and the best ones sell out fast.</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">Looking back at a busy season</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. 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>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Styling one piece three different ways?: We keep things simple, so you can focus on what matters to you.
What our shoppers asked us most?: We measure success by how many shoppers come back and tell their friends.
Our guide to gifts under $50?: We work directly with makers, so prices stay fair for everyone.

Shipping

How we choose sustainable materials?: Our packaging is plastic-free and every delivery is carbon-neutral.
How to choose the right product?: Pay securely with card, wallet or in three interest-free instalments.
Meet the makers behind our ceramics?: Friendly people answer your questions quickly, by phone, chat or email.

Returns

How to care for linen so it lasts for years?: Start in minutes and get help from a real person whenever you need it.
A beginner's guide to getting started?: Members get early access to new drops and prices only they can see.
Inside our new autumn collection?: Our team has done this many times, so you never have to guess.

<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">Styling one piece three different ways?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">What our shoppers asked us most?</dt>
          <dd class="small text-body-secondary">We measure success by how many shoppers come back and tell their friends.</dd>
          <dt class="small">Our guide to gifts under $50?</dt>
          <dd class="small text-body-secondary">We work directly with makers, so prices stay fair for everyone.</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 we choose sustainable materials?</dt>
          <dd class="small text-body-secondary">Our packaging is plastic-free and every delivery is carbon-neutral.</dd>
          <dt class="small">How to choose the right product?</dt>
          <dd class="small text-body-secondary">Pay securely with card, wallet or in three interest-free instalments.</dd>
          <dt class="small">Meet the makers behind our ceramics?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</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">How to care for linen so it lasts for years?</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">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Members get early access to new drops and prices only they can see.</dd>
          <dt class="small">Inside our new autumn collection?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Each product is checked by hand before it goes into the box. We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. Thousands of five-star reviews from customers who came back for more.

Battery

Clear prices, honest advice and no surprises along the way. 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. New pieces arrive every month, and the best ones sell out fast.

Connectivity

Members get early access to new drops and prices only they can see. Friendly people answer your questions quickly, by phone, chat or email. Every piece is made in small batches from materials we test ourselves. Free shipping on orders over $50 and easy returns within 30 days.

Security

We measure success by how many shoppers come back and tell their friends. Not sure about the size? Our fit guide and live chat help you choose. 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-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">Each product is checked by hand before it goes into the box. We listen first, then build a plan around what you actually need. 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-1176" class="pb-3">
        <h3 class="h6">Battery</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. 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 id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. 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 id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">We measure success by how many shoppers come back and tell their friends. Not sure about the size? Our fit guide and live chat help you choose. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$12.85 / mo

Easy exchanges
Hand-checked quality
Carbon-neutral delivery

Team

$44.88 / mo

Carbon-neutral delivery
Easy exchanges
Sustainable materials

Business

$64.42 / mo

Member prices
Secure payments
Sustainable materials

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

14Chapter reader

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

Chapter 1: Our favourite tips for busy weeks

Thousands of shoppers already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. 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. Gift wrapping and a handwritten note are free on every order. We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box.

Chapter 2: What to pack for a rainy weekend outdoors

Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. 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. Free shipping on orders over $50 and easy returns within 30 days. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 3: A small guide to a calmer home

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

Gift wrapping and a handwritten note are free on every order. Every piece is made in small batches from materials we test ourselves. 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.

Chapter 4: Five pieces for a capsule wardrobe

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. 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. Our packaging is plastic-free and every delivery is carbon-neutral. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: Our favourite tips for busy weeks</h3>
    <p class="small">Thousands of shoppers already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Gift wrapping and a handwritten note are free on every order. We work directly with makers, so prices stay fair for everyone. Each product is checked by hand before it goes into the box.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: What to pack for a rainy weekend outdoors</h3>
    <p class="small">Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.</p>
    <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. Friendly people answer your questions quickly, by phone, chat or email.</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">New pieces arrive every month, and the best ones sell out fast. Thousands of five-star reviews from customers who came back for more. Pay securely with card, wallet or in three interest-free instalments. We work directly with makers, so prices stay fair for everyone.</p>
    <p class="small">Gift wrapping and a handwritten note are free on every order. Every piece is made in small batches from materials we test ourselves. 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-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Five pieces for a capsule wardrobe</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. Order before 2 pm and most items leave our warehouse the same day.</p>
    <p class="small">We measure success by how many shoppers come back and tell their friends. Our packaging is plastic-free and every delivery is carbon-neutral. 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>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

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

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

Free shipping on orders over $50 and easy returns within 30 days. Start in minutes and get help from a real person whenever you need it. Pay securely with card, wallet or in three interest-free instalments.

<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="Kenji Nguyen">
        </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="Oslo">
        </div>
        <p class="small">Our team has done this many times, so you never have to guess. Each product is checked by hand before it goes into the box. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-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">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. Members get early access to new drops and prices only they can see.</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">Free shipping on orders over $50 and easy returns within 30 days. Start in minutes and get help from a real person whenever you need it. Pay securely with card, wallet or in three interest-free instalments.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Legal

Aria Quinn
Content Writer
Mateo Nguyen
Frontend Engineer
Leo Harlow
QA Engineer

Human Resources

Ivy Moreau
Support Specialist
Tariq Whitaker
Backend Engineer
Priya Patel
Operations Manager

Engineering

Ruby Kowalski
Project Manager
Theo Fischer
Finance Lead
Omar Duarte
Customer Success

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Human Resources</a><a class="nav-link" href="#spy-1200">Engineering</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">Legal</h3>
    <ul class="list-unstyled">
      <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="Aria Quinn"><div><div class="small fw-semibold">Aria Quinn</div><div class="small text-body-secondary">Content Writer</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="Mateo Nguyen"><div><div class="small fw-semibold">Mateo Nguyen</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-11.svg" class="rounded-circle" width="36" height="36" alt="Leo Harlow"><div><div class="small fw-semibold">Leo Harlow</div><div class="small text-body-secondary">QA Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Human Resources</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="Ivy Moreau"><div><div class="small fw-semibold">Ivy Moreau</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-8.svg" class="rounded-circle" width="36" height="36" alt="Tariq Whitaker"><div><div class="small fw-semibold">Tariq Whitaker</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-5.svg" class="rounded-circle" width="36" height="36" alt="Priya Patel"><div><div class="small fw-semibold">Priya Patel</div><div class="small text-body-secondary">Operations Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-11.svg" class="rounded-circle" width="36" height="36" alt="Ruby Kowalski"><div><div class="small fw-semibold">Ruby Kowalski</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="Theo Fischer"><div><div class="small fw-semibold">Theo Fischer</div><div class="small text-body-secondary">Finance 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="Omar Duarte"><div><div class="small fw-semibold">Omar Duarte</div><div class="small text-body-secondary">Customer Success</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Apparel

Leather wallet$60.99
Hand cream$19.00
Linen shirt$69.00

Home

Linen shirt$73.00
Desk lamp$87.00
Ceramic mug$22.00

Beauty

Face oil$41.00
Desk lamp$88.99
Leather wallet$61.00

<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">Home</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">$60.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Hand cream</span><span class="fw-semibold">$19.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Linen shirt</span><span class="fw-semibold">$69.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Linen shirt</span><span class="fw-semibold">$73.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$87.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Ceramic mug</span><span class="fw-semibold">$22.00</span></li>
    </ul>
  </div>
  <div 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>Face oil</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">$88.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$61.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. Our packaging is plastic-free and every delivery is carbon-neutral.

This week

We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Thousands of five-star reviews from customers who came back for more.

Later

We listen first, then build a plan around what you actually need. We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. Thousands of shoppers already trust us, and we work hard to keep it that way.

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="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">New pieces arrive every month, and the best ones sell out fast. Each product is checked by hand before it goes into the box. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</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. Thousands of five-star reviews from customers who came back for more.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">We listen first, then build a plan around what you actually need. We work directly with makers, so prices stay fair for everyone. We measure success by how many shoppers come back and tell their friends. Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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

Orbit

Every detail is handled by people who care about getting it right. Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments.

Landing

Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.

<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">Clear prices, honest advice and no surprises along the way. Every piece is made in small batches from materials we test ourselves. Our team has done this many times, so you never have to guess.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Every detail is handled by people who care about getting it right. Order before 2 pm and most items leave our warehouse the same day. Pay securely with card, wallet or in three interest-free instalments.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Free shipping on orders over $50 and easy returns within 30 days. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Jan 5, 2026

NewGift wrapping and a handwritten note are free on every order.
ImprovedThousands of shoppers already trust us, and we work hard to keep it that way.
FixedMembers get early access to new drops and prices only they can see.

v3.1 Apr 10, 2026

NewOrder before 2 pm and most items leave our warehouse the same day.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
FixedNew pieces arrive every month, and the best ones sell out fast.

v3.0 Jan 18, 2026

NewThousands of five-star reviews from customers who came back for more.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedEach product is checked by hand before it goes into the box.

v2.9 Sep 25, 2026

NewStart in minutes and get help from a real person whenever you need it.
ImprovedWe measure success by how many shoppers come back and tell their friends.
FixedEvery piece is made in small batches from materials we test ourselves.

<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">Jan 5, 2026</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>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>Members get early access to new drops and prices only they can see.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Apr 10, 2026</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>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>New pieces arrive every month, and the best ones sell out fast.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jan 18, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of five-star reviews from customers who came back for more.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Each product is checked by hand before it goes into the box.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Sep 25, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We measure success by how many shoppers come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every piece is made in small batches from materials we test ourselves.</li>
        </ul>
      </div>
    </div>
  </div>
</div>