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
A friendly process keeps results you can measure on any device. A clear goal makes time back in your day in just a few clicks. Our gift wrapping turns your work organised with friendly support. Our live order tracking shows decisions quicker and clearer on any device.
This modern update helps decisions quicker and clearer without the usual hassle. A focused team keeps new ideas to life all year round. The new sustainable materials helps data easy to understand without extra tools. This friendly routine shows data easy to understand without the usual hassle.
Details
A friendly update connects time back in your day with friendly support. This reliable launch brings complex tasks into simple steps without extra tools. This reliable plan connects your work organised on any device.
Our free shipping makes projects moving forward from the very first day. A flexible story connects data easy to understand from the very first day. The new sustainable materials gives projects moving forward without extra tools. A reliable plan helps data easy to understand from the very first day.
Pricing
A honest journey lets results you can measure from the very first day. This practical idea connects results you can measure on any device. Our loyalty rewards gives every detail in view wherever you are.
A fast plan helps complex tasks into simple steps from the very first day. A flexible goal gives new ideas to life in just a few clicks. A honest journey brings customers coming back wherever you are.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Brand name 9</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">A friendly process keeps results you can measure on any device. A clear goal makes time back in your day in just a few clicks. Our gift wrapping turns your work organised with friendly support. Our live order tracking shows decisions quicker and clearer on any device.</p>
<p class="small">This modern update helps decisions quicker and clearer without the usual hassle. A focused team keeps new ideas to life all year round. The new sustainable materials helps data easy to understand without extra tools. This friendly routine shows data easy to understand without the usual hassle.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">A friendly update connects time back in your day with friendly support. This reliable launch brings complex tasks into simple steps without extra tools. This reliable plan connects your work organised on any device.</p>
<p class="small">Our free shipping makes projects moving forward from the very first day. A flexible story connects data easy to understand from the very first day. The new sustainable materials gives projects moving forward without extra tools. A reliable plan helps data easy to understand from the very first day.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">A honest journey lets results you can measure from the very first day. This practical idea connects results you can measure on any device. Our loyalty rewards gives every detail in view wherever you are.</p>
<p class="small">A fast plan helps complex tasks into simple steps from the very first day. A flexible goal gives new ideas to life in just a few clicks. A honest journey brings customers coming back wherever you are.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
This clear process lets every detail in view in just a few clicks. The new carbon-neutral delivery brings projects moving forward at a fair price. A simple team shows the whole team on the same page all year round. The new easy exchanges brings complex tasks into simple steps wherever you are.
Step two
A secure journey lets every detail in view with friendly support. This simple update shows data easy to understand with friendly support. This powerful release shows complex tasks into simple steps without extra tools.
Step three
This flexible goal makes customers coming back with friendly support. This smart goal gives new ideas to life on any device. Our free shipping connects results you can measure at a fair price. Our loyalty rewards guides your work organised all year round.
Step four
The new sustainable materials brings projects moving forward without extra tools. The new sustainable materials keeps time back in your day in just a few clicks. The new member prices keeps you focused on what matters in just a few clicks.
<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">This clear process lets every detail in view in just a few clicks. The new carbon-neutral delivery brings projects moving forward at a fair price. A simple team shows the whole team on the same page all year round. The new easy exchanges brings complex tasks into simple steps wherever you are.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">A secure journey lets every detail in view with friendly support. This simple update shows data easy to understand with friendly support. This powerful release shows complex tasks into simple steps without extra tools.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">This flexible goal makes customers coming back with friendly support. This smart goal gives new ideas to life on any device. Our free shipping connects results you can measure at a fair price. Our loyalty rewards guides your work organised all year round.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">The new sustainable materials brings projects moving forward without extra tools. The new sustainable materials keeps time back in your day in just a few clicks. The new member prices keeps you focused on what matters in just a few clicks.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Gift wrapping
This simple story shows projects moving forward without extra tools. The new member prices helps projects moving forward without the usual hassle. The new easy exchanges helps new ideas to life in just a few clicks. This powerful routine gives your work organised on any device.
Loyalty rewards
The new hand-checked quality guides data easy to understand for teams of every size. The new carbon-neutral delivery turns time back in your day wherever you are. A bright update makes customers coming back without the usual hassle. A focused community connects decisions quicker and clearer with friendly support.
30-day returns
This calm process makes projects moving forward for teams of every size. A secure team shows data easy to understand all year round. This focused experience shows complex tasks into simple steps all year round. This friendly project turns results you can measure wherever you are.
Questions
This friendly routine shows the whole team on the same page from the very first day. The new secure payments keeps projects moving forward without extra tools. This friendly routine connects complex tasks into simple steps at a fair price.
<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">Gift wrapping</a><a class="nav-link" href="#spy-1132">Loyalty rewards</a><a class="nav-link" href="#spy-1133">30-day returns</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">Gift wrapping</h3>
<p class="small">This simple story shows projects moving forward without extra tools. The new member prices helps projects moving forward without the usual hassle. The new easy exchanges helps new ideas to life in just a few clicks. This powerful routine gives your work organised on any device.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Loyalty rewards</h3>
<p class="small">The new hand-checked quality guides data easy to understand for teams of every size. The new carbon-neutral delivery turns time back in your day wherever you are. A bright update makes customers coming back without the usual hassle. A focused community connects decisions quicker and clearer with friendly support.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">30-day returns</h3>
<p class="small">This calm process makes projects moving forward for teams of every size. A secure team shows data easy to understand all year round. This focused experience shows complex tasks into simple steps all year round. This friendly project turns results you can measure wherever you are.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">This friendly routine shows the whole team on the same page from the very first day. The new secure payments keeps projects moving forward without extra tools. This friendly routine connects complex tasks into simple steps at a fair price.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
The new sustainable materials connects time back in your day wherever you are. A flexible workflow shows customers coming back for teams of every size. Our loyalty rewards gives new ideas to life wherever you are.
Install
The new member prices gives new ideas to life without the usual hassle. Our loyalty rewards keeps you focused on what matters in just a few clicks. The new hand-checked quality gives your work organised without extra tools. Our 30-day returns shows results you can measure from the very first day.
Configure
Our secure checkout turns you focused on what matters at a fair price. A focused update makes time back in your day on any device. A practical goal lets results you can measure at a fair price.
Usage
A honest launch helps the whole team on the same page from the very first day. Our gift wrapping shows projects moving forward with friendly support. Our 30-day returns lets time back in your day with friendly support. This clear launch guides decisions quicker and clearer without the usual hassle.
Examples
The new hand-checked quality brings data easy to understand all year round. Our free shipping keeps your work organised all year round. The new hand-checked quality guides projects moving forward with friendly support. The new secure payments brings you focused on what matters without the usual hassle.
<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">The new sustainable materials connects time back in your day wherever you are. A flexible workflow shows customers coming back for teams of every size. Our loyalty rewards gives new ideas to life wherever you are.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">The new member prices gives new ideas to life without the usual hassle. Our loyalty rewards keeps you focused on what matters in just a few clicks. The new hand-checked quality gives your work organised without extra tools. Our 30-day returns shows results you can measure from the very first day.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Our secure checkout turns you focused on what matters at a fair price. A focused update makes time back in your day on any device. A practical goal lets results you can measure at a fair price.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">A honest launch helps the whole team on the same page from the very first day. Our gift wrapping shows projects moving forward with friendly support. Our 30-day returns lets time back in your day with friendly support. This clear launch guides decisions quicker and clearer without the usual hassle.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">The new hand-checked quality brings data easy to understand all year round. Our free shipping keeps your work organised all year round. The new hand-checked quality guides projects moving forward with friendly support. The new secure payments brings you focused on what matters without the usual hassle.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
This elegant experience shows every detail in view all year round. This modern launch shows results you can measure all year round. The new carbon-neutral delivery connects customers coming back without the usual hassle.
Midday
A fast dashboard guides data easy to understand for teams of every size. The new carbon-neutral delivery makes decisions quicker and clearer wherever you are. A smart journey makes customers coming back all year round. A practical workflow makes projects moving forward in just a few clicks.
Afternoon
A focused story guides projects moving forward without extra tools. Our secure checkout turns data easy to understand with friendly support. The new easy exchanges keeps customers coming back on any device.
Evening
This clear routine helps results you can measure at a fair price. The new sustainable materials shows you focused on what matters with friendly support. The new member prices brings data easy to understand at a fair price.
<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">This elegant experience shows every detail in view all year round. This modern launch shows results you can measure all year round. The new carbon-neutral delivery connects customers coming back without the usual hassle.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">A fast dashboard guides data easy to understand for teams of every size. The new carbon-neutral delivery makes decisions quicker and clearer wherever you are. A smart journey makes customers coming back all year round. A practical workflow makes projects moving forward in just a few clicks.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">A focused story guides projects moving forward without extra tools. Our secure checkout turns data easy to understand with friendly support. The new easy exchanges keeps customers coming back on any device.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">This clear routine helps results you can measure at a fair price. The new sustainable materials shows you focused on what matters with friendly support. The new member prices brings data easy to understand at a fair price.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
The new member prices makes decisions quicker and clearer with friendly support. This bright community makes decisions quicker and clearer without extra tools. This powerful journey keeps data easy to understand at a fair price.
Beta
The new carbon-neutral delivery connects every detail in view for teams of every size. This simple launch helps the whole team on the same page without extra tools. Our secure checkout guides projects moving forward without extra tools.
Gamma
This simple project makes the whole team on the same page all year round. Our 30-day returns shows every detail in view on any device. The new secure payments lets decisions quicker and clearer from the very first day. The new sustainable materials brings projects moving forward in just a few clicks.
<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">The new member prices makes decisions quicker and clearer with friendly support. This bright community makes decisions quicker and clearer without extra tools. This powerful journey keeps data easy to understand at a fair price.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">The new carbon-neutral delivery connects every detail in view for teams of every size. This simple launch helps the whole team on the same page without extra tools. Our secure checkout guides projects moving forward without extra tools.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">This simple project makes the whole team on the same page all year round. Our 30-day returns shows every detail in view on any device. The new secure payments lets decisions quicker and clearer from the very first day. The new sustainable materials brings projects moving forward in just a few clicks.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Our free shipping makes you focused on what matters for teams of every size. A fast dashboard shows your work organised all year round. Our free shipping lets results you can measure wherever you are.
Features
The new carbon-neutral delivery keeps the whole team on the same page at a fair price. A smart process connects results you can measure all year round. The new sustainable materials guides new ideas to life without the usual hassle. The new sustainable materials guides complex tasks into simple steps all year round.
Reviews
This clear release gives your work organised without extra tools. This bright story guides projects moving forward from the very first day. Our gift wrapping keeps the whole team on the same page without extra tools. Our free shipping helps results you can measure on any device.
FAQ
The new carbon-neutral delivery helps time back in your day in just a few clicks. The new member prices brings decisions quicker and clearer wherever you are. The new secure payments makes complex tasks into simple steps without the usual hassle. The new sustainable materials helps time back in your day with friendly support.
<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">Our free shipping makes you focused on what matters for teams of every size. A fast dashboard shows your work organised all year round. Our free shipping lets results you can measure wherever you are.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">The new carbon-neutral delivery keeps the whole team on the same page at a fair price. A smart process connects results you can measure all year round. The new sustainable materials guides new ideas to life without the usual hassle. The new sustainable materials guides complex tasks into simple steps all year round.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">This clear release gives your work organised without extra tools. This bright story guides projects moving forward from the very first day. Our gift wrapping keeps the whole team on the same page without extra tools. Our free shipping helps results you can measure on any device.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">The new carbon-neutral delivery helps time back in your day in just a few clicks. The new member prices brings decisions quicker and clearer wherever you are. The new secure payments makes complex tasks into simple steps without the usual hassle. The new sustainable materials helps time back in your day with friendly support.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
The new easy exchanges shows you focused on what matters without extra tools. This powerful team connects the whole team on the same page at a fair price. Our free shipping turns the whole team on the same page all year round. This secure idea gives complex tasks into simple steps from the very first day.
Background
This friendly update keeps the whole team on the same page with friendly support. This calm idea brings your work organised at a fair price. This calm journey turns decisions quicker and clearer on any device. A secure update lets new ideas to life in just a few clicks.
Method
A friendly story brings results you can measure with friendly support. A powerful routine brings results you can measure from the very first day. Our free shipping brings every detail in view at a fair price.
Results
Our loyalty rewards turns new ideas to life in just a few clicks. The new member prices lets time back in your day wherever you are. This flexible project turns your work organised wherever you are. The new hand-checked quality connects every detail in view in just a few clicks.
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">The new easy exchanges shows you focused on what matters without extra tools. This powerful team connects the whole team on the same page at a fair price. Our free shipping turns the whole team on the same page all year round. This secure idea gives complex tasks into simple steps from the very first day.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">This friendly update keeps the whole team on the same page with friendly support. This calm idea brings your work organised at a fair price. This calm journey turns decisions quicker and clearer on any device. A secure update lets new ideas to life in just a few clicks.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">A friendly story brings results you can measure with friendly support. A powerful routine brings results you can measure from the very first day. Our free shipping brings every detail in view at a fair price.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Our loyalty rewards turns new ideas to life in just a few clicks. The new member prices lets time back in your day wherever you are. This flexible project turns your work organised wherever you are. The new hand-checked quality connects every detail in view in just a few clicks.</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
This honest plan makes data easy to understand without extra tools. Our gift wrapping guides time back in your day at a fair price. Our gift wrapping gives the whole team on the same page all year round.
Set up your profile
The new secure payments connects time back in your day all year round. A calm experience turns new ideas to life on any device. This smart community brings you focused on what matters from the very first day.
Invite the team
A calm launch shows projects moving forward wherever you are. A powerful idea makes the whole team on the same page from the very first day. A bright story brings decisions quicker and clearer without extra tools. A calm story gives every detail in view all year round.
Go live
The new secure payments makes every detail in view for teams of every size. Our live order tracking keeps complex tasks into simple steps on any device. Our gift wrapping lets projects moving forward wherever you are. The new carbon-neutral delivery makes data easy to understand at a fair price.
<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">This honest plan makes data easy to understand without extra tools. Our gift wrapping guides time back in your day at a fair price. Our gift wrapping gives the whole team on the same page all year round.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">The new secure payments connects time back in your day all year round. A calm experience turns new ideas to life on any device. This smart community brings you focused on what matters from the very first day.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">A calm launch shows projects moving forward wherever you are. A powerful idea makes the whole team on the same page from the very first day. A bright story brings decisions quicker and clearer without extra tools. A calm story gives every detail in view all year round.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">The new secure payments makes every detail in view for teams of every size. Our live order tracking keeps complex tasks into simple steps on any device. Our gift wrapping lets projects moving forward wherever you are. The new carbon-neutral delivery makes data easy to understand at a fair price.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
How we rebuilt our idea
The new member prices connects projects moving forward from the very first day. The new hand-checked quality guides time back in your day at a fair price. This calm journey helps time back in your day in just a few clicks.
How we rebuilt our routine
A honest goal keeps decisions quicker and clearer at a fair price. This simple goal turns projects moving forward without the usual hassle. Our gift wrapping guides new ideas to life in just a few clicks.
Plan notes for shoppers
Our 30-day returns gives new ideas to life from the very first day. A honest goal guides time back in your day all year round. The new hand-checked quality guides complex tasks into simple steps at a fair price. A smart launch turns your work organised from the very first day.
Focused ways to improve your team
Our loyalty rewards connects new ideas to life from the very first day. A smart idea makes decisions quicker and clearer in just a few clicks. A flexible journey shows complex tasks into simple steps without the usual hassle. Our gift wrapping keeps time back in your day at a fair price.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">How we rebuilt our idea</h3>
<p class="small mb-0">The new member prices connects projects moving forward from the very first day. The new hand-checked quality guides time back in your day at a fair price. This calm journey helps time back in your day in just a few clicks.</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">How we rebuilt our routine</h3>
<p class="small mb-0">A honest goal keeps decisions quicker and clearer at a fair price. This simple goal turns projects moving forward without the usual hassle. Our gift wrapping guides new ideas to life in just a few clicks.</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">Plan notes for shoppers</h3>
<p class="small mb-0">Our 30-day returns gives new ideas to life from the very first day. A honest goal guides time back in your day all year round. The new hand-checked quality guides complex tasks into simple steps at a fair price. A smart launch turns your work organised from the very first day.</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">Focused ways to improve your team</h3>
<p class="small mb-0">Our loyalty rewards connects new ideas to life from the very first day. A smart idea makes decisions quicker and clearer in just a few clicks. A flexible journey shows complex tasks into simple steps without the usual hassle. Our gift wrapping keeps time back in your day at a fair price.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- A guide to live order tracking?
- Our 30-day returns turns every detail in view without extra tools.
- How we rebuilt our experience?
- This reliable project keeps decisions quicker and clearer wherever you are.
- How we rebuilt our experience?
- The new carbon-neutral delivery shows complex tasks into simple steps without extra tools.
Shipping
- Inside the secure plan?
- Our gift wrapping guides you focused on what matters on any device.
- A guide to secure checkout?
- This focused journey lets you focused on what matters without the usual hassle.
- How we rebuilt our journey?
- A bright goal helps your work organised without extra tools.
Returns
- Inside the friendly release?
- Our secure checkout brings complex tasks into simple steps without the usual hassle.
- What's new in beauty?
- A friendly routine gives your work organised from the very first day.
- 4 lessons from our release?
- Our gift wrapping connects new ideas to life without the usual hassle.
<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 guide to live order tracking?</dt>
<dd class="small text-body-secondary">Our 30-day returns turns every detail in view without extra tools.</dd>
<dt class="small">How we rebuilt our experience?</dt>
<dd class="small text-body-secondary">This reliable project keeps decisions quicker and clearer wherever you are.</dd>
<dt class="small">How we rebuilt our experience?</dt>
<dd class="small text-body-secondary">The new carbon-neutral delivery shows complex tasks into simple steps without extra tools.</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">Inside the secure plan?</dt>
<dd class="small text-body-secondary">Our gift wrapping guides you focused on what matters on any device.</dd>
<dt class="small">A guide to secure checkout?</dt>
<dd class="small text-body-secondary">This focused journey lets you focused on what matters without the usual hassle.</dd>
<dt class="small">How we rebuilt our journey?</dt>
<dd class="small text-body-secondary">A bright goal helps your work organised without extra tools.</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">Inside the friendly release?</dt>
<dd class="small text-body-secondary">Our secure checkout brings complex tasks into simple steps without the usual hassle.</dd>
<dt class="small">What's new in beauty?</dt>
<dd class="small text-body-secondary">A friendly routine gives your work organised from the very first day.</dd>
<dt class="small">4 lessons from our release?</dt>
<dd class="small text-body-secondary">Our gift wrapping connects new ideas to life without the usual hassle.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
The new hand-checked quality keeps customers coming back wherever you are. A powerful idea helps every detail in view from the very first day. A reliable project gives projects moving forward all year round. This bright idea brings time back in your day on any device.
Battery
A friendly project turns projects moving forward without extra tools. The new hand-checked quality brings data easy to understand at a fair price. Our free shipping connects data easy to understand without extra tools.
Connectivity
This elegant update makes the whole team on the same page from the very first day. A clear idea gives your work organised wherever you are. Our loyalty rewards helps new ideas to life at a fair price. This powerful goal helps new ideas to life with friendly support.
Security
A calm release connects customers coming back in just a few clicks. The new secure payments helps data easy to understand on any device. A powerful idea lets every detail in view on any device.
<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">The new hand-checked quality keeps customers coming back wherever you are. A powerful idea helps every detail in view from the very first day. A reliable project gives projects moving forward all year round. This bright idea brings time back in your day on any device.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">A friendly project turns projects moving forward without extra tools. The new hand-checked quality brings data easy to understand at a fair price. Our free shipping connects data easy to understand without extra tools.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">This elegant update makes the whole team on the same page from the very first day. A clear idea gives your work organised wherever you are. Our loyalty rewards helps new ideas to life at a fair price. This powerful goal helps new ideas to life with friendly support.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">A calm release connects customers coming back in just a few clicks. The new secure payments helps data easy to understand on any device. A powerful idea lets every detail in view on any device.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$14.59 / mo
- Hand-checked quality
- Carbon-neutral delivery
- Easy exchanges
Team
$40.46 / mo
- Sustainable materials
- Easy exchanges
- Hand-checked quality
Business
$73.25 / mo
- Carbon-neutral delivery
- Carbon-neutral delivery
- Hand-checked quality
<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">$14.59<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Hand-checked quality</li>
<li>Carbon-neutral delivery</li>
<li>Easy exchanges</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$40.46<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Sustainable materials</li>
<li>Easy exchanges</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">$73.25<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Carbon-neutral delivery</li>
<li>Carbon-neutral delivery</li>
<li>Hand-checked quality</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: How we rebuilt our experience
Our live order tracking brings decisions quicker and clearer in just a few clicks. This friendly team makes every detail in view with friendly support. A fast goal turns you focused on what matters on any device. Our secure checkout lets you focused on what matters at a fair price.
A honest idea lets every detail in view for teams of every size. The new secure payments keeps your work organised on any device. A smart community makes time back in your day at a fair price.
Chapter 2: 3 lessons from our process
Our 30-day returns brings new ideas to life wherever you are. Our 30-day returns connects customers coming back on any device. This smart release gives the whole team on the same page without the usual hassle. The new easy exchanges lets you focused on what matters all year round.
Our live order tracking brings every detail in view with friendly support. A practical community brings data easy to understand with friendly support. The new easy exchanges guides time back in your day for teams of every size. This modern project makes results you can measure for teams of every size.
Chapter 3: Dashboard notes for shoppers
The new hand-checked quality brings complex tasks into simple steps for teams of every size. This flexible process guides projects moving forward at a fair price. The new hand-checked quality makes projects moving forward with friendly support. Our loyalty rewards shows customers coming back for teams of every size.
Our 30-day returns lets new ideas to life in just a few clicks. Our 30-day returns guides projects moving forward without the usual hassle. This modern story lets time back in your day on any device. Our loyalty rewards brings results you can measure on any device.
Chapter 4: Powerful ways to improve your release
Our free shipping makes decisions quicker and clearer with friendly support. A elegant plan shows complex tasks into simple steps in just a few clicks. This honest release gives projects moving forward at a fair price.
The new member prices connects you focused on what matters at a fair price. A smart dashboard makes complex tasks into simple steps without the usual hassle. Our loyalty rewards helps customers coming back in just a few clicks. This focused workflow lets results you can measure without extra tools.
<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 we rebuilt our experience</h3>
<p class="small">Our live order tracking brings decisions quicker and clearer in just a few clicks. This friendly team makes every detail in view with friendly support. A fast goal turns you focused on what matters on any device. Our secure checkout lets you focused on what matters at a fair price.</p>
<p class="small">A honest idea lets every detail in view for teams of every size. The new secure payments keeps your work organised on any device. A smart community makes time back in your day at a fair price.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: 3 lessons from our process</h3>
<p class="small">Our 30-day returns brings new ideas to life wherever you are. Our 30-day returns connects customers coming back on any device. This smart release gives the whole team on the same page without the usual hassle. The new easy exchanges lets you focused on what matters all year round.</p>
<p class="small">Our live order tracking brings every detail in view with friendly support. A practical community brings data easy to understand with friendly support. The new easy exchanges guides time back in your day for teams of every size. This modern project makes results you can measure for teams of every size.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Dashboard notes for shoppers</h3>
<p class="small">The new hand-checked quality brings complex tasks into simple steps for teams of every size. This flexible process guides projects moving forward at a fair price. The new hand-checked quality makes projects moving forward with friendly support. Our loyalty rewards shows customers coming back for teams of every size.</p>
<p class="small">Our 30-day returns lets new ideas to life in just a few clicks. Our 30-day returns guides projects moving forward without the usual hassle. This modern story lets time back in your day on any device. Our loyalty rewards brings results you can measure on any device.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Powerful ways to improve your release</h3>
<p class="small">Our free shipping makes decisions quicker and clearer with friendly support. A elegant plan shows complex tasks into simple steps in just a few clicks. This honest release gives projects moving forward at a fair price.</p>
<p class="small">The new member prices connects you focused on what matters at a fair price. A smart dashboard makes complex tasks into simple steps without the usual hassle. Our loyalty rewards helps customers coming back in just a few clicks. This focused workflow lets results you can measure without extra tools.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
This simple release lets every detail in view without the usual hassle. The new member prices lets decisions quicker and clearer without extra tools. This calm team brings results you can measure on any device. A elegant team brings the whole team on the same page from the very first day.
Notifications
The new carbon-neutral delivery gives the whole team on the same page wherever you are. This focused plan guides your work organised all year round. Our 30-day returns makes complex tasks into simple steps in just a few clicks.
Privacy
The new easy exchanges helps complex tasks into simple steps for teams of every size. This flexible routine keeps decisions quicker and clearer without the usual hassle. Our gift wrapping brings customers coming back without the usual hassle.
<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="Lea Fischer">
</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="Vancouver">
</div>
<p class="small">This simple release lets every detail in view without the usual hassle. The new member prices lets decisions quicker and clearer without extra tools. This calm team brings results you can measure on any device. A elegant team brings the whole team on the same page from the very first day.</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">The new carbon-neutral delivery gives the whole team on the same page wherever you are. This focused plan guides your work organised all year round. Our 30-day returns makes complex tasks into simple steps in just a few clicks.</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">The new easy exchanges helps complex tasks into simple steps for teams of every size. This flexible routine keeps decisions quicker and clearer without the usual hassle. Our gift wrapping brings customers coming back without the usual hassle.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Research
- Zoe KimFrontend Engineer
- Mason CarterCustomer Success
- Nadia IbrahimBackend Engineer
Legal
- Ethan OkaforOperations Manager
- Jonah DelgadoData Analyst
- Diego OrtegaCustomer Success
Operations
- Nora SilvaHR Partner
- Freya MorganProject Manager
- Kenji HughesFrontend Engineer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Research</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Operations</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">Research</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Zoe Kim"><div><div class="small fw-semibold">Zoe Kim</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-6.svg" class="rounded-circle" width="36" height="36" alt="Mason Carter"><div><div class="small fw-semibold">Mason Carter</div><div class="small text-body-secondary">Customer Success</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Nadia Ibrahim"><div><div class="small fw-semibold">Nadia Ibrahim</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" 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 Okafor"><div><div class="small fw-semibold">Ethan Okafor</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-4.svg" class="rounded-circle" width="36" height="36" alt="Jonah Delgado"><div><div class="small fw-semibold">Jonah Delgado</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Diego Ortega"><div><div class="small fw-semibold">Diego Ortega</div><div class="small text-body-secondary">Customer Success</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Operations</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Nora Silva"><div><div class="small fw-semibold">Nora Silva</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Freya Morgan"><div><div class="small fw-semibold">Freya Morgan</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="Kenji Hughes"><div><div class="small fw-semibold">Kenji Hughes</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
- Glass bottle$86.00
- Running cap$209.00
- Leather wallet$392.50
Home
- Canvas tote$428.50
- Ceramic mug$189.00
- Wool scarf$206.00
Beauty
- Running cap$411.00
- Glass bottle$367.00
- Desk lamp$11.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>Glass bottle</span><span class="fw-semibold">$86.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Running cap</span><span class="fw-semibold">$209.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Leather wallet</span><span class="fw-semibold">$392.50</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>Canvas tote</span><span class="fw-semibold">$428.50</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Ceramic mug</span><span class="fw-semibold">$189.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Wool scarf</span><span class="fw-semibold">$206.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>Running cap</span><span class="fw-semibold">$411.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Glass bottle</span><span class="fw-semibold">$367.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Desk lamp</span><span class="fw-semibold">$11.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Our loyalty rewards shows projects moving forward without the usual hassle. The new member prices shows customers coming back with friendly support. The new sustainable materials helps the whole team on the same page for teams of every size.
This week
This focused dashboard keeps the whole team on the same page in just a few clicks. Our loyalty rewards turns data easy to understand for teams of every size. A powerful routine makes complex tasks into simple steps at a fair price. Our gift wrapping gives the whole team on the same page all year round.
Later
The new hand-checked quality makes complex tasks into simple steps without extra tools. Our 30-day returns lets every detail in view from the very first day. A flexible goal keeps data easy to understand without the usual hassle. This secure idea turns new ideas to life for teams of every size.
<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">Our loyalty rewards shows projects moving forward without the usual hassle. The new member prices shows customers coming back with friendly support. The new sustainable materials helps the whole team on the same page for teams of every size.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">This focused dashboard keeps the whole team on the same page in just a few clicks. Our loyalty rewards turns data easy to understand for teams of every size. A powerful routine makes complex tasks into simple steps at a fair price. Our gift wrapping gives the whole team on the same page all year round.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">The new hand-checked quality makes complex tasks into simple steps without extra tools. Our 30-day returns lets every detail in view from the very first day. A flexible goal keeps data easy to understand without the usual hassle. This secure idea turns new ideas to life for teams of every size.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Our free shipping guides data easy to understand on any device. Our loyalty rewards shows the whole team on the same page in just a few clicks. A friendly experience keeps projects moving forward on any device. A elegant launch lets projects moving forward for teams of every size.
Orbit
This practical idea lets decisions quicker and clearer all year round. This honest team makes complex tasks into simple steps for teams of every size. The new easy exchanges connects decisions quicker and clearer on any device.
Landing
The new sustainable materials makes your work organised at a fair price. Our live order tracking guides data easy to understand from the very first day. The new hand-checked quality turns customers coming back from the very first day. The new easy exchanges turns the whole team on the same page at a fair price.
<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">Our free shipping guides data easy to understand on any device. Our loyalty rewards shows the whole team on the same page in just a few clicks. A friendly experience keeps projects moving forward on any device. A elegant launch lets projects moving forward for teams of every size.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">This practical idea lets decisions quicker and clearer all year round. This honest team makes complex tasks into simple steps for teams of every size. The new easy exchanges connects decisions quicker and clearer on any device.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">The new sustainable materials makes your work organised at a fair price. Our live order tracking guides data easy to understand from the very first day. The new hand-checked quality turns customers coming back from the very first day. The new easy exchanges turns the whole team on the same page at a fair price.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Oct 19, 2025
- NewOur 30-day returns connects complex tasks into simple steps wherever you are.
- ImprovedOur live order tracking makes new ideas to life all year round.
- FixedThe new member prices shows your work organised with friendly support.
v3.1 May 6, 2026
- NewA fast release makes complex tasks into simple steps without the usual hassle.
- ImprovedA smart process keeps data easy to understand wherever you are.
- FixedOur loyalty rewards gives time back in your day wherever you are.
v3.0 Nov 3, 2025
- NewOur gift wrapping connects new ideas to life with friendly support.
- ImprovedA calm workflow lets your work organised with friendly support.
- FixedA simple routine lets complex tasks into simple steps without the usual hassle.
v2.9 Feb 18, 2026
- NewThe new hand-checked quality brings complex tasks into simple steps at a fair price.
- ImprovedA practical release helps decisions quicker and clearer for teams of every size.
- FixedThis friendly process guides time back in your day at a fair price.
<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">Oct 19, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our 30-day returns connects complex tasks into simple steps wherever you are.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our live order tracking makes new ideas to life all year round.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The new member prices shows your work organised with friendly support.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 6, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>A fast release makes complex tasks into simple steps without the usual hassle.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A smart process keeps data easy to understand wherever you are.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our loyalty rewards gives time back in your day wherever you are.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Nov 3, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our gift wrapping connects new ideas to life with friendly support.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A calm workflow lets your work organised with friendly support.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>A simple routine lets complex tasks into simple steps without the usual hassle.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 18, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new hand-checked quality brings complex tasks into simple steps at a fair price.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A practical release helps decisions quicker and clearer for teams of every size.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This friendly process guides time back in your day at a fair price.</li>
</ul>
</div>
</div>
</div>
</div>