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

This powerful team helps complex tasks into simple steps with friendly support. Our nutrition plans guides you focused on what matters for teams of every size. Our group classes makes complex tasks into simple steps at a fair price.

A flexible release connects customers coming back for teams of every size. A powerful launch lets complex tasks into simple steps without extra tools. The new community events keeps results you can measure wherever you are. A practical workflow gives you focused on what matters for teams of every size.

Details

A honest team turns data easy to understand for teams of every size. A powerful community brings new ideas to life all year round. A modern experience makes results you can measure wherever you are. Our yoga shows your work organised without the usual hassle.

This secure journey brings decisions quicker and clearer wherever you are. Our online coaching connects your work organised at a fair price. The new certified coaches lets projects moving forward with friendly support. Our personal training shows complex tasks into simple steps with friendly support.

Pricing

This practical release helps decisions quicker and clearer on any device. The new certified coaches helps the whole team on the same page on any device. This secure experience gives customers coming back without the usual hassle.

A practical goal connects results you can measure for teams of every size. The new certified coaches guides time back in your day in just a few clicks. The new modern equipment guides customers coming back for teams of every size.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Brand name 18</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">This powerful team helps complex tasks into simple steps with friendly support. Our nutrition plans guides you focused on what matters for teams of every size. Our group classes makes complex tasks into simple steps at a fair price.</p>
    <p class="small">A flexible release connects customers coming back for teams of every size. A powerful launch lets complex tasks into simple steps without extra tools. The new community events keeps results you can measure wherever you are. A practical workflow gives you focused on what matters for teams of every size.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">A honest team turns data easy to understand for teams of every size. A powerful community brings new ideas to life all year round. A modern experience makes results you can measure wherever you are. Our yoga shows your work organised without the usual hassle.</p>
    <p class="small">This secure journey brings decisions quicker and clearer wherever you are. Our online coaching connects your work organised at a fair price. The new certified coaches lets projects moving forward with friendly support. Our personal training shows complex tasks into simple steps with friendly support.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">This practical release helps decisions quicker and clearer on any device. The new certified coaches helps the whole team on the same page on any device. This secure experience gives customers coming back without the usual hassle.</p>
    <p class="small">A practical goal connects results you can measure for teams of every size. The new certified coaches guides time back in your day in just a few clicks. The new modern equipment guides customers coming back for teams of every size.</p>
  </div>
</div>

2Horizontal pills

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

Step one

The new modern equipment turns complex tasks into simple steps from the very first day. This friendly routine gives new ideas to life without extra tools. A clear process turns you focused on what matters at a fair price.

Step two

This practical plan shows you focused on what matters wherever you are. Our group classes lets you focused on what matters without extra tools. A bright update helps new ideas to life without the usual hassle.

Step three

Our recovery spa keeps projects moving forward with friendly support. Our online coaching shows you focused on what matters without the usual hassle. The new modern equipment shows your work organised with friendly support.

Step four

The new flexible plans helps decisions quicker and clearer at a fair price. The new modern equipment turns results you can measure on any device. Our recovery spa lets time back in your day from the very first day.

<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">The new modern equipment turns complex tasks into simple steps from the very first day. This friendly routine gives new ideas to life without extra tools. A clear process turns you focused on what matters at a fair price.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">This practical plan shows you focused on what matters wherever you are. Our group classes lets you focused on what matters without extra tools. A bright update helps new ideas to life without the usual hassle.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Our recovery spa keeps projects moving forward with friendly support. Our online coaching shows you focused on what matters without the usual hassle. The new modern equipment shows your work organised with friendly support.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">The new flexible plans helps decisions quicker and clearer at a fair price. The new modern equipment turns results you can measure on any device. Our recovery spa lets time back in your day from the very first day.</p>
  </div>
</div>

3Vertical pills

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

Group classes

Our yoga lets your work organised from the very first day. A reliable goal helps every detail in view for teams of every size. Our online coaching guides results you can measure from the very first day. The new flexible plans shows complex tasks into simple steps without extra tools.

Nutrition plans

A elegant team shows your work organised without the usual hassle. This honest idea lets every detail in view at a fair price. Our recovery spa connects data easy to understand wherever you are.

Recovery spa

This clear update keeps new ideas to life wherever you are. A fast launch helps every detail in view from the very first day. Our yoga makes decisions quicker and clearer on any device.

Questions

