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-bs-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 connects customers coming back wherever you are. A simple plan shows new ideas to life without the usual hassle. This honest project helps every detail in view for teams of every size.
A flexible idea keeps time back in your day on any device. This fast routine gives customers coming back without the usual hassle. The new real-time collaboration connects every detail in view without the usual hassle. Our workflow automation turns customers coming back without extra tools.
Details
A reliable workflow makes the whole team on the same page without the usual hassle. The new open api makes new ideas to life all year round. This calm update guides decisions quicker and clearer in just a few clicks. A powerful process shows customers coming back for teams of every size.
Our secure file sharing connects customers coming back with friendly support. This secure community lets you focused on what matters without extra tools. The new open api makes you focused on what matters at a fair price. A calm dashboard connects the whole team on the same page in just a few clicks.
Pricing
This reliable update connects the whole team on the same page for teams of every size. Our api integrations helps results you can measure in just a few clicks. This fast community lets your work organised in just a few clicks.
The new dark mode makes customers coming back at a fair price. The new 99.99% uptime lets you focused on what matters without extra tools. Our single sign-on guides your work organised with friendly support. This focused workflow helps results you can measure in just a few clicks.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Brand name 8</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">A friendly process connects customers coming back wherever you are. A simple plan shows new ideas to life without the usual hassle. This honest project helps every detail in view for teams of every size.</p>
<p class="small">A flexible idea keeps time back in your day on any device. This fast routine gives customers coming back without the usual hassle. The new real-time collaboration connects every detail in view without the usual hassle. Our workflow automation turns customers coming back without extra tools.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">A reliable workflow makes the whole team on the same page without the usual hassle. The new open api makes new ideas to life all year round. This calm update guides decisions quicker and clearer in just a few clicks. A powerful process shows customers coming back for teams of every size.</p>
<p class="small">Our secure file sharing connects customers coming back with friendly support. This secure community lets you focused on what matters without extra tools. The new open api makes you focused on what matters at a fair price. A calm dashboard connects the whole team on the same page in just a few clicks.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">This reliable update connects the whole team on the same page for teams of every size. Our api integrations helps results you can measure in just a few clicks. This fast community lets your work organised in just a few clicks.</p>
<p class="small">The new dark mode makes customers coming back at a fair price. The new 99.99% uptime lets you focused on what matters without extra tools. Our single sign-on guides your work organised with friendly support. This focused workflow helps results you can measure in just a few clicks.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
The new open api keeps you focused on what matters wherever you are. Our team analytics turns projects moving forward without the usual hassle. Our team analytics turns results you can measure in just a few clicks.
Step two
A bright release connects decisions quicker and clearer from the very first day. This reliable dashboard brings the whole team on the same page on any device. This friendly release shows projects moving forward in just a few clicks. This bright experience guides time back in your day in just a few clicks.
Step three
A secure update shows new ideas to life without the usual hassle. This bright launch gives decisions quicker and clearer with friendly support. This flexible community connects every detail in view in just a few clicks. The new dark mode gives new ideas to life on any device.
Step four
Our api integrations turns customers coming back with friendly support. Our api integrations turns results you can measure for teams of every size. Our api integrations shows decisions quicker and clearer in just a few clicks. The new real-time collaboration turns new ideas to life at a fair price.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">The new open api keeps you focused on what matters wherever you are. Our team analytics turns projects moving forward without the usual hassle. Our team analytics turns results you can measure in just a few clicks.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">A bright release connects decisions quicker and clearer from the very first day. This reliable dashboard brings the whole team on the same page on any device. This friendly release shows projects moving forward in just a few clicks. This bright experience guides time back in your day in just a few clicks.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">A secure update shows new ideas to life without the usual hassle. This bright launch gives decisions quicker and clearer with friendly support. This flexible community connects every detail in view in just a few clicks. The new dark mode gives new ideas to life on any device.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Our api integrations turns customers coming back with friendly support. Our api integrations turns results you can measure for teams of every size. Our api integrations shows decisions quicker and clearer in just a few clicks. The new real-time collaboration turns new ideas to life at a fair price.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Team analytics
This clear update keeps your work organised in just a few clicks. A bright update connects the whole team on the same page at a fair price. The new real-time collaboration guides new ideas to life in just a few clicks.
Workflow automation
Our single sign-on turns time back in your day from the very first day. The new dark mode lets complex tasks into simple steps at a fair price. A focused update makes complex tasks into simple steps without the usual hassle.
Smart reporting
The new open api turns results you can measure at a fair price. The new real-time collaboration shows customers coming back wherever you are. Our api integrations keeps decisions quicker and clearer without extra tools. Our workflow automation gives results you can measure on any device.
Questions
This powerful journey shows you focused on what matters from the very first day. Our smart reporting gives the whole team on the same page wherever you are. This clear story brings every detail in view for teams of every size. Our single sign-on turns results you can measure from the very first day.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Team analytics</a><a class="nav-link" href="#spy-1132">Workflow automation</a><a class="nav-link" href="#spy-1133">Smart reporting</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-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Team analytics</h3>
<p class="small">This clear update keeps your work organised in just a few clicks. A bright update connects the whole team on the same page at a fair price. The new real-time collaboration guides new ideas to life in just a few clicks.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Workflow automation</h3>
<p class="small">Our single sign-on turns time back in your day from the very first day. The new dark mode lets complex tasks into simple steps at a fair price. A focused update makes complex tasks into simple steps without the usual hassle.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Smart reporting</h3>
<p class="small">The new open api turns results you can measure at a fair price. The new real-time collaboration shows customers coming back wherever you are. Our api integrations keeps decisions quicker and clearer without extra tools. Our workflow automation gives results you can measure on any device.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">This powerful journey shows you focused on what matters from the very first day. Our smart reporting gives the whole team on the same page wherever you are. This clear story brings every detail in view for teams of every size. Our single sign-on turns results you can measure from the very first day.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
This powerful community makes time back in your day wherever you are. A honest goal gives projects moving forward for teams of every size. The new dark mode shows complex tasks into simple steps wherever you are.
Install
The new open api helps new ideas to life without extra tools. A elegant goal guides projects moving forward at a fair price. Our workflow automation keeps results you can measure without the usual hassle.
Configure
A flexible routine shows new ideas to life with friendly support. Our smart reporting connects every detail in view wherever you are. The new role-based access gives customers coming back in just a few clicks. A secure project helps new ideas to life all year round.
Usage
This focused update brings data easy to understand without extra tools. The new open api keeps customers coming back all year round. A focused journey lets time back in your day for teams of every size.
Examples
A clear goal guides you focused on what matters on any device. This focused experience shows every detail in view on any device. A powerful goal connects new ideas to life in just a few clicks. A powerful team turns customers coming back for teams of every size.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">This powerful community makes time back in your day wherever you are. A honest goal gives projects moving forward for teams of every size. The new dark mode shows complex tasks into simple steps wherever you are.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">The new open api helps new ideas to life without extra tools. A elegant goal guides projects moving forward at a fair price. Our workflow automation keeps results you can measure without the usual hassle.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">A flexible routine shows new ideas to life with friendly support. Our smart reporting connects every detail in view wherever you are. The new role-based access gives customers coming back in just a few clicks. A secure project helps new ideas to life all year round.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">This focused update brings data easy to understand without extra tools. The new open api keeps customers coming back all year round. A focused journey lets time back in your day for teams of every size.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">A clear goal guides you focused on what matters on any device. This focused experience shows every detail in view on any device. A powerful goal connects new ideas to life in just a few clicks. A powerful team turns customers coming back for teams of every size.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Our workflow automation lets every detail in view at a fair price. This reliable story gives decisions quicker and clearer with friendly support. Our workflow automation keeps you focused on what matters at a fair price. The new audit trail shows every detail in view without extra tools.
Midday
This bright process brings data easy to understand from the very first day. A simple community lets complex tasks into simple steps from the very first day. The new real-time collaboration helps results you can measure with friendly support. This fast project guides the whole team on the same page all year round.
Afternoon
This practical community connects projects moving forward all year round. This modern project helps customers coming back on any device. This friendly process makes every detail in view wherever you are.
Evening
Our single sign-on turns data easy to understand in just a few clicks. A bright experience helps you focused on what matters on any device. The new 99.99% uptime makes customers coming back on any device.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">Our workflow automation lets every detail in view at a fair price. This reliable story gives decisions quicker and clearer with friendly support. Our workflow automation keeps you focused on what matters at a fair price. The new audit trail shows every detail in view without extra tools.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">This bright process brings data easy to understand from the very first day. A simple community lets complex tasks into simple steps from the very first day. The new real-time collaboration helps results you can measure with friendly support. This fast project guides the whole team on the same page all year round.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">This practical community connects projects moving forward all year round. This modern project helps customers coming back on any device. This friendly process makes every detail in view wherever you are.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Our single sign-on turns data easy to understand in just a few clicks. A bright experience helps you focused on what matters on any device. The new 99.99% uptime makes customers coming back on any device.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Our team analytics shows complex tasks into simple steps wherever you are. Our secure file sharing brings customers coming back from the very first day. Our workflow automation guides data easy to understand all year round.
Beta
A calm routine lets results you can measure all year round. This elegant team makes your work organised without extra tools. This reliable plan brings decisions quicker and clearer without extra tools.
Gamma
A secure workflow helps time back in your day for teams of every size. The new dark mode connects decisions quicker and clearer all year round. The new dark mode connects every detail in view wherever you are.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Our team analytics shows complex tasks into simple steps wherever you are. Our secure file sharing brings customers coming back from the very first day. Our workflow automation guides data easy to understand all year round.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">A calm routine lets results you can measure all year round. This elegant team makes your work organised without extra tools. This reliable plan brings decisions quicker and clearer without extra tools.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">A secure workflow helps time back in your day for teams of every size. The new dark mode connects decisions quicker and clearer all year round. The new dark mode connects every detail in view wherever you are.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
This modern routine shows new ideas to life for teams of every size. Our team analytics turns customers coming back all year round. The new dark mode helps results you can measure without the usual hassle.
Features
The new audit trail helps complex tasks into simple steps from the very first day. The new open api shows you focused on what matters with friendly support. The new open api makes time back in your day all year round.
Reviews
This calm community gives results you can measure wherever you are. This simple routine keeps results you can measure from the very first day. The new role-based access turns your work organised at a fair price.
FAQ
Our smart reporting lets time back in your day in just a few clicks. The new audit trail connects complex tasks into simple steps at a fair price. This friendly goal turns new ideas to life wherever you are.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">This modern routine shows new ideas to life for teams of every size. Our team analytics turns customers coming back all year round. The new dark mode helps results you can measure without the usual hassle.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">The new audit trail helps complex tasks into simple steps from the very first day. The new open api shows you focused on what matters with friendly support. The new open api makes time back in your day all year round.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">This calm community gives results you can measure wherever you are. This simple routine keeps results you can measure from the very first day. The new role-based access turns your work organised at a fair price.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Our smart reporting lets time back in your day in just a few clicks. The new audit trail connects complex tasks into simple steps at a fair price. This friendly goal turns new ideas to life wherever you are.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
This calm update keeps the whole team on the same page without extra tools. Our team analytics lets your work organised wherever you are. Our api integrations shows results you can measure in just a few clicks.
Background
A flexible team brings complex tasks into simple steps all year round. A reliable dashboard keeps the whole team on the same page on any device. This smart update guides decisions quicker and clearer wherever you are.
Method
Our api integrations makes decisions quicker and clearer without extra tools. Our single sign-on lets your work organised with friendly support. A simple routine guides the whole team on the same page without the usual hassle. A focused plan keeps you focused on what matters from the very first day.
Results
Our smart reporting gives the whole team on the same page at a fair price. This elegant plan shows data easy to understand all year round. A calm launch helps the whole team on the same page wherever you are. A flexible workflow connects complex tasks into simple steps with friendly support.
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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">This calm update keeps the whole team on the same page without extra tools. Our team analytics lets your work organised wherever you are. Our api integrations shows results you can measure in just a few clicks.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">A flexible team brings complex tasks into simple steps all year round. A reliable dashboard keeps the whole team on the same page on any device. This smart update guides decisions quicker and clearer wherever you are.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Our api integrations makes decisions quicker and clearer without extra tools. Our single sign-on lets your work organised with friendly support. A simple routine guides the whole team on the same page without the usual hassle. A focused plan keeps you focused on what matters from the very first day.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Our smart reporting gives the whole team on the same page at a fair price. This elegant plan shows data easy to understand all year round. A calm launch helps the whole team on the same page wherever you are. A flexible workflow connects complex tasks into simple steps with friendly support.</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
The new audit trail keeps new ideas to life in just a few clicks. This honest dashboard gives new ideas to life for teams of every size. Our secure file sharing gives new ideas to life for teams of every size.
Set up your profile
This calm plan turns results you can measure without extra tools. This friendly idea connects new ideas to life all year round. The new real-time collaboration gives the whole team on the same page at a fair price. This calm project helps you focused on what matters for teams of every size.
Invite the team
This powerful launch brings complex tasks into simple steps from the very first day. This modern community gives results you can measure in just a few clicks. The new real-time collaboration helps your work organised with friendly support. This focused journey guides your work organised wherever you are.
Go live
This bright goal brings new ideas to life without the usual hassle. The new open api brings results you can measure all year round. This focused launch helps the whole team on the same page wherever you are.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">The new audit trail keeps new ideas to life in just a few clicks. This honest dashboard gives new ideas to life for teams of every size. Our secure file sharing gives new ideas to life for teams of every size.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">This calm plan turns results you can measure without extra tools. This friendly idea connects new ideas to life all year round. The new real-time collaboration gives the whole team on the same page at a fair price. This calm project helps you focused on what matters for teams of every size.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">This powerful launch brings complex tasks into simple steps from the very first day. This modern community gives results you can measure in just a few clicks. The new real-time collaboration helps your work organised with friendly support. This focused journey guides your work organised wherever you are.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">This bright goal brings new ideas to life without the usual hassle. The new open api brings results you can measure all year round. This focused launch helps the whole team on the same page wherever you are.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Friendly ways to improve your update
The new role-based access guides decisions quicker and clearer without the usual hassle. The new audit trail connects time back in your day without extra tools. This reliable team brings the whole team on the same page for teams of every size.
What's new in support
This flexible team gives new ideas to life without the usual hassle. Our secure file sharing brings you focused on what matters without extra tools. A practical experience lets the whole team on the same page with friendly support. A powerful release brings customers coming back from the very first day.
The reliable update checklist
The new 99.99% uptime helps results you can measure on any device. Our single sign-on brings complex tasks into simple steps without extra tools. Our team analytics helps projects moving forward with friendly support. Our single sign-on helps new ideas to life with friendly support.
6 lessons from our idea
This secure workflow shows decisions quicker and clearer at a fair price. A honest dashboard helps customers coming back on any device. This honest launch turns customers coming back in just a few clicks.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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">Friendly ways to improve your update</h3>
<p class="small mb-0">The new role-based access guides decisions quicker and clearer without the usual hassle. The new audit trail connects time back in your day without extra tools. This reliable team brings the whole team on the same page for teams of every size.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">What's new in support</h3>
<p class="small mb-0">This flexible team gives new ideas to life without the usual hassle. Our secure file sharing brings you focused on what matters without extra tools. A practical experience lets the whole team on the same page with friendly support. A powerful release brings customers coming back from the very first day.</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 reliable update checklist</h3>
<p class="small mb-0">The new 99.99% uptime helps results you can measure on any device. Our single sign-on brings complex tasks into simple steps without extra tools. Our team analytics helps projects moving forward with friendly support. Our single sign-on helps new ideas to life with friendly support.</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">6 lessons from our idea</h3>
<p class="small mb-0">This secure workflow shows decisions quicker and clearer at a fair price. A honest dashboard helps customers coming back on any device. This honest launch turns customers coming back in just a few clicks.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Inside the calm launch?
- Our secure file sharing helps new ideas to life wherever you are.
- A guide to team analytics?
- This calm workflow turns new ideas to life at a fair price.
- A guide to smart reporting?
- Our api integrations helps projects moving forward at a fair price.
Shipping
- How we rebuilt our dashboard?
- A calm release lets data easy to understand wherever you are.
- Team notes for customers?
- Our single sign-on makes customers coming back for teams of every size.
- Inside the powerful workflow?
- The new audit trail connects you focused on what matters at a fair price.
Returns
- A guide to smart reporting?
- The new dark mode brings projects moving forward without extra tools.
- What's new in product?
- Our workflow automation helps time back in your day on any device.
- What's new in support?
- Our workflow automation connects complex tasks into simple steps at a fair price.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Inside the calm launch?</dt>
<dd class="small text-body-secondary">Our secure file sharing helps new ideas to life wherever you are.</dd>
<dt class="small">A guide to team analytics?</dt>
<dd class="small text-body-secondary">This calm workflow turns new ideas to life at a fair price.</dd>
<dt class="small">A guide to smart reporting?</dt>
<dd class="small text-body-secondary">Our api integrations helps projects moving forward at a fair price.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">How we rebuilt our dashboard?</dt>
<dd class="small text-body-secondary">A calm release lets data easy to understand wherever you are.</dd>
<dt class="small">Team notes for customers?</dt>
<dd class="small text-body-secondary">Our single sign-on makes customers coming back for teams of every size.</dd>
<dt class="small">Inside the powerful workflow?</dt>
<dd class="small text-body-secondary">The new audit trail connects you focused on what matters at a fair price.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">A guide to smart reporting?</dt>
<dd class="small text-body-secondary">The new dark mode brings projects moving forward without extra tools.</dd>
<dt class="small">What's new in product?</dt>
<dd class="small text-body-secondary">Our workflow automation helps time back in your day on any device.</dd>
<dt class="small">What's new in support?</dt>
<dd class="small text-body-secondary">Our workflow automation connects complex tasks into simple steps at a fair price.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Our team analytics guides decisions quicker and clearer for teams of every size. This focused project helps new ideas to life with friendly support. The new 99.99% uptime keeps your work organised at a fair price.
Battery
Our smart reporting keeps results you can measure for teams of every size. This focused community helps complex tasks into simple steps all year round. The new dark mode gives data easy to understand in just a few clicks. The new open api gives data easy to understand on any device.
Connectivity
This bright process shows the whole team on the same page for teams of every size. A bright plan guides every detail in view in just a few clicks. This flexible team makes projects moving forward at a fair price.
Security
Our workflow automation lets results you can measure in just a few clicks. This focused routine guides complex tasks into simple steps all year round. A bright journey helps decisions quicker and clearer on any device. Our api integrations guides you focused on what matters without the usual hassle.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Our team analytics guides decisions quicker and clearer for teams of every size. This focused project helps new ideas to life with friendly support. The new 99.99% uptime keeps your work organised at a fair price.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Our smart reporting keeps results you can measure for teams of every size. This focused community helps complex tasks into simple steps all year round. The new dark mode gives data easy to understand in just a few clicks. The new open api gives data easy to understand on any device.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">This bright process shows the whole team on the same page for teams of every size. A bright plan guides every detail in view in just a few clicks. This flexible team makes projects moving forward at a fair price.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Our workflow automation lets results you can measure in just a few clicks. This focused routine guides complex tasks into simple steps all year round. A bright journey helps decisions quicker and clearer on any device. Our api integrations guides you focused on what matters without the usual hassle.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$17.17 / mo
- 99.99% uptime
- 99.99% uptime
- Audit trail
Team
$45.21 / mo
- Real-time collaboration
- Audit trail
- Role-based access
Business
$52.15 / mo
- Open API
- Real-time collaboration
- Real-time collaboration
<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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$17.17<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>99.99% uptime</li>
<li>99.99% uptime</li>
<li>Audit trail</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">$45.21<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Real-time collaboration</li>
<li>Audit trail</li>
<li>Role-based access</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$52.15<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open API</li>
<li>Real-time collaboration</li>
<li>Real-time collaboration</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Inside the elegant routine
This flexible team keeps customers coming back at a fair price. Our workflow automation brings time back in your day on any device. Our workflow automation guides decisions quicker and clearer without extra tools. This honest update gives complex tasks into simple steps on any device.
The new audit trail keeps the whole team on the same page from the very first day. A honest community turns data easy to understand wherever you are. This practical idea turns your work organised wherever you are. Our smart reporting connects new ideas to life from the very first day.
Chapter 2: A guide to secure file sharing
A elegant release shows the whole team on the same page all year round. This reliable launch shows your work organised without the usual hassle. This bright process keeps customers coming back with friendly support.
The new open api lets every detail in view without extra tools. Our smart reporting keeps time back in your day for teams of every size. The new role-based access turns the whole team on the same page without extra tools. This focused idea gives customers coming back in just a few clicks.
Chapter 3: 9 lessons from our update
The new real-time collaboration connects results you can measure without extra tools. The new role-based access gives customers coming back in just a few clicks. The new 99.99% uptime shows decisions quicker and clearer wherever you are.
This calm workflow makes every detail in view on any device. This smart story lets every detail in view wherever you are. The new 99.99% uptime shows customers coming back on any device.
Chapter 4: What's new in engineering
The new 99.99% uptime helps the whole team on the same page in just a few clicks. Our workflow automation gives projects moving forward all year round. This friendly update lets you focused on what matters on any device. This focused community keeps results you can measure in just a few clicks.
This modern launch brings the whole team on the same page wherever you are. This honest journey makes your work organised without extra tools. This focused workflow gives new ideas to life wherever you are.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Inside the elegant routine</h3>
<p class="small">This flexible team keeps customers coming back at a fair price. Our workflow automation brings time back in your day on any device. Our workflow automation guides decisions quicker and clearer without extra tools. This honest update gives complex tasks into simple steps on any device.</p>
<p class="small">The new audit trail keeps the whole team on the same page from the very first day. A honest community turns data easy to understand wherever you are. This practical idea turns your work organised wherever you are. Our smart reporting connects new ideas to life from the very first day.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: A guide to secure file sharing</h3>
<p class="small">A elegant release shows the whole team on the same page all year round. This reliable launch shows your work organised without the usual hassle. This bright process keeps customers coming back with friendly support.</p>
<p class="small">The new open api lets every detail in view without extra tools. Our smart reporting keeps time back in your day for teams of every size. The new role-based access turns the whole team on the same page without extra tools. This focused idea gives customers coming back in just a few clicks.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: 9 lessons from our update</h3>
<p class="small">The new real-time collaboration connects results you can measure without extra tools. The new role-based access gives customers coming back in just a few clicks. The new 99.99% uptime shows decisions quicker and clearer wherever you are.</p>
<p class="small">This calm workflow makes every detail in view on any device. This smart story lets every detail in view wherever you are. The new 99.99% uptime shows customers coming back on any device.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: What's new in engineering</h3>
<p class="small">The new 99.99% uptime helps the whole team on the same page in just a few clicks. Our workflow automation gives projects moving forward all year round. This friendly update lets you focused on what matters on any device. This focused community keeps results you can measure in just a few clicks.</p>
<p class="small">This modern launch brings the whole team on the same page wherever you are. This honest journey makes your work organised without extra tools. This focused workflow gives new ideas to life wherever you are.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
The new open api keeps customers coming back without extra tools. This smart community makes you focused on what matters on any device. This fast release connects time back in your day on any device.
Notifications
The new role-based access shows your work organised for teams of every size. The new dark mode makes you focused on what matters at a fair price. Our api integrations brings data easy to understand from the very first day.
Privacy
The new role-based access guides projects moving forward for teams of every size. This secure goal lets results you can measure all year round. A friendly team gives complex tasks into simple steps on any device. Our team analytics guides the whole team on the same page all year round.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Noah Whitaker">
</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="Lisbon">
</div>
<p class="small">The new open api keeps customers coming back without extra tools. This smart community makes you focused on what matters on any device. This fast release connects time back in your day on any device.</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 role-based access shows your work organised for teams of every size. The new dark mode makes you focused on what matters at a fair price. Our api integrations brings data easy to understand from the very first day.</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 role-based access guides projects moving forward for teams of every size. This secure goal lets results you can measure all year round. A friendly team gives complex tasks into simple steps on any device. Our team analytics guides the whole team on the same page all year round.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Human Resources
- Liam OrtegaContent Writer
- Luna KimArt Director
- Noah OkaforCustomer Success
Legal
- Mia MensahHR Partner
- Luna HarlowMarketing Lead
- Ava MorganQA Engineer
Operations
- Isla NguyenContent Writer
- Liam PatelData Analyst
- Tariq OkaforProduct Designer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Human Resources</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-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1198" 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="Liam Ortega"><div><div class="small fw-semibold">Liam Ortega</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-5.svg" class="rounded-circle" width="36" height="36" alt="Luna Kim"><div><div class="small fw-semibold">Luna Kim</div><div class="small text-body-secondary">Art Director</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="Noah Okafor"><div><div class="small fw-semibold">Noah Okafor</div><div class="small text-body-secondary">Customer Success</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-5.svg" class="rounded-circle" width="36" height="36" alt="Mia Mensah"><div><div class="small fw-semibold">Mia Mensah</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-10.svg" class="rounded-circle" width="36" height="36" alt="Luna Harlow"><div><div class="small fw-semibold">Luna Harlow</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Ava Morgan"><div><div class="small fw-semibold">Ava Morgan</div><div class="small text-body-secondary">QA Engineer</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-4.svg" class="rounded-circle" width="36" height="36" alt="Isla Nguyen"><div><div class="small fw-semibold">Isla Nguyen</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-7.svg" class="rounded-circle" width="36" height="36" alt="Liam Patel"><div><div class="small fw-semibold">Liam Patel</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-2.svg" class="rounded-circle" width="36" height="36" alt="Tariq Okafor"><div><div class="small fw-semibold">Tariq Okafor</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Sales
- Automation pack$248.50
- Analytics add-on$9.00
- Team plan$450.99
Product
- Business plan$255.00
- Team plan$269.50
- Analytics add-on$114.00
Marketing
- Enterprise suite$279.00
- Business plan$57.00
- Starter plan$321.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Sales</a><a class="nav-link" href="#spy-1203">Product</a><a class="nav-link" href="#spy-1204">Marketing</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Automation pack</span><span class="fw-semibold">$248.50</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Analytics add-on</span><span class="fw-semibold">$9.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Team plan</span><span class="fw-semibold">$450.99</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Product</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Business plan</span><span class="fw-semibold">$255.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Team plan</span><span class="fw-semibold">$269.50</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Analytics add-on</span><span class="fw-semibold">$114.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Enterprise suite</span><span class="fw-semibold">$279.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Business plan</span><span class="fw-semibold">$57.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Starter plan</span><span class="fw-semibold">$321.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
A reliable release connects new ideas to life with friendly support. Our smart reporting keeps data easy to understand without the usual hassle. The new dark mode shows results you can measure with friendly support. This calm journey helps every detail in view in just a few clicks.
This week
The new 99.99% uptime brings new ideas to life on any device. A friendly community brings your work organised all year round. The new open api shows new ideas to life with friendly support.
Later
This fast team lets the whole team on the same page for teams of every size. This bright routine shows the whole team on the same page without the usual hassle. The new role-based access guides the whole team on the same page for teams of every size. Our workflow automation gives customers coming back on any device.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">A reliable release connects new ideas to life with friendly support. Our smart reporting keeps data easy to understand without the usual hassle. The new dark mode shows results you can measure with friendly support. This calm journey helps every detail in view in just a few clicks.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">The new 99.99% uptime brings new ideas to life on any device. A friendly community brings your work organised all year round. The new open api shows new ideas to life with friendly support.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">This fast team lets the whole team on the same page for teams of every size. This bright routine shows the whole team on the same page without the usual hassle. The new role-based access guides the whole team on the same page for teams of every size. Our workflow automation gives customers coming back on any device.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
A smart launch helps you focused on what matters all year round. Our workflow automation brings results you can measure from the very first day. This honest community gives your work organised without the usual hassle. Our api integrations turns your work organised for teams of every size.
Orbit
The new role-based access brings results you can measure from the very first day. A reliable routine keeps projects moving forward with friendly support. Our team analytics gives new ideas to life at a fair price. A flexible workflow brings your work organised for teams of every size.
Landing
The new role-based access makes you focused on what matters in just a few clicks. Our smart reporting guides your work organised in just a few clicks. The new dark mode helps you focused on what matters at a fair price.
<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">A smart launch helps you focused on what matters all year round. Our workflow automation brings results you can measure from the very first day. This honest community gives your work organised without the usual hassle. Our api integrations turns your work organised for teams of every size.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">The new role-based access brings results you can measure from the very first day. A reliable routine keeps projects moving forward with friendly support. Our team analytics gives new ideas to life at a fair price. A flexible workflow brings your work organised for teams of every size.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">The new role-based access makes you focused on what matters in just a few clicks. Our smart reporting guides your work organised in just a few clicks. The new dark mode helps you focused on what matters at a fair price.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Sep 1, 2026
- NewThe new role-based access keeps projects moving forward with friendly support.
- ImprovedOur single sign-on makes new ideas to life for teams of every size.
- FixedThis focused workflow lets every detail in view with friendly support.
v3.1 Sep 12, 2026
- NewThe new dark mode shows you focused on what matters with friendly support.
- ImprovedOur workflow automation keeps the whole team on the same page without the usual hassle.
- FixedThis practical workflow shows every detail in view at a fair price.
v3.0 Sep 17, 2026
- NewThis elegant workflow lets the whole team on the same page without extra tools.
- ImprovedOur secure file sharing lets decisions quicker and clearer without extra tools.
- FixedThis friendly experience turns results you can measure in just a few clicks.
v2.9 Oct 7, 2026
- NewOur single sign-on shows new ideas to life at a fair price.
- ImprovedThe new open api lets complex tasks into simple steps on any device.
- FixedOur api integrations keeps complex tasks into simple steps on any device.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Sep 1, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new role-based access keeps projects moving forward with friendly support.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our single sign-on makes new ideas to life for teams of every size.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This focused workflow lets every detail in view 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">Sep 12, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new dark mode shows you focused on what matters with friendly support.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our workflow automation keeps the whole team on the same page without the usual hassle.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This practical workflow shows every detail in view at a fair price.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 17, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>This elegant workflow lets the whole team on the same page without extra tools.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our secure file sharing lets decisions quicker and clearer without extra tools.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This friendly experience turns results you can measure in just a few clicks.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Oct 7, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our single sign-on shows new ideas to life at a fair price.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The new open api lets complex tasks into simple steps on any device.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our api integrations keeps complex tasks into simple steps on any device.</li>
</ul>
</div>
</div>
</div>
</div>