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
Beginners are always welcome, with an intro session included. Every detail is handled by people who care about getting it right. Certified coaches design every session around your level and your goals. Pause or change your membership any time, with no long contracts.
Thousands of members already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Track your progress in the app and see how far you have come.
Details
Online coaching keeps you on track when you travel. We listen first, then build a plan around what you actually need. Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form.
Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. Our team has done this many times, so you never have to guess.
Pricing
Start in minutes and get help from a real person whenever you need it. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way.
Open 24 hours, so you can train whenever it suits your day. More than sixty classes a week, from sunrise yoga to late-night spin. Open 24 hours, so you can train whenever it suits your day.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Hive Labs</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">Beginners are always welcome, with an intro session included. Every detail is handled by people who care about getting it right. Certified coaches design every session around your level and your goals. Pause or change your membership any time, with no long contracts.</p>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Track your progress in the app and see how far you have come.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Online coaching keeps you on track when you travel. We listen first, then build a plan around what you actually need. Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form.</p>
<p class="small">Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">Open 24 hours, so you can train whenever it suits your day. More than sixty classes a week, from sunrise yoga to late-night spin. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts. Online coaching keeps you on track when you travel.
Step two
Nutrition plans fit your routine and the food you actually enjoy. Modern equipment is cleaned, serviced and ready every day. More than sixty classes a week, from sunrise yoga to late-night spin. Start in minutes and get help from a real person whenever you need it.
Step three
Community events keep you motivated, from fun runs to workshops. We keep things simple, so you can focus on what matters to you. Thousands of members already trust us, and we work hard to keep it that way.
Step four
Friendly people answer your questions quickly, by phone, chat or email. Track your progress in the app and see how far you have come. Every detail is handled by people who care about getting it right. Beginners are always welcome, with an intro session included.
<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">We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Modern equipment is cleaned, serviced and ready every day. More than sixty classes a week, from sunrise yoga to late-night spin. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. We keep things simple, so you can focus on what matters to you. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Track your progress in the app and see how far you have come. Every detail is handled by people who care about getting it right. Beginners are always welcome, with an intro session included.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Personal training
Small group classes mean your coach knows your name and your form. Certified coaches design every session around your level and your goals. Our team has done this many times, so you never have to guess. Our recovery spa has a sauna, cold plunge and massage rooms.
Online coaching
We measure success by how many members come back and tell their friends. Clear prices, honest advice and no surprises along the way. Online coaching keeps you on track when you travel.
Nutrition plans
Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.
Questions
Beginners are always welcome, with an intro session included. Thousands of members already trust us, and we work hard to keep it that way. Open 24 hours, so you can train whenever it suits your day. Nutrition plans fit your routine and the food you actually enjoy.
<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">Personal training</a><a class="nav-link" href="#spy-1132">Online coaching</a><a class="nav-link" href="#spy-1133">Nutrition plans</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">Personal training</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Certified coaches design every session around your level and your goals. Our team has done this many times, so you never have to guess. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Online coaching</h3>
<p class="small">We measure success by how many members come back and tell their friends. Clear prices, honest advice and no surprises along the way. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Nutrition plans</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Beginners are always welcome, with an intro session included. Thousands of members already trust us, and we work hard to keep it that way. Open 24 hours, so you can train whenever it suits your day. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
More than sixty classes a week, from sunrise yoga to late-night spin. Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Start in minutes and get help from a real person whenever you need it.
Install
Certified coaches design every session around your level and your goals. Small group classes mean your coach knows your name and your form. We measure success by how many members come back and tell their friends.
Configure
Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.
Usage
Track your progress in the app and see how far you have come. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Track your progress in the app and see how far you have come.
Examples
Online coaching keeps you on track when you travel. Start in minutes and get help from a real person whenever you need it. We measure success by how many members come back and tell their friends. Our recovery spa has a sauna, cold plunge and massage rooms.
<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">More than sixty classes a week, from sunrise yoga to late-night spin. Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Certified coaches design every session around your level and your goals. Small group classes mean your coach knows your name and your form. We measure success by how many members come back and tell their friends.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Track your progress in the app and see how far you have come. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Track your progress in the app and see how far you have come.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Online coaching keeps you on track when you travel. Start in minutes and get help from a real person whenever you need it. We measure success by how many members come back and tell their friends. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Pause or change your membership any time, with no long contracts. Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day. We listen first, then build a plan around what you actually need.
Midday
Community events keep you motivated, from fun runs to workshops. Thousands of members already trust us, and we work hard to keep it that way. Nutrition plans fit your routine and the food you actually enjoy. More than sixty classes a week, from sunrise yoga to late-night spin.
Afternoon
Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day. Beginners are always welcome, with an intro session included. We keep things simple, so you can focus on what matters to you.
Evening
Small group classes mean your coach knows your name and your form. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
<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">Pause or change your membership any time, with no long contracts. Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Thousands of members already trust us, and we work hard to keep it that way. Nutrition plans fit your routine and the food you actually enjoy. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day. Beginners are always welcome, with an intro session included. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Thousands of members already trust us, and we work hard to keep it that way. Modern equipment is cleaned, serviced and ready every day. We keep things simple, so you can focus on what matters to you.
Beta
Online coaching keeps you on track when you travel. Our recovery spa has a sauna, cold plunge and massage rooms. Pause or change your membership any time, with no long contracts.
Gamma
Our team has done this many times, so you never have to guess. Nutrition plans fit your routine and the food you actually enjoy. We listen first, then build a plan around what you actually need.
<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">Thousands of members already trust us, and we work hard to keep it that way. Modern equipment is cleaned, serviced and ready every day. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Online coaching keeps you on track when you travel. Our recovery spa has a sauna, cold plunge and massage rooms. Pause or change your membership any time, with no long contracts.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Our team has done this many times, so you never have to guess. Nutrition plans fit your routine and the food you actually enjoy. We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
More than sixty classes a week, from sunrise yoga to late-night spin. Community events keep you motivated, from fun runs to workshops. Start in minutes and get help from a real person whenever you need it.
Features
Certified coaches design every session around your level and your goals. We measure success by how many members come back and tell their friends. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.
Reviews
Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day. Small group classes mean your coach knows your name and your form.
FAQ
Community events keep you motivated, from fun runs to workshops. Modern equipment is cleaned, serviced and ready every day. Every detail is handled by people who care about getting it right.
<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">More than sixty classes a week, from sunrise yoga to late-night spin. Community events keep you motivated, from fun runs to workshops. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Certified coaches design every session around your level and your goals. We measure success by how many members come back and tell their friends. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day. Small group classes mean your coach knows your name and your form.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Modern equipment is cleaned, serviced and ready every day. Every detail is handled by people who care about getting it right.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Thousands of members already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included.
Background
Certified coaches design every session around your level and your goals. Clear prices, honest advice and no surprises along the way. Online coaching keeps you on track when you travel. Our recovery spa has a sauna, cold plunge and massage rooms.
Method
We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts. We measure success by how many members come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.
Results
Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day. Track your progress in the app and see how far you have come.
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">Thousands of members already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Certified coaches design every session around your level and your goals. Clear prices, honest advice and no surprises along the way. Online coaching keeps you on track when you travel. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts. We measure success by how many members come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day. Track your progress in the app and see how far you have come.</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
Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess. Open 24 hours, so you can train whenever it suits your day.
Set up your profile
Modern equipment is cleaned, serviced and ready every day. We listen first, then build a plan around what you actually need. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way.
Invite the team
Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.
Go live
Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.
<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">Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. We listen first, then build a plan around what you actually need. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
HIIT twice a week: how hard is hard enough?
Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Track your progress in the app and see how far you have come. More than sixty classes a week, from sunrise yoga to late-night spin.
The small habits that make a big difference
We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals. Thousands of members already trust us, and we work hard to keep it that way.
Why recovery matters as much as training
We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts. Clear prices, honest advice and no surprises along the way.
How to stay motivated through winter
More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts. We listen first, then build a plan around what you actually need.
<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">HIIT twice a week: how hard is hard enough?</h3>
<p class="small mb-0">Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Track your progress in the app and see how far you have come. More than sixty classes a week, from sunrise yoga to late-night spin.</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">The small habits that make a big difference</h3>
<p class="small mb-0">We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals. Thousands of members already trust us, and we work hard to keep it that way.</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">Why recovery matters as much as training</h3>
<p class="small mb-0">We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts. Clear prices, honest advice and no surprises along the way.</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">How to stay motivated through winter</h3>
<p class="small mb-0">More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts. We listen first, then build a plan around what you actually need.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Running your first 5K: an eight-week plan?
- We measure success by how many members come back and tell their friends.
- Our most popular classes this month?
- Start in minutes and get help from a real person whenever you need it.
- Five stretches for desk workers?
- Certified coaches design every session around your level and your goals.
Shipping
- A beginner's guide to getting started?
- Small group classes mean your coach knows your name and your form.
- Looking back at a busy season?
- Thousands of members already trust us, and we work hard to keep it that way.
- Building a workout habit that lasts?
- Friendly people answer your questions quickly, by phone, chat or email.
Returns
- Five things we learned this year?
- Community events keep you motivated, from fun runs to workshops.
- How to choose the right class?
- Every detail is handled by people who care about getting it right.
- What to eat before a morning workout?
- Our recovery spa has a sauna, cold plunge and massage rooms.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Running your first 5K: an eight-week plan?</dt>
<dd class="small text-body-secondary">We measure success by how many members come back and tell their friends.</dd>
<dt class="small">Our most popular classes this month?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
<dt class="small">Five stretches for desk workers?</dt>
<dd class="small text-body-secondary">Certified coaches design every session around your level and your goals.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Small group classes mean your coach knows your name and your form.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Thousands of members already trust us, and we work hard to keep it that way.</dd>
<dt class="small">Building a workout habit that lasts?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Community events keep you motivated, from fun runs to workshops.</dd>
<dt class="small">How to choose the right class?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
<dt class="small">What to eat before a morning workout?</dt>
<dd class="small text-body-secondary">Our recovery spa has a sauna, cold plunge and massage rooms.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Nutrition plans fit your routine and the food you actually enjoy. Track your progress in the app and see how far you have come. Modern equipment is cleaned, serviced and ready every day.
Battery
Our team has done this many times, so you never have to guess. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.
Connectivity
Online coaching keeps you on track when you travel. We keep things simple, so you can focus on what matters to you. Open 24 hours, so you can train whenever it suits your day. Our recovery spa has a sauna, cold plunge and massage rooms.
Security
Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Thousands of members already trust us, and we work hard to keep it that way.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Track your progress in the app and see how far you have come. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Our team has done this many times, so you never have to guess. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Online coaching keeps you on track when you travel. We keep things simple, so you can focus on what matters to you. Open 24 hours, so you can train whenever it suits your day. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$18.31 / mo
- Certified coaches
- Modern equipment
- Progress tracking
Team
$30.41 / mo
- Modern equipment
- Modern equipment
- Flexible plans
Business
$50.78 / mo
- Community events
- Open 24/7
- Flexible plans
<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">$18.31<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Certified coaches</li>
<li>Modern equipment</li>
<li>Progress tracking</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">$30.41<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Modern equipment</li>
<li>Modern equipment</li>
<li>Flexible plans</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">$50.78<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Community events</li>
<li>Open 24/7</li>
<li>Flexible plans</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Our favourite tips for busy weeks
Community events keep you motivated, from fun runs to workshops. Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends.
Online coaching keeps you on track when you travel. Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin.
Chapter 2: What our members asked us most
Certified coaches design every session around your level and your goals. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.
We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come. Modern equipment is cleaned, serviced and ready every day. Friendly people answer your questions quickly, by phone, chat or email.
Chapter 3: A beginner's guide to strength training
Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way.
Certified coaches design every session around your level and your goals. Pause or change your membership any time, with no long contracts. Our recovery spa has a sauna, cold plunge and massage rooms. Thousands of members already trust us, and we work hard to keep it that way.
Chapter 4: How our coaches plan a new class
Small group classes mean your coach knows your name and your form. We measure success by how many members come back and tell their friends. We listen first, then build a plan around what you actually need.
Track your progress in the app and see how far you have come. Online coaching keeps you on track when you travel. Start in minutes and get help from a real person whenever you need it.
<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: Our favourite tips for busy weeks</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends.</p>
<p class="small">Online coaching keeps you on track when you travel. Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: What our members asked us most</h3>
<p class="small">Certified coaches design every session around your level and your goals. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come. Modern equipment is cleaned, serviced and ready every day. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: A beginner's guide to strength training</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">Certified coaches design every session around your level and your goals. Pause or change your membership any time, with no long contracts. Our recovery spa has a sauna, cold plunge and massage rooms. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: How our coaches plan a new class</h3>
<p class="small">Small group classes mean your coach knows your name and your form. We measure success by how many members come back and tell their friends. We listen first, then build a plan around what you actually need.</p>
<p class="small">Track your progress in the app and see how far you have come. Online coaching keeps you on track when you travel. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Our team has done this many times, so you never have to guess. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin.
Notifications
We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Beginners are always welcome, with an intro session included.
Privacy
Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.
<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="Tariq Whitaker">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Kyoto">
</div>
<p class="small">Our team has done this many times, so you never have to guess. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin.</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">We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Beginners are always welcome, with an intro session included.</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">Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Legal
- Lucas DuarteSupport Specialist
- Jonah HughesHR Partner
- Chloe DelgadoProject Manager
Design
- Mia PatelProduct Designer
- Freya LarsenFrontend Engineer
- Maya LindqvistArt Director
Customer Support
- Tariq OkaforOperations Manager
- Amara VargaMarketing Lead
- Owen MorganBackend Engineer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Design</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">Legal</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="Lucas Duarte"><div><div class="small fw-semibold">Lucas Duarte</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-2.svg" class="rounded-circle" width="36" height="36" alt="Jonah Hughes"><div><div class="small fw-semibold">Jonah Hughes</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Chloe Delgado"><div><div class="small fw-semibold">Chloe Delgado</div><div class="small text-body-secondary">Project Manager</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Design</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Mia Patel"><div><div class="small fw-semibold">Mia Patel</div><div class="small text-body-secondary">Product Designer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Freya Larsen"><div><div class="small fw-semibold">Freya Larsen</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Maya Lindqvist"><div><div class="small fw-semibold">Maya Lindqvist</div><div class="small text-body-secondary">Art Director</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-1.svg" class="rounded-circle" width="36" height="36" alt="Tariq Okafor"><div><div class="small fw-semibold">Tariq Okafor</div><div class="small text-body-secondary">Operations Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Amara Varga"><div><div class="small fw-semibold">Amara Varga</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Owen Morgan"><div><div class="small fw-semibold">Owen Morgan</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Strength
- Nutrition guide$27.00
- Bootcamp$154.00
- Yoga retreat$402.00
HIIT
- Bootcamp$140.00
- Day pass$15.00
- Nutrition guide$27.00
Cardio
- Coaching plan$200.99
- Monthly pass$44.00
- Mobility workshop$37.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Strength</a><a class="nav-link" href="#spy-1203">HIIT</a><a class="nav-link" href="#spy-1204">Cardio</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">Strength</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Nutrition guide</span><span class="fw-semibold">$27.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Bootcamp</span><span class="fw-semibold">$154.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Yoga retreat</span><span class="fw-semibold">$402.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">HIIT</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Bootcamp</span><span class="fw-semibold">$140.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Day pass</span><span class="fw-semibold">$15.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Nutrition guide</span><span class="fw-semibold">$27.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Cardio</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$200.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Monthly pass</span><span class="fw-semibold">$44.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Mobility workshop</span><span class="fw-semibold">$37.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Community events keep you motivated, from fun runs to workshops.
This week
Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends. Every detail is handled by people who care about getting it right.
Later
Nutrition plans fit your routine and the food you actually enjoy. Certified coaches design every session around your level and your goals. Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin.
<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">Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Certified coaches design every session around your level and your goals. Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Modern equipment is cleaned, serviced and ready every day. Online coaching keeps you on track when you travel. We keep things simple, so you can focus on what matters to you.
Orbit
Our recovery spa has a sauna, cold plunge and massage rooms. Small group classes mean your coach knows your name and your form. Thousands of members already trust us, and we work hard to keep it that way.
Landing
Pause or change your membership any time, with no long contracts. Start in minutes and get help from a real person whenever you need it. Track your progress in the app and see how far you have come.
<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">Modern equipment is cleaned, serviced and ready every day. Online coaching keeps you on track when you travel. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. Small group classes mean your coach knows your name and your form. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Pause or change your membership any time, with no long contracts. Start in minutes and get help from a real person whenever you need it. Track your progress in the app and see how far you have come.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Sep 19, 2025
- NewCommunity events keep you motivated, from fun runs to workshops.
- ImprovedNutrition plans fit your routine and the food you actually enjoy.
- FixedOpen 24 hours, so you can train whenever it suits your day.
v3.1 May 8, 2026
- NewCertified coaches design every session around your level and your goals.
- ImprovedSmall group classes mean your coach knows your name and your form.
- FixedMore than sixty classes a week, from sunrise yoga to late-night spin.
v3.0 Nov 16, 2025
- NewClear prices, honest advice and no surprises along the way.
- ImprovedTrack your progress in the app and see how far you have come.
- FixedThousands of members already trust us, and we work hard to keep it that way.
v2.9 Nov 17, 2025
- NewPause or change your membership any time, with no long contracts.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedEvery detail is handled by people who care about getting it right.
<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 19, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Community events keep you motivated, from fun runs to workshops.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Nutrition plans fit your routine and the food you actually enjoy.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Open 24 hours, so you can train whenever it suits your day.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 8, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Certified coaches design every session around your level and your goals.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Small group classes mean your coach knows your name and your form.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>More than sixty classes a week, from sunrise yoga to late-night spin.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Nov 16, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Track your progress in the app and see how far you have come.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of members already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Nov 17, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Pause or change your membership any time, with no long contracts.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every detail is handled by people who care about getting it right.</li>
</ul>
</div>
</div>
</div>
</div>