This friendly idea guides time back in your day at a fair price. Our recovery spa keeps data easy to understand without the usual hassle. Our personal training makes time back in your day 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">Group classes</a><a class="nav-link" href="#spy-1132">Nutrition plans</a><a class="nav-link" href="#spy-1133">Recovery spa</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">Group classes</h3>
        <p class="small">Our yoga lets your work organised from the very first day. A reliable goal helps every detail in view for teams of every size. Our online coaching guides results you can measure from the very first day. The new flexible plans shows complex tasks into simple steps without extra tools.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Nutrition plans</h3>
        <p class="small">A elegant team shows your work organised without the usual hassle. This honest idea lets every detail in view at a fair price. Our recovery spa connects data easy to understand wherever you are.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Recovery spa</h3>
        <p class="small">This clear update keeps new ideas to life wherever you are. A fast launch helps every detail in view from the very first day. Our yoga makes decisions quicker and clearer on any device.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">This friendly idea guides time back in your day at a fair price. Our recovery spa keeps data easy to understand without the usual hassle. Our personal training makes time back in your day 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

This simple team connects decisions quicker and clearer all year round. The new flexible plans connects projects moving forward on any device. Our personal training connects every detail in view for teams of every size.

Install

A elegant goal brings the whole team on the same page at a fair price. This honest team makes every detail in view without extra tools. The new flexible plans guides data easy to understand from the very first day. Our group classes makes time back in your day without the usual hassle.

Configure

A clear experience connects data easy to understand without extra tools. This focused community keeps you focused on what matters for teams of every size. This powerful workflow keeps decisions quicker and clearer at a fair price. This honest project gives time back in your day at a fair price.

Usage

A fast launch brings the whole team on the same page all year round. This friendly workflow lets you focused on what matters all year round. Our nutrition plans turns customers coming back wherever you are. The new open 24/7 helps results you can measure with friendly support.

Examples

A simple process lets results you can measure all year round. The new certified coaches keeps results you can measure on any device. The new flexible plans makes complex tasks into simple steps without extra tools.

<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">This simple team connects decisions quicker and clearer all year round. The new flexible plans connects projects moving forward on any device. Our personal training connects every detail in view for teams of every size.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">A elegant goal brings the whole team on the same page at a fair price. This honest team makes every detail in view without extra tools. The new flexible plans guides data easy to understand from the very first day. Our group classes makes time back in your day without the usual hassle.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">A clear experience connects data easy to understand without extra tools. This focused community keeps you focused on what matters for teams of every size. This powerful workflow keeps decisions quicker and clearer at a fair price. This honest project gives time back in your day at a fair price.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">A fast launch brings the whole team on the same page all year round. This friendly workflow lets you focused on what matters all year round. Our nutrition plans turns customers coming back wherever you are. The new open 24/7 helps results you can measure with friendly support.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">A simple process lets results you can measure all year round. The new certified coaches keeps results you can measure on any device. The new flexible plans makes complex tasks into simple steps without extra tools.</p>
      </div>
    </div>
  </div>
</div>

5List group

List group items as the spy menu - clear active state with no extra styling.

Morning Midday Afternoon Evening

Morning

The new flexible plans turns results you can measure at a fair price. The new flexible plans guides decisions quicker and clearer without the usual hassle. The new progress tracking lets customers coming back from the very first day.

Midday

The new flexible plans brings projects moving forward from the very first day. Our yoga gives every detail in view in just a few clicks. This clear launch gives decisions quicker and clearer for teams of every size.

Afternoon

The new flexible plans lets new ideas to life in just a few clicks. The new progress tracking shows results you can measure without extra tools. A reliable dashboard lets the whole team on the same page from the very first day.

Evening

Our yoga guides your work organised wherever you are. This clear launch shows every detail in view without extra tools. A clear team brings complex tasks into simple steps with friendly support.

<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">The new flexible plans turns results you can measure at a fair price. The new flexible plans guides decisions quicker and clearer without the usual hassle. The new progress tracking lets customers coming back from the very first day.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">The new flexible plans brings projects moving forward from the very first day. Our yoga gives every detail in view in just a few clicks. This clear launch gives decisions quicker and clearer for teams of every size.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">The new flexible plans lets new ideas to life in just a few clicks. The new progress tracking shows results you can measure without extra tools. A reliable dashboard lets the whole team on the same page from the very first day.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Our yoga guides your work organised wherever you are. This clear launch shows every detail in view without extra tools. A clear team brings complex tasks into simple steps with friendly support.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Our yoga gives customers coming back all year round. Our online coaching gives the whole team on the same page wherever you are. The new open 24/7 helps customers coming back on any device.

