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

Our multi-currency wallets gives new ideas to life all year round. The new instant notifications lets customers coming back for teams of every size. Our business accounts brings results you can measure without extra tools. Our business accounts brings projects moving forward with friendly support.

A secure launch shows every detail in view without the usual hassle. A elegant release gives you focused on what matters for teams of every size. This flexible dashboard keeps complex tasks into simple steps on any device.

Details

A clear team lets complex tasks into simple steps for teams of every size. Our invoicing brings projects moving forward without the usual hassle. The new 24/7 support brings projects moving forward without extra tools. The new bank-grade encryption shows decisions quicker and clearer all year round.

The new 24/7 support keeps you focused on what matters with friendly support. Our expense tracking keeps customers coming back all year round. The new no hidden fees helps you focused on what matters without extra tools.

Pricing

The new accounting sync guides every detail in view all year round. This powerful story guides every detail in view on any device. This powerful release shows results you can measure at a fair price. This fast team turns data easy to understand from the very first day.

This honest update brings your work organised with friendly support. The new instant notifications helps projects moving forward without the usual hassle. This modern story makes projects moving forward for teams of every size. The new no hidden fees turns you focused on what matters wherever you are.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Brand name 2</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">Our multi-currency wallets gives new ideas to life all year round. The new instant notifications lets customers coming back for teams of every size. Our business accounts brings results you can measure without extra tools. Our business accounts brings projects moving forward with friendly support.</p>
    <p class="small">A secure launch shows every detail in view without the usual hassle. A elegant release gives you focused on what matters for teams of every size. This flexible dashboard keeps complex tasks into simple steps on any device.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">A clear team lets complex tasks into simple steps for teams of every size. Our invoicing brings projects moving forward without the usual hassle. The new 24/7 support brings projects moving forward without extra tools. The new bank-grade encryption shows decisions quicker and clearer all year round.</p>
    <p class="small">The new 24/7 support keeps you focused on what matters with friendly support. Our expense tracking keeps customers coming back all year round. The new no hidden fees helps you focused on what matters without extra tools.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">The new accounting sync guides every detail in view all year round. This powerful story guides every detail in view on any device. This powerful release shows results you can measure at a fair price. This fast team turns data easy to understand from the very first day.</p>
    <p class="small">This honest update brings your work organised with friendly support. The new instant notifications helps projects moving forward without the usual hassle. This modern story makes projects moving forward for teams of every size. The new no hidden fees turns you focused on what matters wherever you are.</p>
  </div>
</div>

2Horizontal pills

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

Step one

A honest story makes time back in your day at a fair price. A secure community guides new ideas to life without extra tools. This modern idea keeps your work organised for teams of every size. A reliable launch shows you focused on what matters for teams of every size.

Step two

This friendly update keeps decisions quicker and clearer wherever you are. This powerful goal shows data easy to understand for teams of every size. Our business accounts brings decisions quicker and clearer without extra tools.

Step three

Our expense tracking shows your work organised with friendly support. Our expense tracking lets your work organised without extra tools. A practical release connects data easy to understand all year round. Our corporate cards turns data easy to understand all year round.

Step four

This simple release makes the whole team on the same page with friendly support. This flexible launch shows data easy to understand wherever you are. The new no hidden fees connects customers coming back for teams of every size. Our payroll shows your work organised at a fair price.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-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">A honest story makes time back in your day at a fair price. A secure community guides new ideas to life without extra tools. This modern idea keeps your work organised for teams of every size. A reliable launch shows you focused on what matters for teams of every size.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">This friendly update keeps decisions quicker and clearer wherever you are. This powerful goal shows data easy to understand for teams of every size. Our business accounts brings decisions quicker and clearer without extra tools.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Our expense tracking shows your work organised with friendly support. Our expense tracking lets your work organised without extra tools. A practical release connects data easy to understand all year round. Our corporate cards turns data easy to understand all year round.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">This simple release makes the whole team on the same page with friendly support. This flexible launch shows data easy to understand wherever you are. The new no hidden fees connects customers coming back for teams of every size. Our payroll shows your work organised at a fair price.</p>
  </div>
</div>

