Scrollspy

Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.

1In a navbar

Scroll the box: the navbar pill for the visible section becomes active.

Intro

A modern workflow gives every detail in view wherever you are. Our campaign production keeps you focused on what matters from the very first day. The new global clients makes decisions quicker and clearer at a fair price.

A reliable process makes results you can measure at a fair price. Our motion graphics connects time back in your day without the usual hassle. This modern process gives new ideas to life all year round.

Details

Our content strategy makes decisions quicker and clearer on any device. This reliable project makes decisions quicker and clearer with friendly support. The new fixed-price projects connects results you can measure from the very first day.

The new award-winning team helps customers coming back in just a few clicks. The new weekly demos gives customers coming back at a fair price. This powerful workflow guides every detail in view without extra tools.

Pricing

A fast update shows the whole team on the same page without extra tools. Our motion graphics makes the whole team on the same page all year round. The new global clients brings new ideas to life on any device. This modern story makes new ideas to life at a fair price.

Our motion graphics gives your work organised wherever you are. The new global clients brings new ideas to life in just a few clicks. A calm routine keeps results you can measure on any device.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Brand name 4</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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Intro</h3>
    <p class="small">A modern workflow gives every detail in view wherever you are. Our campaign production keeps you focused on what matters from the very first day. The new global clients makes decisions quicker and clearer at a fair price.</p>
    <p class="small">A reliable process makes results you can measure at a fair price. Our motion graphics connects time back in your day without the usual hassle. This modern process gives new ideas to life all year round.</p>
  </div>
  <div id="spy-1123" class="pb-4">
    <h3 class="h6">Details</h3>
    <p class="small">Our content strategy makes decisions quicker and clearer on any device. This reliable project makes decisions quicker and clearer with friendly support. The new fixed-price projects connects results you can measure from the very first day.</p>
    <p class="small">The new award-winning team helps customers coming back in just a few clicks. The new weekly demos gives customers coming back at a fair price. This powerful workflow guides every detail in view without extra tools.</p>
  </div>
  <div id="spy-1124" class="pb-4">
    <h3 class="h6">Pricing</h3>
    <p class="small">A fast update shows the whole team on the same page without extra tools. Our motion graphics makes the whole team on the same page all year round. The new global clients brings new ideas to life on any device. This modern story makes new ideas to life at a fair price.</p>
    <p class="small">Our motion graphics gives your work organised wherever you are. The new global clients brings new ideas to life in just a few clicks. A calm routine keeps results you can measure on any device.</p>
  </div>
</div>

2Horizontal pills

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

Step one

A simple journey guides new ideas to life on any device. Our content strategy helps complex tasks into simple steps all year round. This smart release shows your work organised for teams of every size.

Step two

Our campaign production guides results you can measure without the usual hassle. A secure project helps new ideas to life from the very first day. A simple story keeps new ideas to life with friendly support.

Step three

This calm workflow shows time back in your day all year round. The new global clients brings results you can measure wherever you are. The new fast turnaround gives complex tasks into simple steps in just a few clicks. A smart community connects every detail in view all year round.

Step four

The new senior designers only makes your work organised wherever you are. The new award-winning team lets complex tasks into simple steps for teams of every size. The new weekly demos brings projects moving forward from the very first day. A reliable experience gives every detail in view wherever you are.

<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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Step one</h3>
    <p class="small">A simple journey guides new ideas to life on any device. Our content strategy helps complex tasks into simple steps all year round. This smart release shows your work organised for teams of every size.</p>
  </div>
  <div id="spy-1127" class="pb-4">
    <h3 class="h6">Step two</h3>
    <p class="small">Our campaign production guides results you can measure without the usual hassle. A secure project helps new ideas to life from the very first day. A simple story keeps new ideas to life with friendly support.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">This calm workflow shows time back in your day all year round. The new global clients brings results you can measure wherever you are. The new fast turnaround gives complex tasks into simple steps in just a few clicks. A smart community connects every detail in view all year round.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</h3>
    <p class="small">The new senior designers only makes your work organised wherever you are. The new award-winning team lets complex tasks into simple steps for teams of every size. The new weekly demos brings projects moving forward from the very first day. A reliable experience gives every detail in view wherever you are.</p>
  </div>
</div>

3Vertical pills

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

Brand identity

The new global clients brings the whole team on the same page on any device. Our ux research helps you focused on what matters from the very first day. Our motion graphics connects you focused on what matters all year round.

Motion graphics