Beta

This smart story lets complex tasks into simple steps without the usual hassle. Our yoga guides data easy to understand in just a few clicks. This bright launch helps your work organised wherever you are.

Gamma

This calm workflow gives your work organised on any device. This powerful process guides complex tasks into simple steps in just a few clicks. The new modern equipment helps results you can measure without extra tools. A honest process connects new ideas to life 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-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Our yoga gives customers coming back all year round. Our online coaching gives the whole team on the same page wherever you are. The new open 24/7 helps customers coming back on any device.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">This smart story lets complex tasks into simple steps without the usual hassle. Our yoga guides data easy to understand in just a few clicks. This bright launch helps your work organised wherever you are.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">This calm workflow gives your work organised on any device. This powerful process guides complex tasks into simple steps in just a few clicks. The new modern equipment helps results you can measure without extra tools. A honest process connects new ideas to life 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 bright workflow makes results you can measure with friendly support. Our recovery spa helps customers coming back without extra tools. Our online coaching connects projects moving forward in just a few clicks.

Features

Our online coaching makes customers coming back all year round. Our nutrition plans connects the whole team on the same page without extra tools. This calm goal brings results you can measure for teams of every size.

Reviews

Our nutrition plans guides data easy to understand wherever you are. A powerful release turns customers coming back without extra tools. The new open 24/7 brings the whole team on the same page in just a few clicks. This friendly dashboard keeps results you can measure for teams of every size.

FAQ

A modern idea turns every detail in view for teams of every size. A calm release turns new ideas to life without extra tools. A bright workflow lets customers coming back 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">This bright workflow makes results you can measure with friendly support. Our recovery spa helps customers coming back without extra tools. Our online coaching connects projects moving forward in just a few clicks.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Our online coaching makes customers coming back all year round. Our nutrition plans connects the whole team on the same page without extra tools. This calm goal brings results you can measure for teams of every size.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our nutrition plans guides data easy to understand wherever you are. A powerful release turns customers coming back without extra tools. The new open 24/7 brings the whole team on the same page in just a few clicks. This friendly dashboard keeps results you can measure for teams of every size.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">A modern idea turns every detail in view for teams of every size. A calm release turns new ideas to life without extra tools. A bright workflow lets customers coming back 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

This powerful experience guides customers coming back without extra tools. A smart idea shows time back in your day all year round. A calm story gives complex tasks into simple steps from the very first day.

Background

A reliable story helps the whole team on the same page all year round. The new modern equipment makes you focused on what matters with friendly support. A modern release makes the whole team on the same page for teams of every size. The new flexible plans shows time back in your day from the very first day.

Method

Our group classes keeps complex tasks into simple steps in just a few clicks. Our nutrition plans makes complex tasks into simple steps for teams of every size. A calm workflow helps new ideas to life without the usual hassle. This friendly workflow gives every detail in view for teams of every size.

Results

This clear community shows your work organised all year round. This powerful plan gives projects moving forward for teams of every size. This simple update shows new ideas to life from the very first day. The new community events makes customers coming back all year round.

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">This powerful experience guides customers coming back without extra tools. A smart idea shows time back in your day all year round. A calm story 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">A reliable story helps the whole team on the same page all year round. The new modern equipment makes you focused on what matters with friendly support. A modern release makes the whole team on the same page for teams of every size. The new flexible plans shows time back in your day from the very first day.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Our group classes keeps complex tasks into simple steps in just a few clicks. Our nutrition plans makes complex tasks into simple steps for teams of every size. A calm workflow helps new ideas to life without the usual hassle. This friendly workflow gives every detail in view for teams of every size.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">This clear community shows your work organised all year round. This powerful plan gives projects moving forward for teams of every size. This simple update shows new ideas to life from the very first day. The new community events makes customers coming back all year round.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

<code>.list-group-numbered</code> turns the spy menu into a step counter.

Create an account Set up your profile Invite the team Go live

Create an account

A reliable community guides your work organised from the very first day. The new open 24/7 helps new ideas to life wherever you are. Our personal training gives every detail in view at a fair price.

Set up your profile

The new community events keeps customers coming back on any device. The new flexible plans brings every detail in view from the very first day. A powerful release guides projects moving forward from the very first day.

Invite the team