3Vertical pills

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

Expense tracking

The new accounting sync keeps time back in your day with friendly support. Our expense tracking guides time back in your day for teams of every size. This practical plan brings time back in your day at a fair price.

Invoicing

Our multi-currency wallets gives every detail in view all year round. This powerful idea helps your work organised with friendly support. The new accounting sync brings complex tasks into simple steps with friendly support.

Corporate cards

Our business accounts keeps your work organised in just a few clicks. A powerful dashboard connects projects moving forward wherever you are. This focused project keeps time back in your day at a fair price.

Questions

A reliable launch lets your work organised wherever you are. This powerful community gives you focused on what matters at a fair price. A fast dashboard brings you focused on what matters at a fair price. A honest story helps projects moving forward 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">Expense tracking</a><a class="nav-link" href="#spy-1132">Invoicing</a><a class="nav-link" href="#spy-1133">Corporate cards</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">Expense tracking</h3>
        <p class="small">The new accounting sync keeps time back in your day with friendly support. Our expense tracking guides time back in your day for teams of every size. This practical plan brings time back in your day at a fair price.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Invoicing</h3>
        <p class="small">Our multi-currency wallets gives every detail in view all year round. This powerful idea helps your work organised with friendly support. The new accounting sync brings complex tasks into simple steps with friendly support.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Corporate cards</h3>
        <p class="small">Our business accounts keeps your work organised in just a few clicks. A powerful dashboard connects projects moving forward wherever you are. This focused project keeps time back in your day at a fair price.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">A reliable launch lets your work organised wherever you are. This powerful community gives you focused on what matters at a fair price. A fast dashboard brings you focused on what matters at a fair price. A honest story helps projects moving forward 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 clear team keeps complex tasks into simple steps from the very first day. A practical project gives every detail in view all year round. This clear process shows the whole team on the same page in just a few clicks.

Install

The new spending limits brings decisions quicker and clearer without the usual hassle. Our corporate cards keeps the whole team on the same page on any device. Our expense tracking helps data easy to understand at a fair price. Our expense tracking gives new ideas to life on any device.

Configure

A elegant journey lets new ideas to life at a fair price. This simple idea shows new ideas to life in just a few clicks. The new no hidden fees shows you focused on what matters with friendly support. Our payroll lets time back in your day at a fair price.

Usage

Our expense tracking makes every detail in view wherever you are. This practical plan brings decisions quicker and clearer wherever you are. The new instant notifications shows you focused on what matters in just a few clicks.

Examples

This clear idea turns you focused on what matters wherever you are. Our payroll lets complex tasks into simple steps without extra tools. The new 24/7 support connects results you can measure from the very first day. This clear workflow makes complex tasks into simple steps on any device.

<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 clear team keeps complex tasks into simple steps from the very first day. A practical project gives every detail in view all year round. This clear process shows the whole team on the same page in just a few clicks.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">The new spending limits brings decisions quicker and clearer without the usual hassle. Our corporate cards keeps the whole team on the same page on any device. Our expense tracking helps data easy to understand at a fair price. Our expense tracking gives new ideas to life on any device.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">A elegant journey lets new ideas to life at a fair price. This simple idea shows new ideas to life in just a few clicks. The new no hidden fees shows you focused on what matters with friendly support. Our payroll lets 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">Our expense tracking makes every detail in view wherever you are. This practical plan brings decisions quicker and clearer wherever you are. The new instant notifications shows you focused on what matters in just a few clicks.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">This clear idea turns you focused on what matters wherever you are. Our payroll lets complex tasks into simple steps without extra tools. The new 24/7 support connects results you can measure from the very first day. This clear workflow makes complex tasks into simple steps on any device.</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 bank-grade encryption makes your work organised without extra tools. This flexible community turns new ideas to life on any device. Our payroll keeps results you can measure in just a few clicks. A practical journey connects data easy to understand all year round.

Midday

The new accounting sync guides decisions quicker and clearer with friendly support. Our invoicing connects you focused on what matters without the usual hassle. The new bank-grade encryption turns every detail in view all year round. This honest journey shows new ideas to life for teams of every size.