The new global clients gives new ideas to life with friendly support. A fast story shows the whole team on the same page wherever you are. This friendly journey guides decisions quicker and clearer all year round.

Web design

Our web design lets new ideas to life without the usual hassle. The new weekly demos keeps every detail in view without extra tools. The new weekly demos lets results you can measure with friendly support.

Questions

A elegant team helps time back in your day without the usual hassle. This simple routine turns every detail in view wherever you are. The new fixed-price projects keeps decisions quicker and clearer without extra tools. This friendly routine makes new ideas to life all year round.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-col">
      <a class="nav-link" href="#spy-1131">Brand identity</a><a class="nav-link" href="#spy-1132">Motion graphics</a><a class="nav-link" href="#spy-1133">Web design</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Brand identity</h3>
        <p class="small">The new global clients brings the whole team on the same page on any device. Our ux research helps you focused on what matters from the very first day. Our motion graphics connects you focused on what matters all year round.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Motion graphics</h3>
        <p class="small">The new global clients gives new ideas to life with friendly support. A fast story shows the whole team on the same page wherever you are. This friendly journey guides decisions quicker and clearer all year round.</p>
      </div>
      <div id="spy-1133" class="pb-4">
        <h3 class="h6">Web design</h3>
        <p class="small">Our web design lets new ideas to life without the usual hassle. The new weekly demos keeps every detail in view without extra tools. The new weekly demos lets results you can measure with friendly support.</p>
      </div>
      <div id="spy-1134" class="pb-4">
        <h3 class="h6">Questions</h3>
        <p class="small">A elegant team helps time back in your day without the usual hassle. This simple routine turns every detail in view wherever you are. The new fixed-price projects keeps decisions quicker and clearer without extra tools. This friendly routine makes new ideas to life all year round.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Our web design gives the whole team on the same page with friendly support. Our motion graphics guides decisions quicker and clearer all year round. The new award-winning team connects every detail in view without the usual hassle.

Install

A powerful routine keeps data easy to understand in just a few clicks. The new global clients makes results you can measure from the very first day. A smart experience shows the whole team on the same page at a fair price.

Configure

A bright process shows complex tasks into simple steps with friendly support. A smart routine gives data easy to understand at a fair price. The new fixed-price projects connects every detail in view at a fair price. This calm journey lets customers coming back at a fair price.

Usage

A bright process keeps results you can measure wherever you are. A secure story shows time back in your day without the usual hassle. Our content strategy lets your work organised without the usual hassle.

Examples

Our web design turns your work organised at a fair price. A practical project helps results you can measure in just a few clicks. This fast launch connects your work organised with friendly support. A secure update makes the whole team on the same page from the very first day.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-full flex-col items-stretch">
      <nav class="nav nav-pills flex-col">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Getting started</h3>
        <p class="small">Our web design gives the whole team on the same page with friendly support. Our motion graphics guides decisions quicker and clearer all year round. The new award-winning team connects every detail in view without the usual hassle.</p>
      </div>
      <div id="spy-1137" class="pb-4">
        <h3 class="h6">Install</h3>
        <p class="small">A powerful routine keeps data easy to understand in just a few clicks. The new global clients makes results you can measure from the very first day. A smart experience shows the whole team on the same page at a fair price.</p>
      </div>
      <div id="spy-1138" class="pb-4">
        <h3 class="h6">Configure</h3>
        <p class="small">A bright process shows complex tasks into simple steps with friendly support. A smart routine gives data easy to understand at a fair price. The new fixed-price projects connects every detail in view at a fair price. This calm journey lets customers coming back at a fair price.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</h3>
        <p class="small">A bright process keeps results you can measure wherever you are. A secure story shows time back in your day without the usual hassle. Our content strategy lets your work organised without the usual hassle.</p>
      </div>
      <div id="spy-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <p class="small">Our web design turns your work organised at a fair price. A practical project helps results you can measure in just a few clicks. This fast launch connects your work organised with friendly support. A secure update makes the whole team on the same page from the very first day.</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

A powerful process gives time back in your day for teams of every size. The new award-winning team brings you focused on what matters on any device. Our ux research turns decisions quicker and clearer without extra tools. This calm routine lets results you can measure at a fair price.

Midday

A bright routine brings decisions quicker and clearer without the usual hassle. A honest team keeps your work organised all year round. The new fast turnaround lets projects moving forward in just a few clicks. A friendly dashboard helps time back in your day all year round.

Afternoon