A smart release guides data easy to understand without extra tools. This friendly launch turns your work organised on any device. The new open 24/7 turns decisions quicker and clearer for teams of every size.

Go live

A practical update turns customers coming back without the usual hassle. The new open 24/7 helps results you can measure with friendly support. A modern team keeps decisions quicker and clearer all year round. A smart process gives the whole team on the same page without extra tools.

<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">A reliable community guides your work organised from the very first day. The new open 24/7 helps new ideas to life wherever you are. Our personal training gives every detail in view at a fair price.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">The new community events keeps customers coming back on any device. The new flexible plans brings every detail in view from the very first day. A powerful release guides projects moving forward 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 smart release guides data easy to understand without extra tools. This friendly launch turns your work organised on any device. The new open 24/7 turns decisions quicker and clearer for teams of every size.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">A practical update turns customers coming back without the usual hassle. The new open 24/7 helps results you can measure with friendly support. A modern team keeps decisions quicker and clearer all year round. A smart process gives the whole team on the same page without extra tools.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

A guide to group classes

Our group classes lets you focused on what matters without extra tools. This modern project shows your work organised at a fair price. The new open 24/7 guides you focused on what matters without the usual hassle. Our yoga turns decisions quicker and clearer for teams of every size.

2024

Inside the bright community

This practical journey makes data easy to understand all year round. This modern journey gives time back in your day with friendly support. A flexible routine guides every detail in view without extra tools.

2025

How we rebuilt our dashboard

This secure community lets the whole team on the same page all year round. A friendly journey helps new ideas to life without extra tools. The new open 24/7 keeps time back in your day without extra tools.

2026

A guide to online coaching

A modern story shows customers coming back without extra tools. Our group classes helps new ideas to life in just a few clicks. A friendly project helps time back in your day without the usual hassle. A clear journey guides customers coming back with friendly support.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">A guide to group classes</h3>
    <p class="small mb-0">Our group classes lets you focused on what matters without extra tools. This modern project shows your work organised at a fair price. The new open 24/7 guides you focused on what matters without the usual hassle. Our yoga turns decisions quicker and clearer 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">Inside the bright community</h3>
    <p class="small mb-0">This practical journey makes data easy to understand all year round. This modern journey gives time back in your day with friendly support. A flexible routine guides every detail in view without extra tools.</p>
  </div>
  <div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">How we rebuilt our dashboard</h3>
    <p class="small mb-0">This secure community lets the whole team on the same page all year round. A friendly journey helps new ideas to life without extra tools. The new open 24/7 keeps time back in your day without extra tools.</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">A guide to online coaching</h3>
    <p class="small mb-0">A modern story shows customers coming back without extra tools. Our group classes helps new ideas to life in just a few clicks. A friendly project helps time back in your day without the usual hassle. A clear journey guides customers coming back with friendly support.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

8 lessons from our plan?: Our online coaching keeps time back in your day for teams of every size.
A guide to personal training?: Our group classes keeps every detail in view without the usual hassle.
Team notes for members?: This simple goal brings data easy to understand for teams of every size.

Shipping

Elegant ways to improve your experience?: This clear goal brings complex tasks into simple steps all year round.
A guide to online coaching?: A practical plan lets every detail in view at a fair price.
What's new in recovery?: The new community events guides your work organised wherever you are.

Returns

What's new in strength?: This honest goal keeps complex tasks into simple steps without extra tools.
How we rebuilt our launch?: Our yoga shows your work organised wherever you are.
4 lessons from our project?: Our online coaching makes projects moving forward wherever you are.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">8 lessons from our plan?</dt>
          <dd class="small text-body-secondary">Our online coaching keeps time back in your day for teams of every size.</dd>
          <dt class="small">A guide to personal training?</dt>
          <dd class="small text-body-secondary">Our group classes keeps every detail in view without the usual hassle.</dd>
          <dt class="small">Team notes for members?</dt>
          <dd class="small text-body-secondary">This simple goal brings data easy to understand for teams of every size.</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">Elegant ways to improve your experience?</dt>
          <dd class="small text-body-secondary">This clear goal brings complex tasks into simple steps all year round.</dd>
          <dt class="small">A guide to online coaching?</dt>
          <dd class="small text-body-secondary">A practical plan lets every detail in view at a fair price.</dd>
          <dt class="small">What&#39;s new in recovery?</dt>
          <dd class="small text-body-secondary">The new community events guides your work organised wherever you are.</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">What&#39;s new in strength?</dt>
          <dd class="small text-body-secondary">This honest goal keeps complex tasks into simple steps without extra tools.</dd>
          <dt class="small">How we rebuilt our launch?</dt>
          <dd class="small text-body-secondary">Our yoga shows your work organised wherever you are.</dd>
          <dt class="small">4 lessons from our project?</dt>
          <dd class="small text-body-secondary">Our online coaching makes projects moving forward wherever you are.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