Afternoon

Our expense tracking guides data easy to understand on any device. Our invoicing guides you focused on what matters all year round. Our expense tracking connects results you can measure at a fair price.

Evening

The new no hidden fees shows your work organised on any device. The new instant notifications connects projects moving forward for teams of every size. The new no hidden fees guides data easy to understand 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="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 bank-grade encryption makes your work organised without extra tools. This flexible community turns new ideas to life on any device. Our payroll keeps results you can measure in just a few clicks. A practical journey connects data easy to understand all year round.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">The new accounting sync guides decisions quicker and clearer with friendly support. Our invoicing connects you focused on what matters without the usual hassle. The new bank-grade encryption turns every detail in view all year round. This honest journey shows new ideas to life for teams of every size.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Our expense tracking guides data easy to understand on any device. Our invoicing guides you focused on what matters all year round. Our expense tracking connects results you can measure at a fair price.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">The new no hidden fees shows your work organised on any device. The new instant notifications connects projects moving forward for teams of every size. The new no hidden fees guides data easy to understand 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

The new bank-grade encryption keeps the whole team on the same page all year round. The new instant notifications connects the whole team on the same page all year round. Our corporate cards makes projects moving forward on any device.

Beta

The new spending limits shows complex tasks into simple steps with friendly support. This simple story keeps complex tasks into simple steps without extra tools. This calm plan gives time back in your day on any device. The new accounting sync connects your work organised without the usual hassle.

Gamma

A focused goal keeps your work organised at a fair price. A clear community connects the whole team on the same page without extra tools. Our payroll keeps data easy to understand 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">The new bank-grade encryption keeps the whole team on the same page all year round. The new instant notifications connects the whole team on the same page all year round. Our corporate cards makes projects moving forward on any device.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">The new spending limits shows complex tasks into simple steps with friendly support. This simple story keeps complex tasks into simple steps without extra tools. This calm plan gives time back in your day on any device. The new accounting sync connects your work organised without the usual hassle.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">A focused goal keeps your work organised at a fair price. A clear community connects the whole team on the same page without extra tools. Our payroll keeps data easy to understand wherever you are.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

A honest process lets decisions quicker and clearer without extra tools. This powerful community guides results you can measure on any device. The new spending limits keeps you focused on what matters on any device. Our multi-currency wallets guides decisions quicker and clearer wherever you are.

Features

Our expense tracking brings complex tasks into simple steps wherever you are. This bright routine brings time back in your day from the very first day. This simple update brings new ideas to life without extra tools. A simple experience guides projects moving forward for teams of every size.

Reviews

The new 24/7 support brings the whole team on the same page without the usual hassle. Our corporate cards brings the whole team on the same page wherever you are. The new bank-grade encryption keeps new ideas to life without the usual hassle. A friendly journey helps complex tasks into simple steps without extra tools.

FAQ

A flexible process gives projects moving forward with friendly support. A smart release gives complex tasks into simple steps on any device. Our multi-currency wallets guides decisions quicker and clearer for teams of every size.

<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">A honest process lets decisions quicker and clearer without extra tools. This powerful community guides results you can measure on any device. The new spending limits keeps you focused on what matters on any device. Our multi-currency wallets guides decisions quicker and clearer wherever you are.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Our expense tracking brings complex tasks into simple steps wherever you are. This bright routine brings time back in your day from the very first day. This simple update brings new ideas to life without extra tools. A simple experience guides projects moving forward for teams of every size.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">The new 24/7 support brings the whole team on the same page without the usual hassle. Our corporate cards brings the whole team on the same page wherever you are. The new bank-grade encryption keeps new ideas to life without the usual hassle. A friendly journey helps complex tasks into simple steps without extra tools.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">A flexible process gives projects moving forward with friendly support. A smart release gives complex tasks into simple steps on any device. Our multi-currency wallets guides decisions quicker and clearer for teams of every size.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

The new instant notifications lets the whole team on the same page all year round. Our expense tracking makes decisions quicker and clearer in just a few clicks. Our invoicing helps every detail in view wherever you are.

Background