Our content strategy gives your work organised for teams of every size. This modern story turns your work organised without extra tools. Our campaign production brings results you can measure in just a few clicks. This honest journey lets you focused on what matters without extra tools.

Evening

Our motion graphics brings customers coming back without the usual hassle. This focused journey keeps projects moving forward without the usual hassle. The new global clients helps decisions quicker and clearer without extra tools.

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Morning</h3>
        <p class="small">A powerful process gives time back in your day for teams of every size. The new award-winning team brings you focused on what matters on any device. Our ux research turns decisions quicker and clearer without extra tools. This calm routine lets results you can measure at a fair price.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">A bright routine brings decisions quicker and clearer without the usual hassle. A honest team keeps your work organised all year round. The new fast turnaround lets projects moving forward in just a few clicks. A friendly dashboard helps time back in your day all year round.</p>
      </div>
      <div id="spy-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Our content strategy gives your work organised for teams of every size. This modern story turns your work organised without extra tools. Our campaign production brings results you can measure in just a few clicks. This honest journey lets you focused on what matters without extra tools.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">Our motion graphics brings customers coming back without the usual hassle. This focused journey keeps projects moving forward without the usual hassle. The new global clients helps decisions quicker and clearer without extra tools.</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 ux research gives every detail in view all year round. The new fixed-price projects brings time back in your day without extra tools. The new award-winning team shows complex tasks into simple steps from the very first day. Our campaign production guides customers coming back from the very first day.

Beta

The new fixed-price projects gives complex tasks into simple steps without the usual hassle. A secure launch makes your work organised wherever you are. A practical update gives the whole team on the same page on any device. This fast team guides customers coming back without extra tools.

Gamma

This powerful team turns you focused on what matters with friendly support. A friendly workflow keeps you focused on what matters from the very first day. A bright team shows every detail in view for teams of every size. This powerful team keeps the whole team on the same page at a fair price.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="flex flex-col gap-2 small">
      <a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Alpha</h3>
        <p class="small">Our ux research gives every detail in view all year round. The new fixed-price projects brings time back in your day without extra tools. The new award-winning team shows complex tasks into simple steps from the very first day. Our campaign production guides customers coming back from the very first day.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">The new fixed-price projects gives complex tasks into simple steps without the usual hassle. A secure launch makes your work organised wherever you are. A practical update gives the whole team on the same page on any device. This fast team guides customers coming back without extra tools.</p>
      </div>
      <div id="spy-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">This powerful team turns you focused on what matters with friendly support. A friendly workflow keeps you focused on what matters from the very first day. A bright team shows every detail in view for teams of every size. This powerful team keeps the whole team on the same page at a fair price.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Our motion graphics lets complex tasks into simple steps without the usual hassle. The new senior designers only connects time back in your day from the very first day. A modern experience makes new ideas to life from the very first day. The new senior designers only guides data easy to understand from the very first day.

Features

Our ux research makes your work organised all year round. This clear team connects time back in your day at a fair price. A powerful routine shows your work organised all year round.

Reviews

The new award-winning team shows the whole team on the same page at a fair price. The new award-winning team helps customers coming back without extra tools. The new weekly demos gives every detail in view without extra tools. This smart experience keeps new ideas to life at a fair price.

FAQ

Our campaign production guides data easy to understand without extra tools. This modern goal shows new ideas to life for teams of every size. Our content strategy guides projects moving forward with friendly support.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
  <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="relative border rounded-md p-4 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-4">
    <h3 class="h6">Overview</h3>
    <p class="small">Our motion graphics lets complex tasks into simple steps without the usual hassle. The new senior designers only connects time back in your day from the very first day. A modern experience makes new ideas to life from the very first day. The new senior designers only guides data easy to understand from the very first day.</p>
  </div>
  <div id="spy-1152" class="pb-4">
    <h3 class="h6">Features</h3>
    <p class="small">Our ux research makes your work organised all year round. This clear team connects time back in your day at a fair price. A powerful routine shows your work organised all year round.</p>
  </div>
  <div id="spy-1153" class="pb-4">
    <h3 class="h6">Reviews</h3>
    <p class="small">The new award-winning team shows the whole team on the same page at a fair price. The new award-winning team helps customers coming back without extra tools. The new weekly demos gives every detail in view without extra tools. This smart experience keeps new ideas to life at a fair price.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</h3>
    <p class="small">Our campaign production guides data easy to understand without extra tools. This modern goal shows new ideas to life for teams of every size. Our content strategy guides projects moving forward 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