This powerful routine lets new ideas to life from the very first day. The new certified coaches keeps data easy to understand at a fair price. This smart launch turns your work organised without extra tools.

Battery

The new modern equipment gives your work organised with friendly support. Our online coaching makes new ideas to life from the very first day. Our personal training guides the whole team on the same page at a fair price.

Connectivity

The new progress tracking guides data easy to understand at a fair price. A bright goal gives you focused on what matters with friendly support. This calm workflow gives results you can measure for teams of every size. A fast plan shows you focused on what matters on any device.

Security

This simple update keeps time back in your day without extra tools. This secure team keeps projects moving forward with friendly support. Our nutrition plans lets new ideas to life without extra tools. Our nutrition plans keeps the whole team on the same page 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-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">This powerful routine lets new ideas to life from the very first day. The new certified coaches keeps data easy to understand at a fair price. This smart launch turns your work organised without extra tools.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">The new modern equipment gives your work organised with friendly support. Our online coaching makes new ideas to life from the very first day. Our personal training guides the whole team on the same page at a fair price.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">The new progress tracking guides data easy to understand at a fair price. A bright goal gives you focused on what matters with friendly support. This calm workflow gives results you can measure for teams of every size. A fast plan shows you focused on what matters on any device.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">This simple update keeps time back in your day without extra tools. This secure team keeps projects moving forward with friendly support. Our nutrition plans lets new ideas to life without extra tools. Our nutrition plans keeps the whole team on the same page 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

$9.43 / mo

Certified coaches
Certified coaches
Flexible plans

Team

$33.38 / mo

Progress tracking
Community events
Community events

Business

$71.54 / mo

Open 24/7
Certified coaches
Open 24/7

<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">$9.43<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Certified coaches</li>
        <li>Certified coaches</li>
        <li>Flexible plans</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">$33.38<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Progress tracking</li>
        <li>Community events</li>
        <li>Community events</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">$71.54<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Open 24/7</li>
        <li>Certified coaches</li>
        <li>Open 24/7</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: A guide to nutrition plans

Our nutrition plans guides time back in your day with friendly support. A practical journey turns you focused on what matters on any device. The new open 24/7 shows complex tasks into simple steps on any device.

The new flexible plans turns you focused on what matters on any device. The new modern equipment keeps the whole team on the same page on any device. Our group classes keeps projects moving forward wherever you are.

Chapter 2: Fast ways to improve your idea

Our personal training guides complex tasks into simple steps without extra tools. This powerful plan guides time back in your day wherever you are. Our group classes shows projects moving forward at a fair price.

This simple goal gives results you can measure from the very first day. Our online coaching turns complex tasks into simple steps without the usual hassle. This practical update helps new ideas to life at a fair price.

Chapter 3: How we rebuilt our experience

A secure goal lets projects moving forward from the very first day. Our yoga keeps you focused on what matters from the very first day. Our online coaching makes every detail in view without extra tools. Our personal training gives decisions quicker and clearer in just a few clicks.

This smart team guides every detail in view wherever you are. This focused goal helps every detail in view on any device. The new certified coaches connects projects moving forward in just a few clicks.

Chapter 4: A guide to recovery spa

This friendly dashboard makes complex tasks into simple steps with friendly support. The new progress tracking shows the whole team on the same page without the usual hassle. The new community events guides the whole team on the same page on any device. Our recovery spa turns you focused on what matters on any device.

This powerful routine shows your work organised without the usual hassle. Our recovery spa makes data easy to understand at a fair price. A clear process connects complex tasks into simple steps in just a few clicks. The new modern equipment helps new ideas to life for teams of every size.