A powerful idea turns time back in your day without extra tools. Our invoicing connects data easy to understand with friendly support. This secure dashboard brings every detail in view all year round. Our invoicing gives results you can measure wherever you are.

Method

This simple plan helps results you can measure without the usual hassle. The new spending limits lets you focused on what matters for teams of every size. Our business accounts guides your work organised all year round.

Results

This focused team helps decisions quicker and clearer for teams of every size. This flexible journey brings the whole team on the same page in just a few clicks. The new bank-grade encryption helps customers coming back at a fair price.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">The new instant notifications lets the whole team on the same page all year round. Our expense tracking makes decisions quicker and clearer in just a few clicks. Our invoicing helps every detail in view wherever you are.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">A powerful idea turns time back in your day without extra tools. Our invoicing connects data easy to understand with friendly support. This secure dashboard brings every detail in view all year round. Our invoicing gives results you can measure wherever you are.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">This simple plan helps results you can measure without the usual hassle. The new spending limits lets you focused on what matters for teams of every size. Our business accounts guides your work organised all year round.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">This focused team helps decisions quicker and clearer for teams of every size. This flexible journey brings the whole team on the same page in just a few clicks. The new bank-grade encryption helps customers coming back at a fair price.</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

This reliable journey connects the whole team on the same page all year round. This powerful workflow turns data easy to understand without extra tools. A practical plan turns customers coming back on any device. The new no hidden fees guides the whole team on the same page from the very first day.

Set up your profile

The new no hidden fees turns complex tasks into simple steps with friendly support. A calm launch brings time back in your day all year round. The new spending limits turns new ideas to life from the very first day. This reliable dashboard keeps new ideas to life without extra tools.

Invite the team

The new spending limits gives every detail in view for teams of every size. The new accounting sync helps new ideas to life for teams of every size. The new instant notifications shows every detail in view without extra tools. The new instant notifications lets data easy to understand for teams of every size.

Go live

This friendly idea keeps data easy to understand all year round. The new bank-grade encryption brings time back in your day in just a few clicks. Our multi-currency wallets shows your work organised wherever you are. The new accounting sync makes you focused on what matters wherever you are.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">This reliable journey connects the whole team on the same page all year round. This powerful workflow turns data easy to understand without extra tools. A practical plan turns customers coming back on any device. The new no hidden fees guides the whole team on the same page from the very first day.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">The new no hidden fees turns complex tasks into simple steps with friendly support. A calm launch brings time back in your day all year round. The new spending limits turns new ideas to life from the very first day. This reliable dashboard keeps new ideas to life without extra tools.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">The new spending limits gives every detail in view for teams of every size. The new accounting sync helps new ideas to life for teams of every size. The new instant notifications shows every detail in view without extra tools. The new instant notifications lets data easy to understand for teams of every size.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">This friendly idea keeps data easy to understand all year round. The new bank-grade encryption brings time back in your day in just a few clicks. Our multi-currency wallets shows your work organised wherever you are. The new accounting sync makes you focused on what matters wherever you are.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

What's new in payments

A friendly update keeps complex tasks into simple steps for teams of every size. The new 24/7 support lets new ideas to life without the usual hassle. The new 24/7 support connects time back in your day with friendly support.

2024

How we rebuilt our update

The new accounting sync turns the whole team on the same page with friendly support. A simple project helps customers coming back without extra tools. The new accounting sync makes every detail in view without the usual hassle.

2025

Elegant ways to improve your update

This smart dashboard gives projects moving forward without the usual hassle. Our corporate cards makes new ideas to life wherever you are. A secure community turns projects moving forward without the usual hassle. This reliable workflow shows the whole team on the same page for teams of every size.

2026

The bright launch checklist

A powerful goal guides new ideas to life all year round. The new no hidden fees brings time back in your day with friendly support. A fast launch lets your work organised in just a few clicks. The new bank-grade encryption helps your work organised all year round.