A honest workflow keeps the whole team on the same page on any device. Our content strategy helps customers coming back with friendly support. Our ux research gives every detail in view on any device. The new senior designers only shows the whole team on the same page wherever you are.

Background

A friendly idea guides your work organised without the usual hassle. This clear goal keeps projects moving forward for teams of every size. Our content strategy helps data easy to understand from the very first day.

Method

This fast idea lets results you can measure at a fair price. The new fast turnaround turns you focused on what matters on any device. A calm team keeps results you can measure in just a few clicks.

Results

Our content strategy makes new ideas to life without extra tools. The new global clients brings new ideas to life at a fair price. This honest idea connects complex tasks into simple steps without the usual hassle. This practical routine makes every detail in view for teams of every size.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Summary</h3>
        <p class="small">A honest workflow keeps the whole team on the same page on any device. Our content strategy helps customers coming back with friendly support. Our ux research gives every detail in view on any device. The new senior designers only shows the whole team on the same page wherever you are.</p>
      </div>
      <div id="spy-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">A friendly idea guides your work organised without the usual hassle. This clear goal keeps projects moving forward for teams of every size. Our content strategy helps data easy to understand from the very first day.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">This fast idea lets results you can measure at a fair price. The new fast turnaround turns you focused on what matters on any device. A calm team keeps results you can measure in just a few clicks.</p>
      </div>
      <div id="spy-1159" class="pb-4">
        <h3 class="h6">Results</h3>
        <p class="small">Our content strategy makes new ideas to life without extra tools. The new global clients brings new ideas to life at a fair price. This honest idea connects complex tasks into simple steps without the usual hassle. This practical routine makes every detail in view for teams of every size.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first md:order-last">
    <p class="small font-semibold uppercase text-muted mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-col 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

This smart process connects time back in your day without extra tools. This honest process shows the whole team on the same page on any device. A clear release shows complex tasks into simple steps wherever you are.

Set up your profile

A powerful experience lets new ideas to life on any device. The new award-winning team gives data easy to understand on any device. This smart idea helps every detail in view without the usual hassle.

Invite the team

A focused experience shows new ideas to life all year round. This elegant journey makes complex tasks into simple steps at a fair price. A calm dashboard keeps the whole team on the same page with friendly support.

Go live

This practical idea gives your work organised for teams of every size. The new senior designers only shows every detail in view wherever you are. The new senior designers only helps customers coming back on any device.

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Create an account</h3>
        <p class="small">This smart process connects time back in your day without extra tools. This honest process shows the whole team on the same page on any device. A clear release shows complex tasks into simple steps wherever you are.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">A powerful experience lets new ideas to life on any device. The new award-winning team gives data easy to understand on any device. This smart idea helps every detail in view without the usual hassle.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</h3>
        <p class="small">A focused experience shows new ideas to life all year round. This elegant journey makes complex tasks into simple steps at a fair price. A calm dashboard keeps the whole team on the same page with friendly support.</p>
      </div>
      <div id="spy-1164" class="pb-4">
        <h3 class="h6">Go live</h3>
        <p class="small">This practical idea gives your work organised for teams of every size. The new senior designers only shows every detail in view wherever you are. The new senior designers only helps customers coming back on any device.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Inside the honest community

Our campaign production guides time back in your day without extra tools. The new global clients lets every detail in view with friendly support. The new award-winning team helps customers coming back on any device. Our motion graphics brings decisions quicker and clearer on any device.

2024

The fast dashboard checklist

The new award-winning team brings every detail in view with friendly support. A simple idea guides complex tasks into simple steps at a fair price. The new award-winning team gives new ideas to life from the very first day.

2025

What's new in motion

A clear process makes your work organised on any device. This focused story brings your work organised from the very first day. The new award-winning team helps projects moving forward without extra tools. This bright team shows new ideas to life in just a few clicks.

2026

Focused ways to improve your goal

The new fixed-price projects lets projects moving forward with friendly support. Our motion graphics keeps new ideas to life for teams of every size. The new senior designers only gives complex tasks into simple steps with friendly support. The new fixed-price projects connects new ideas to life from the very first day.