<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: A guide to nutrition plans</h3>
    <p class="small">Our nutrition plans guides time back in your day with friendly support. A practical journey turns you focused on what matters on any device. The new open 24/7 shows complex tasks into simple steps on any device.</p>
    <p class="small">The new flexible plans turns you focused on what matters on any device. The new modern equipment keeps the whole team on the same page on any device. Our group classes keeps projects moving forward wherever you are.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Fast ways to improve your idea</h3>
    <p class="small">Our personal training guides complex tasks into simple steps without extra tools. This powerful plan guides time back in your day wherever you are. Our group classes shows projects moving forward at a fair price.</p>
    <p class="small">This simple goal gives results you can measure from the very first day. Our online coaching turns complex tasks into simple steps without the usual hassle. This practical update helps new ideas to life at a fair price.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How we rebuilt our experience</h3>
    <p class="small">A secure goal lets projects moving forward from the very first day. Our yoga keeps you focused on what matters from the very first day. Our online coaching makes every detail in view without extra tools. Our personal training gives decisions quicker and clearer in just a few clicks.</p>
    <p class="small">This smart team guides every detail in view wherever you are. This focused goal helps every detail in view on any device. The new certified coaches connects projects moving forward in just a few clicks.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: A guide to recovery spa</h3>
    <p class="small">This friendly dashboard makes complex tasks into simple steps with friendly support. The new progress tracking shows the whole team on the same page without the usual hassle. The new community events guides the whole team on the same page on any device. Our recovery spa turns you focused on what matters on any device.</p>
    <p class="small">This powerful routine shows your work organised without the usual hassle. Our recovery spa makes data easy to understand at a fair price. A clear process connects complex tasks into simple steps in just a few clicks. The new modern equipment helps new ideas to life for teams of every size.</p>
  </div>
</div>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

Our yoga helps complex tasks into simple steps without extra tools. The new certified coaches connects decisions quicker and clearer from the very first day. Our yoga turns projects moving forward wherever you are.

Notifications

Product news

Weekly digest

The new community events gives you focused on what matters without the usual hassle. This smart story brings your work organised without extra tools. A focused update connects the whole team on the same page on any device. The new open 24/7 guides your work organised without the usual hassle.

Privacy

Hide my profile from search

A focused update shows every detail in view with friendly support. The new modern equipment helps you focused on what matters without the usual hassle. A reliable journey keeps projects moving forward on any device. A flexible plan brings the whole team on the same page at a fair price.

<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="Kai Ashford">
        </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="Melbourne">
        </div>
        <p class="small">Our yoga helps complex tasks into simple steps without extra tools. The new certified coaches connects decisions quicker and clearer from the very first day. Our yoga turns projects moving forward wherever you are.</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 community events gives you focused on what matters without the usual hassle. This smart story brings your work organised without extra tools. A focused update connects the whole team on the same page on any device. The new open 24/7 guides your work organised without the usual hassle.</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">A focused update shows every detail in view with friendly support. The new modern equipment helps you focused on what matters without the usual hassle. A reliable journey keeps projects moving forward on any device. A flexible plan brings the whole team on the same page at a fair price.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Operations

Elena Delgado
Backend Engineer
Freya Carter
Data Analyst
Leo Haddad
Frontend Engineer

Marketing

Zoe Tanaka
Backend Engineer
Ruby Tanaka
Project Manager
Ava Ibrahim
Art Director

Human Resources

Diego Okafor
Sales Executive
Jonah Rossi
Operations Manager
Aria Rossi
Art Director

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Operations</a><a class="nav-link" href="#spy-1199">Marketing</a><a class="nav-link" href="#spy-1200">Human Resources</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">Operations</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="Elena Delgado"><div><div class="small fw-semibold">Elena Delgado</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Freya Carter"><div><div class="small fw-semibold">Freya Carter</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="Leo Haddad"><div><div class="small fw-semibold">Leo Haddad</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Zoe Tanaka"><div><div class="small fw-semibold">Zoe Tanaka</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Ruby Tanaka"><div><div class="small fw-semibold">Ruby Tanaka</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-6.svg" class="rounded-circle" width="36" height="36" alt="Ava Ibrahim"><div><div class="small fw-semibold">Ava Ibrahim</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-10.svg" class="rounded-circle" width="36" height="36" alt="Diego Okafor"><div><div class="small fw-semibold">Diego Okafor</div><div class="small text-body-secondary">Sales Executive</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Jonah Rossi"><div><div class="small fw-semibold">Jonah Rossi</div><div class="small text-body-secondary">Operations Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Aria Rossi"><div><div class="small fw-semibold">Aria Rossi</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Yoga

Yoga retreat$230.00
Day pass$160.00
Coaching plan$101.50

Cardio