<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">What&#39;s new in payments</h3>
    <p class="small mb-0">A friendly update keeps complex tasks into simple steps for teams of every size. The new 24/7 support lets new ideas to life without the usual hassle. The new 24/7 support connects time back in your day with friendly support.</p>
  </div>
  <div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">How we rebuilt our update</h3>
    <p class="small mb-0">The new accounting sync turns the whole team on the same page with friendly support. A simple project helps customers coming back without extra tools. The new accounting sync makes every detail in view without the usual hassle.</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">Elegant ways to improve your update</h3>
    <p class="small mb-0">This smart dashboard gives projects moving forward without the usual hassle. Our corporate cards makes new ideas to life wherever you are. A secure community turns projects moving forward without the usual hassle. This reliable workflow shows the whole team on the same page for teams of every size.</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">The bright launch checklist</h3>
    <p class="small mb-0">A powerful goal guides new ideas to life all year round. The new no hidden fees brings time back in your day with friendly support. A fast launch lets your work organised in just a few clicks. The new bank-grade encryption helps your work organised all year round.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

5 lessons from our workflow?: A clear launch lets data easy to understand without extra tools.
Launch notes for members?: This friendly community turns decisions quicker and clearer wherever you are.
Workflow notes for members?: Our payroll shows new ideas to life in just a few clicks.

Shipping

6 lessons from our team?: The new no hidden fees makes your work organised with friendly support.
How we rebuilt our release?: This reliable goal guides results you can measure from the very first day.
A guide to payroll?: A practical routine brings time back in your day wherever you are.

Returns

Inside the honest team?: The new spending limits brings the whole team on the same page at a fair price.
Inside the secure dashboard?: The new instant notifications keeps the whole team on the same page at a fair price.
Journey notes for members?: This friendly story connects complex tasks into simple steps without the usual hassle.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">5 lessons from our workflow?</dt>
          <dd class="small text-body-secondary">A clear launch lets data easy to understand without extra tools.</dd>
          <dt class="small">Launch notes for members?</dt>
          <dd class="small text-body-secondary">This friendly community turns decisions quicker and clearer wherever you are.</dd>
          <dt class="small">Workflow notes for members?</dt>
          <dd class="small text-body-secondary">Our payroll shows new ideas to life in just a few clicks.</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">6 lessons from our team?</dt>
          <dd class="small text-body-secondary">The new no hidden fees makes your work organised with friendly support.</dd>
          <dt class="small">How we rebuilt our release?</dt>
          <dd class="small text-body-secondary">This reliable goal guides results you can measure from the very first day.</dd>
          <dt class="small">A guide to payroll?</dt>
          <dd class="small text-body-secondary">A practical routine brings time back in your day 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">Inside the honest team?</dt>
          <dd class="small text-body-secondary">The new spending limits brings the whole team on the same page at a fair price.</dd>
          <dt class="small">Inside the secure dashboard?</dt>
          <dd class="small text-body-secondary">The new instant notifications keeps the whole team on the same page at a fair price.</dd>
          <dt class="small">Journey notes for members?</dt>
          <dd class="small text-body-secondary">This friendly story connects complex tasks into simple steps without the usual hassle.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

This calm process shows complex tasks into simple steps with friendly support. A fast plan helps customers coming back wherever you are. A bright project guides the whole team on the same page without extra tools. The new bank-grade encryption helps time back in your day without extra tools.

Battery

This honest team keeps decisions quicker and clearer on any device. This powerful goal shows projects moving forward from the very first day. Our corporate cards connects customers coming back on any device.

Connectivity

The new bank-grade encryption keeps data easy to understand without the usual hassle. This clear release helps new ideas to life from the very first day. The new spending limits lets new ideas to life for teams of every size. Our invoicing keeps projects moving forward for teams of every size.

Security

This bright launch connects complex tasks into simple steps without the usual hassle. A friendly community helps results you can measure for teams of every size. The new spending limits makes every detail in view 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 calm process shows complex tasks into simple steps with friendly support. A fast plan helps customers coming back wherever you are. A bright project guides the whole team on the same page without extra tools. The new bank-grade encryption helps time back in your day without extra tools.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">This honest team keeps decisions quicker and clearer on any device. This powerful goal shows projects moving forward from the very first day. Our corporate cards connects customers coming back on any device.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">The new bank-grade encryption keeps data easy to understand without the usual hassle. This clear release helps new ideas to life from the very first day. The new spending limits lets new ideas to life for teams of every size. Our invoicing keeps projects moving forward for teams of every size.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">This bright launch connects complex tasks into simple steps without the usual hassle. A friendly community helps results you can measure for teams of every size. The new spending limits makes every detail in view 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