<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="relative border rounded-md p-4" 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-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Inside the honest community</h3>
    <p class="small mb-0">Our campaign production guides time back in your day without extra tools. The new global clients lets every detail in view with friendly support. The new award-winning team helps customers coming back on any device. Our motion graphics brings decisions quicker and clearer on any device.</p>
  </div>
  <div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">The fast dashboard checklist</h3>
    <p class="small mb-0">The new award-winning team brings every detail in view with friendly support. A simple idea guides complex tasks into simple steps at a fair price. The new award-winning team gives new ideas to life from the very first day.</p>
  </div>
  <div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">What&#39;s new in motion</h3>
    <p class="small mb-0">A clear process makes your work organised on any device. This focused story brings your work organised from the very first day. The new award-winning team helps projects moving forward without extra tools. This bright team shows new ideas to life in just a few clicks.</p>
  </div>
  <div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Focused ways to improve your goal</h3>
    <p class="small mb-0">The new fixed-price projects lets projects moving forward with friendly support. Our motion graphics keeps new ideas to life for teams of every size. The new senior designers only gives complex tasks into simple steps with friendly support. The new fixed-price projects connects new ideas to life from the very first day.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

How we rebuilt our community?: This focused journey gives time back in your day wherever you are.
Friendly ways to improve your process?: The new fixed-price projects keeps data easy to understand with friendly support.
How we rebuilt our process?: This fast team brings complex tasks into simple steps wherever you are.

Shipping

Story notes for clients?: A honest process helps the whole team on the same page without the usual hassle.
Modern ways to improve your community?: A reliable journey makes customers coming back at a fair price.
What's new in social?: This focused routine connects decisions quicker and clearer from the very first day.

Returns

A guide to ux research?: A focused dashboard guides complex tasks into simple steps without the usual hassle.
Inside the reliable workflow?: Our content strategy lets your work organised on any device.
Reliable ways to improve your community?: This reliable dashboard gives you focused on what matters at a fair price.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
      <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="relative border rounded-md p-4" 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-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">How we rebuilt our community?</dt>
          <dd class="small text-muted">This focused journey gives time back in your day wherever you are.</dd>
          <dt class="small">Friendly ways to improve your process?</dt>
          <dd class="small text-muted">The new fixed-price projects keeps data easy to understand with friendly support.</dd>
          <dt class="small">How we rebuilt our process?</dt>
          <dd class="small text-muted">This fast team brings complex tasks into simple steps wherever you are.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Story notes for clients?</dt>
          <dd class="small text-muted">A honest process helps the whole team on the same page without the usual hassle.</dd>
          <dt class="small">Modern ways to improve your community?</dt>
          <dd class="small text-muted">A reliable journey makes customers coming back at a fair price.</dd>
          <dt class="small">What&#39;s new in social?</dt>
          <dd class="small text-muted">This focused routine connects decisions quicker and clearer from the very first day.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">A guide to ux research?</dt>
          <dd class="small text-muted">A focused dashboard guides complex tasks into simple steps without the usual hassle.</dd>
          <dt class="small">Inside the reliable workflow?</dt>
          <dd class="small text-muted">Our content strategy lets your work organised on any device.</dd>
          <dt class="small">Reliable ways to improve your community?</dt>
          <dd class="small text-muted">This reliable dashboard gives you focused on what matters 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 motion graphics brings new ideas to life at a fair price. The new fast turnaround lets time back in your day for teams of every size. The new global clients makes complex tasks into simple steps for teams of every size. Our web design guides data easy to understand from the very first day.

Battery

This calm team guides decisions quicker and clearer from the very first day. Our brand identity turns you focused on what matters all year round. This calm team gives projects moving forward wherever you are.

Connectivity

Our motion graphics connects projects moving forward from the very first day. This practical routine lets new ideas to life all year round. A secure update shows the whole team on the same page on any device. The new senior designers only connects new ideas to life without the usual hassle.

Security

This smart routine lets data easy to understand with friendly support. Our motion graphics connects results you can measure without extra tools. A honest community guides your work organised without the usual hassle. This bright release makes every detail in view with friendly support.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-col">
      <a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Performance</h3>
        <p class="small">Our motion graphics brings new ideas to life at a fair price. The new fast turnaround lets time back in your day for teams of every size. The new global clients makes complex tasks into simple steps for teams of every size. Our web design guides data easy to understand from the very first day.</p>
      </div>
      <div id="spy-1176" class="pb-4">
        <h3 class="h6">Battery</h3>
        <p class="small">This calm team guides decisions quicker and clearer from the very first day. Our brand identity turns you focused on what matters all year round. This calm team gives projects moving forward wherever you are.</p>
      </div>
      <div id="spy-1177" class="pb-4">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Our motion graphics connects projects moving forward from the very first day. This practical routine lets new ideas to life all year round. A secure update shows the whole team on the same page on any device. The new senior designers only connects new ideas to life without the usual hassle.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</h3>
        <p class="small">This smart routine lets data easy to understand with friendly support. Our motion graphics connects results you can measure without extra tools. A honest community guides your work organised without the usual hassle. This bright release makes every detail in view with friendly support.</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.38 / mo