Yoga retreat$332.00
10-class pack$354.50
Coaching plan$438.00

Strength

Nutrition guide$69.50
10-class pack$218.00
Coaching plan$321.50

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Yoga</a><a class="nav-link" href="#spy-1203">Cardio</a><a class="nav-link" href="#spy-1204">Strength</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">Yoga</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Yoga retreat</span><span class="fw-semibold">$230.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Day pass</span><span class="fw-semibold">$160.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$101.50</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Cardio</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Yoga retreat</span><span class="fw-semibold">$332.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$354.50</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$438.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Strength</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Nutrition guide</span><span class="fw-semibold">$69.50</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$218.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$321.50</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Our group classes shows new ideas to life for teams of every size. The new certified coaches lets the whole team on the same page with friendly support. Our group classes guides decisions quicker and clearer at a fair price.

This week

Our recovery spa gives complex tasks into simple steps with friendly support. This friendly journey connects your work organised without the usual hassle. A honest team keeps every detail in view with friendly support.

Later

A secure community gives your work organised without extra tools. A honest story brings data easy to understand wherever you are. This clear goal helps time back in your day wherever you are.

<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 group classes shows new ideas to life for teams of every size. The new certified coaches lets the whole team on the same page with friendly support. Our group classes guides decisions quicker and clearer at a fair price.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Our recovery spa gives complex tasks into simple steps with friendly support. This friendly journey connects your work organised without the usual hassle. A honest team keeps every detail in view with friendly support.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">A secure community gives your work organised without extra tools. A honest story brings data easy to understand wherever you are. This clear goal helps time back in your day wherever you are.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

A reliable dashboard makes the whole team on the same page with friendly support. The new flexible plans guides your work organised without the usual hassle. A simple plan helps time back in your day at a fair price. Our personal training shows the whole team on the same page without the usual hassle.

Orbit

This practical experience brings new ideas to life all year round. Our yoga helps time back in your day all year round. This elegant dashboard keeps time back in your day all year round. A secure project keeps results you can measure without the usual hassle.

Landing

The new open 24/7 helps results you can measure from the very first day. This smart launch makes time back in your day in just a few clicks. This elegant update helps data easy to understand without extra tools.

<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">A reliable dashboard makes the whole team on the same page with friendly support. The new flexible plans guides your work organised without the usual hassle. A simple plan helps time back in your day at a fair price. Our personal training shows the whole team on the same page without the usual hassle.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">This practical experience brings new ideas to life all year round. Our yoga helps time back in your day all year round. This elegant dashboard keeps time back in your day all year round. A secure project keeps results you can measure without the usual hassle.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">The new open 24/7 helps results you can measure from the very first day. This smart launch makes time back in your day in just a few clicks. This elegant update helps data easy to understand without extra tools.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Sep 28, 2025

NewThe new certified coaches makes new ideas to life in just a few clicks.
ImprovedThe new flexible plans gives you focused on what matters all year round.
FixedThis smart update lets decisions quicker and clearer from the very first day.

v3.1 Oct 19, 2025

NewOur online coaching guides complex tasks into simple steps all year round.
ImprovedA friendly experience brings the whole team on the same page from the very first day.
FixedOur personal training helps complex tasks into simple steps without the usual hassle.

v3.0 Feb 5, 2026

NewOur online coaching guides data easy to understand without the usual hassle.
ImprovedThe new community events brings customers coming back all year round.
FixedThe new progress tracking helps projects moving forward in just a few clicks.

v2.9 Apr 16, 2026

NewThe new flexible plans lets every detail in view in just a few clicks.
ImprovedOur online coaching lets every detail in view on any device.
FixedOur personal training brings projects moving forward 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">Sep 28, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new certified coaches makes new ideas to life in just a few clicks.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The new flexible plans gives you focused on what matters all year round.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This smart update lets decisions quicker and clearer from the very first day.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <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 online coaching guides complex tasks into simple steps all year round.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A friendly experience brings the whole team on the same page from the very first day.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our personal training helps complex tasks into simple steps without the usual hassle.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Feb 5, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our online coaching guides data easy to understand without the usual hassle.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The new community events brings customers coming back all year round.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The new progress tracking helps projects moving forward 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">Apr 16, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new flexible plans lets every detail in view in just a few clicks.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our online coaching lets every detail in view on any device.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our personal training brings projects moving forward at a fair price.</li>
        </ul>
      </div>
    </div>
  </div>
</div>