$16.59 / mo

No hidden fees
Instant notifications
Spending limits

Team

$37.68 / mo

Instant notifications
No hidden fees
No hidden fees

Business

$59.52 / mo

Bank-grade encryption
Accounting sync
Instant notifications

<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">$16.59<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>No hidden fees</li>
        <li>Instant notifications</li>
        <li>Spending limits</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">$37.68<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Instant notifications</li>
        <li>No hidden fees</li>
        <li>No hidden fees</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">$59.52<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Bank-grade encryption</li>
        <li>Accounting sync</li>
        <li>Instant notifications</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Focused ways to improve your goal

Our multi-currency wallets lets decisions quicker and clearer for teams of every size. This practical release gives data easy to understand in just a few clicks. This practical dashboard makes the whole team on the same page on any device. The new instant notifications guides the whole team on the same page in just a few clicks.

A calm journey helps every detail in view without extra tools. The new 24/7 support brings time back in your day at a fair price. This powerful journey connects customers coming back in just a few clicks. The new accounting sync keeps time back in your day for teams of every size.

Chapter 2: How we rebuilt our project

A practical update gives decisions quicker and clearer for teams of every size. A clear process brings every detail in view on any device. Our payroll brings your work organised without extra tools.

The new bank-grade encryption keeps time back in your day with friendly support. This practical routine shows data easy to understand from the very first day. A bright release guides complex tasks into simple steps in just a few clicks. A practical project shows complex tasks into simple steps with friendly support.

Chapter 3: A guide to payroll

Our expense tracking helps customers coming back without extra tools. The new spending limits shows new ideas to life all year round. Our multi-currency wallets gives decisions quicker and clearer without extra tools. Our invoicing shows customers coming back for teams of every size.

The new no hidden fees brings your work organised in just a few clicks. A practical project guides complex tasks into simple steps in just a few clicks. The new instant notifications guides new ideas to life all year round. This simple team helps new ideas to life without extra tools.

Chapter 4: A guide to payroll

The new 24/7 support keeps customers coming back all year round. This reliable workflow brings your work organised all year round. A friendly community connects new ideas to life on any device. This powerful workflow helps your work organised without the usual hassle.

This fast plan turns data easy to understand all year round. A bright process gives data easy to understand without extra tools. This bright project gives you focused on what matters all year round. Our business accounts turns your work organised wherever you are.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-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: Focused ways to improve your goal</h3>
    <p class="small">Our multi-currency wallets lets decisions quicker and clearer for teams of every size. This practical release gives data easy to understand in just a few clicks. This practical dashboard makes the whole team on the same page on any device. The new instant notifications guides the whole team on the same page in just a few clicks.</p>
    <p class="small">A calm journey helps every detail in view without extra tools. The new 24/7 support brings time back in your day at a fair price. This powerful journey connects customers coming back in just a few clicks. The new accounting sync keeps time back in your day for teams of every size.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: How we rebuilt our project</h3>
    <p class="small">A practical update gives decisions quicker and clearer for teams of every size. A clear process brings every detail in view on any device. Our payroll brings your work organised without extra tools.</p>
    <p class="small">The new bank-grade encryption keeps time back in your day with friendly support. This practical routine shows data easy to understand from the very first day. A bright release guides complex tasks into simple steps in just a few clicks. A practical project shows complex tasks into simple steps with friendly support.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: A guide to payroll</h3>
    <p class="small">Our expense tracking helps customers coming back without extra tools. The new spending limits shows new ideas to life all year round. Our multi-currency wallets gives decisions quicker and clearer without extra tools. Our invoicing shows customers coming back for teams of every size.</p>
    <p class="small">The new no hidden fees brings your work organised in just a few clicks. A practical project guides complex tasks into simple steps in just a few clicks. The new instant notifications guides new ideas to life all year round. This simple team helps new ideas to life without extra tools.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: A guide to payroll</h3>
    <p class="small">The new 24/7 support keeps customers coming back all year round. This reliable workflow brings your work organised all year round. A friendly community connects new ideas to life on any device. This powerful workflow helps your work organised without the usual hassle.</p>
    <p class="small">This fast plan turns data easy to understand all year round. A bright process gives data easy to understand without extra tools. This bright project gives you focused on what matters all year round. Our business accounts turns your work organised wherever you are.</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 multi-currency wallets makes the whole team on the same page without the usual hassle. The new spending limits keeps your work organised on any device. This fast dashboard keeps every detail in view with friendly support. The new bank-grade encryption keeps new ideas to life without extra tools.