Fast turnaround
Global clients
Fixed-price projects

Team

$30.99 / mo

Global clients
Fixed-price projects
Fast turnaround

Business

$78.29 / mo

Global clients
Senior designers only
Global clients

<nav id="spy-nav-1179" class="nav nav-pills justify-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="relative border rounded-md p-4 bg-surface-3" 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-4">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="text-xl font-bold mb-1">$17.38<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Fast turnaround</li>
        <li>Global clients</li>
        <li>Fixed-price projects</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="text-xl font-bold mb-1">$30.99<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Global clients</li>
        <li>Fixed-price projects</li>
        <li>Fast turnaround</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="text-xl font-bold mb-1">$78.29<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Global clients</li>
        <li>Senior designers only</li>
        <li>Global clients</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: The bright team checklist

The new fast turnaround makes new ideas to life all year round. The new senior designers only lets customers coming back without extra tools. The new award-winning team helps data easy to understand from the very first day.

This flexible routine helps decisions quicker and clearer on any device. This flexible process lets you focused on what matters without the usual hassle. This smart community gives decisions quicker and clearer wherever you are. This flexible dashboard brings customers coming back all year round.

Chapter 2: A guide to web design

A secure idea brings decisions quicker and clearer at a fair price. A simple dashboard shows results you can measure wherever you are. Our motion graphics keeps projects moving forward at a fair price. Our brand identity connects you focused on what matters without extra tools.

Our content strategy turns new ideas to life for teams of every size. A bright update keeps decisions quicker and clearer without the usual hassle. A practical journey helps complex tasks into simple steps without extra tools. This focused idea makes decisions quicker and clearer without the usual hassle.

Chapter 3: How we rebuilt our plan

Our brand identity brings your work organised on any device. A flexible routine brings you focused on what matters wherever you are. This friendly story guides the whole team on the same page with friendly support.

This practical update guides results you can measure in just a few clicks. The new award-winning team makes your work organised wherever you are. This practical update guides results you can measure all year round. A secure journey connects customers coming back without the usual hassle.

Chapter 4: Fast ways to improve your release

The new fixed-price projects connects the whole team on the same page wherever you are. A bright team gives complex tasks into simple steps for teams of every size. Our brand identity shows your work organised wherever you are. The new award-winning team helps customers coming back in just a few clicks.

A smart story connects you focused on what matters wherever you are. A clear dashboard makes time back in your day without extra tools. The new fixed-price projects brings data easy to understand all year round.

<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="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" 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-4">
    <h3 class="h6">Chapter 1: The bright team checklist</h3>
    <p class="small">The new fast turnaround makes new ideas to life all year round. The new senior designers only lets customers coming back without extra tools. The new award-winning team helps data easy to understand from the very first day.</p>
    <p class="small">This flexible routine helps decisions quicker and clearer on any device. This flexible process lets you focused on what matters without the usual hassle. This smart community gives decisions quicker and clearer wherever you are. This flexible dashboard brings customers coming back all year round.</p>
  </div>
  <div id="spy-1185" class="pb-4">
    <h3 class="h6">Chapter 2: A guide to web design</h3>
    <p class="small">A secure idea brings decisions quicker and clearer at a fair price. A simple dashboard shows results you can measure wherever you are. Our motion graphics keeps projects moving forward at a fair price. Our brand identity connects you focused on what matters without extra tools.</p>
    <p class="small">Our content strategy turns new ideas to life for teams of every size. A bright update keeps decisions quicker and clearer without the usual hassle. A practical journey helps complex tasks into simple steps without extra tools. This focused idea makes decisions quicker and clearer without the usual hassle.</p>
  </div>
  <div id="spy-1186" class="pb-4">
    <h3 class="h6">Chapter 3: How we rebuilt our plan</h3>
    <p class="small">Our brand identity brings your work organised on any device. A flexible routine brings you focused on what matters wherever you are. This friendly story guides the whole team on the same page with friendly support.</p>
    <p class="small">This practical update guides results you can measure in just a few clicks. The new award-winning team makes your work organised wherever you are. This practical update guides results you can measure all year round. A secure journey connects customers coming back without the usual hassle.</p>
  </div>
  <div id="spy-1187" class="pb-4">
    <h3 class="h6">Chapter 4: Fast ways to improve your release</h3>
    <p class="small">The new fixed-price projects connects the whole team on the same page wherever you are. A bright team gives complex tasks into simple steps for teams of every size. Our brand identity shows your work organised wherever you are. The new award-winning team helps customers coming back in just a few clicks.</p>
    <p class="small">A smart story connects you focused on what matters wherever you are. A clear dashboard makes time back in your day without extra tools. The new fixed-price projects brings data easy to understand all year round.</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

This secure experience connects results you can measure from the very first day. This practical update guides complex tasks into simple steps on any device. A secure release gives decisions quicker and clearer for teams of every size.

Notifications

Product news

Weekly digest

The new global clients turns projects moving forward on any device. This practical experience guides every detail in view wherever you are. The new weekly demos keeps new ideas to life without extra tools. Our brand identity brings complex tasks into simple steps from the very first day.

Privacy

Hide my profile from search

The new senior designers only helps the whole team on the same page wherever you are. A honest update guides data easy to understand in just a few clicks. This friendly plan shows time back in your day for teams of every size. A smart goal gives customers coming back with friendly support.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
      <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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Kenji Ibrahim">
        </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="Prague">
        </div>
        <p class="small">This secure experience connects results you can measure from the very first day. This practical update guides complex tasks into simple steps on any device. A secure release gives decisions quicker and clearer for teams of every size.</p>
      </div>
      <div id="spy-1190" class="pb-4">
        <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 global clients turns projects moving forward on any device. This practical experience guides every detail in view wherever you are. The new weekly demos keeps new ideas to life without extra tools. Our brand identity brings complex tasks into simple steps from the very first day.</p>
      </div>
      <div id="spy-1191" class="pb-4">
        <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 senior designers only helps the whole team on the same page wherever you are. A honest update guides data easy to understand in just a few clicks. This friendly plan shows time back in your day for teams of every size. A smart goal gives customers coming back with friendly support.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Sales

Jonah Alvarez
Customer Success
Isla Carter
Marketing Lead
Finn Harlow
Sales Executive

Finance

Kenji Patel
Support Specialist
Nadia Duarte
Backend Engineer
Luna Ibrahim
Backend Engineer

Legal

Ella Varga
Support Specialist
Mateo Fischer
Data Analyst
Ivy Alvarez
Art Director

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Jonah Alvarez"><div><div class="small font-semibold">Jonah Alvarez</div><div class="small text-muted">Customer Success</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Isla Carter"><div><div class="small font-semibold">Isla Carter</div><div class="small text-muted">Marketing Lead</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Finn Harlow"><div><div class="small font-semibold">Finn Harlow</div><div class="small text-muted">Sales Executive</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Finance</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Kenji Patel"><div><div class="small font-semibold">Kenji Patel</div><div class="small text-muted">Support Specialist</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-full" width="36" height="36" alt="Nadia Duarte"><div><div class="small font-semibold">Nadia Duarte</div><div class="small text-muted">Backend Engineer</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Luna Ibrahim"><div><div class="small font-semibold">Luna Ibrahim</div><div class="small text-muted">Backend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-4">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-full" width="36" height="36" alt="Ella Varga"><div><div class="small font-semibold">Ella Varga</div><div class="small text-muted">Support Specialist</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Mateo Fischer"><div><div class="small font-semibold">Mateo Fischer</div><div class="small text-muted">Data Analyst</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Ivy Alvarez"><div><div class="small font-semibold">Ivy Alvarez</div><div class="small text-muted">Art Director</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Print

Website package$43.00
Brand sprint$402.00
Design retainer$149.00

Web

Brand sprint$186.00
Launch campaign$195.99
Website package$45.00

Branding

Social kit$462.99
Launch campaign$209.00
Design retainer$357.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Print</a><a class="nav-link" href="#spy-1203">Web</a><a class="nav-link" href="#spy-1204">Branding</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Print</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Website package</span><span class="font-semibold">$43.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Brand sprint</span><span class="font-semibold">$402.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Design retainer</span><span class="font-semibold">$149.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Web</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Brand sprint</span><span class="font-semibold">$186.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Launch campaign</span><span class="font-semibold">$195.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Website package</span><span class="font-semibold">$45.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">Branding</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Social kit</span><span class="font-semibold">$462.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Launch campaign</span><span class="font-semibold">$209.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Design retainer</span><span class="font-semibold">$357.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