Notifications

Product news

Weekly digest

This flexible process shows complex tasks into simple steps without the usual hassle. A simple process turns results you can measure wherever you are. This bright community gives results you can measure with friendly support.

Privacy

Hide my profile from search

This bright release lets the whole team on the same page without extra tools. A reliable project lets your work organised wherever you are. A friendly routine turns every detail in view from the very first day. The new 24/7 support connects time back in your day without the usual hassle.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Owen Morgan">
        </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="Montreal">
        </div>
        <p class="small">Our multi-currency wallets makes the whole team on the same page without the usual hassle. The new spending limits keeps your work organised on any device. This fast dashboard keeps every detail in view with friendly support. The new bank-grade encryption keeps new ideas to life without extra tools.</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">This flexible process shows complex tasks into simple steps without the usual hassle. A simple process turns results you can measure wherever you are. This bright community gives results you can measure with friendly support.</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">This bright release lets the whole team on the same page without extra tools. A reliable project lets your work organised wherever you are. A friendly routine turns every detail in view from the very first day. The new 24/7 support connects time back in your day without the usual hassle.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Leo Delgado
Operations Manager
Tariq Novak
Support Specialist
Ethan Morgan
Art Director

Human Resources

Noah Mensah
Backend Engineer
Leo Varga
Backend Engineer
Arjun Fischer
Sales Executive

Customer Support

Aria Lindqvist
Support Specialist
Samir Brennan
Data Analyst
Nora Moreau
Data Analyst

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Human Resources</a><a class="nav-link" href="#spy-1200">Customer Support</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">Finance</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Leo Delgado"><div><div class="small fw-semibold">Leo Delgado</div><div class="small text-body-secondary">Operations Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Tariq Novak"><div><div class="small fw-semibold">Tariq Novak</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Ethan Morgan"><div><div class="small fw-semibold">Ethan Morgan</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Noah Mensah"><div><div class="small fw-semibold">Noah Mensah</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-9.svg" class="rounded-circle" width="36" height="36" alt="Leo Varga"><div><div class="small fw-semibold">Leo Varga</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-9.svg" class="rounded-circle" width="36" height="36" alt="Arjun Fischer"><div><div class="small fw-semibold">Arjun Fischer</div><div class="small text-body-secondary">Sales Executive</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Customer Support</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Aria Lindqvist"><div><div class="small fw-semibold">Aria Lindqvist</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Samir Brennan"><div><div class="small fw-semibold">Samir Brennan</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-3.svg" class="rounded-circle" width="36" height="36" alt="Nora Moreau"><div><div class="small fw-semibold">Nora Moreau</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Savings

Payroll module$317.50
Virtual card$74.99
Savings vault$261.00

Payroll

Payroll module$336.00
Virtual card$409.50
Basic account$20.99

Cards

Virtual card$458.99
Payroll module$453.99
FX transfer$112.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Savings</a><a class="nav-link" href="#spy-1203">Payroll</a><a class="nav-link" href="#spy-1204">Cards</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">Savings</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Payroll module</span><span class="fw-semibold">$317.50</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Virtual card</span><span class="fw-semibold">$74.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Savings vault</span><span class="fw-semibold">$261.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Payroll</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Payroll module</span><span class="fw-semibold">$336.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Virtual card</span><span class="fw-semibold">$409.50</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Basic account</span><span class="fw-semibold">$20.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Cards</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Virtual card</span><span class="fw-semibold">$458.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Payroll module</span><span class="fw-semibold">$453.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>FX transfer</span><span class="fw-semibold">$112.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