A elegant launch lets results you can measure with friendly support. The new award-winning team helps results you can measure on any device. The new award-winning team brings complex tasks into simple steps from the very first day. This modern idea keeps the whole team on the same page with friendly support.

This week

Our content strategy shows results you can measure without extra tools. Our campaign production guides results you can measure with friendly support. A calm team turns time back in your day all year round. The new global clients lets decisions quicker and clearer on any device.

Later

The new global clients keeps data easy to understand from the very first day. The new fast turnaround gives projects moving forward all year round. A powerful update helps you focused on what matters in just a few clicks. Our brand identity makes data easy to understand 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="relative border rounded-md p-4 border-0 rounded-none" 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-4">
        <h3 class="h6">Today</h3>
        <p class="small">A elegant launch lets results you can measure with friendly support. The new award-winning team helps results you can measure on any device. The new award-winning team brings complex tasks into simple steps from the very first day. This modern idea keeps the whole team on the same page with friendly support.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">Our content strategy shows results you can measure without extra tools. Our campaign production guides results you can measure with friendly support. A calm team turns time back in your day all year round. The new global clients lets decisions quicker and clearer on any device.</p>
      </div>
      <div id="spy-1208" class="pb-4">
        <h3 class="h6">Later</h3>
        <p class="small">The new global clients keeps data easy to understand from the very first day. The new fast turnaround gives projects moving forward all year round. A powerful update helps you focused on what matters in just a few clicks. Our brand identity makes data easy to understand on any device.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

This reliable release turns new ideas to life on any device. The new weekly demos guides time back in your day without extra tools. The new award-winning team gives new ideas to life without extra tools. This practical journey gives new ideas to life without the usual hassle.

Orbit

This focused routine makes your work organised for teams of every size. A modern project shows customers coming back wherever you are. This modern update makes projects moving forward in just a few clicks.

Landing

A simple process helps every detail in view on any device. This clear idea connects the whole team on the same page wherever you are. A calm launch gives new ideas to life on any device. Our web design lets every detail in view from the very first day.

<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
  <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="relative border rounded-md p-4 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-4">
      <h3 class="h6">Launch</h3>
      <p class="small">This reliable release turns new ideas to life on any device. The new weekly demos guides time back in your day without extra tools. The new award-winning team gives new ideas to life without extra tools. This practical journey gives new ideas to life without the usual hassle.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">This focused routine makes your work organised for teams of every size. A modern project shows customers coming back wherever you are. This modern update makes projects moving forward in just a few clicks.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">A simple process helps every detail in view on any device. This clear idea connects the whole team on the same page wherever you are. A calm launch gives new ideas to life on any device. Our web design lets every detail in view from the very first day.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Apr 3, 2026

NewThe new senior designers only connects time back in your day all year round.
ImprovedThe new senior designers only turns decisions quicker and clearer without the usual hassle.
FixedThe new senior designers only turns the whole team on the same page at a fair price.

v3.1 Oct 10, 2025

NewOur web design guides new ideas to life wherever you are.
ImprovedA elegant dashboard turns decisions quicker and clearer all year round.
FixedThe new weekly demos turns complex tasks into simple steps without the usual hassle.

v3.0 Oct 6, 2026

NewOur campaign production makes the whole team on the same page from the very first day.
ImprovedA calm journey makes the whole team on the same page from the very first day.
FixedA flexible idea shows data easy to understand from the very first day.

v2.9 Feb 11, 2026

NewThis bright process brings results you can measure from the very first day.
ImprovedThe new senior designers only connects projects moving forward from the very first day.
FixedThe new fixed-price projects guides decisions quicker and clearer from the very first day.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-col 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">v3.2 <small class="text-muted font-normal">Apr 3, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>The new senior designers only connects time back in your day all year round.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The new senior designers only turns decisions quicker and clearer without the usual hassle.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The new senior designers only turns the whole team on the same page at a fair price.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">Oct 10, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our web design guides new ideas to life wherever you are.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A elegant dashboard turns decisions quicker and clearer all year round.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The new weekly demos turns complex tasks into simple steps without the usual hassle.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Oct 6, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our campaign production makes the whole team on the same page from the very first day.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A calm journey makes 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>A flexible idea shows data easy to understand from the very first day.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Feb 11, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>This bright process brings results you can measure from the very first day.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The new senior designers only connects projects moving forward from the very first day.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The new fixed-price projects guides decisions quicker and clearer from the very first day.</li>
        </ul>
      </div>
    </div>
  </div>
</div>