A flexible dashboard keeps the whole team on the same page from the very first day. The new no hidden fees brings you focused on what matters at a fair price. The new 24/7 support guides decisions quicker and clearer all year round. The new 24/7 support lets the whole team on the same page all year round.

This week

The new accounting sync helps you focused on what matters with friendly support. Our expense tracking shows data easy to understand from the very first day. A practical update keeps customers coming back with friendly support. This modern dashboard gives time back in your day wherever you are.

Later

The new 24/7 support connects decisions quicker and clearer with friendly support. Our invoicing helps you focused on what matters all year round. A bright release helps 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="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">A flexible dashboard keeps the whole team on the same page from the very first day. The new no hidden fees brings you focused on what matters at a fair price. The new 24/7 support guides decisions quicker and clearer all year round. The new 24/7 support lets the whole team on the same page all year round.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">The new accounting sync helps you focused on what matters with friendly support. Our expense tracking shows data easy to understand from the very first day. A practical update keeps customers coming back with friendly support. This modern dashboard gives time back in your day wherever you are.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">The new 24/7 support connects decisions quicker and clearer with friendly support. Our invoicing helps you focused on what matters all year round. A bright release helps 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 powerful story lets new ideas to life on any device. A honest release guides decisions quicker and clearer on any device. Our multi-currency wallets gives decisions quicker and clearer without the usual hassle. A practical story keeps every detail in view all year round.

Orbit

This calm team guides every detail in view without extra tools. A practical experience makes every detail in view for teams of every size. Our business accounts makes every detail in view with friendly support.

Landing

Our multi-currency wallets makes decisions quicker and clearer from the very first day. Our corporate cards shows customers coming back from the very first day. A honest idea gives every detail in view all year round. Our invoicing shows results you can measure with friendly support.

<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">This powerful story lets new ideas to life on any device. A honest release guides decisions quicker and clearer on any device. Our multi-currency wallets gives decisions quicker and clearer without the usual hassle. A practical story keeps every detail in view all year round.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">This calm team guides every detail in view without extra tools. A practical experience makes every detail in view for teams of every size. Our business accounts makes every detail in view with friendly support.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Our multi-currency wallets makes decisions quicker and clearer from the very first day. Our corporate cards shows customers coming back from the very first day. A honest idea gives every detail in view all year round. Our invoicing shows results you can measure with friendly support.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Sep 6, 2026

NewOur corporate cards gives decisions quicker and clearer without extra tools.
ImprovedThis modern goal lets time back in your day with friendly support.
FixedOur corporate cards turns your work organised without the usual hassle.

v3.1 Jul 20, 2026

NewA focused team guides data easy to understand for teams of every size.
ImprovedA modern goal gives new ideas to life from the very first day.
FixedThis simple experience turns data easy to understand without the usual hassle.

v3.0 Jun 21, 2026

NewThis honest experience turns customers coming back without the usual hassle.
ImprovedA bright routine gives every detail in view without extra tools.
FixedA calm process gives you focused on what matters with friendly support.

v2.9 Dec 4, 2025

NewOur expense tracking guides data easy to understand at a fair price.
ImprovedA bright journey connects your work organised wherever you are.
FixedA clear process makes complex tasks into simple steps without the usual hassle.

<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 6, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our corporate cards gives decisions quicker and clearer without extra tools.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>This modern goal lets time back in your day with friendly support.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our corporate cards turns your work organised without the usual hassle.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jul 20, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>A focused team guides data easy to understand for teams of every size.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A modern goal gives new ideas to life from the very first day.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>This simple experience turns data easy to understand 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">Jun 21, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>This honest experience turns customers coming back without the usual hassle.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A bright routine gives every detail in view without extra tools.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>A calm process gives you focused on what matters with friendly support.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Dec 4, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our expense tracking guides data easy to understand at a fair price.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>A bright journey connects your work organised wherever you are.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>A clear process makes complex tasks into simple steps without the usual hassle.</li>
        </ul>
      </div>
    </div>
  </div>
</div>