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
Virtual passes let you join the main stage live from anywhere. Group tickets include a private meeting room for your team. We measure success by how many attendees come back and tell their friends.
Early bird tickets save you up to forty percent until the end of the month. Three days of keynotes, hands-on workshops and evening meetups. Every session is recorded, so you can catch up on anything you missed. Our evening party is the best place to turn talks into friendships.
Details
Every attendee receives a certificate of participation. Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive. Start in minutes and get help from a real person whenever you need it.
We keep things simple, so you can focus on what matters to you. Thousands of attendees already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. More than eighty speakers share what they have learned the hard way.
Pricing
Every detail is handled by people who care about getting it right. The venue is a short walk from the station and fully accessible. Clear prices, honest advice and no surprises along the way.
We listen first, then build a plan around what you actually need. Three days of keynotes, hands-on workshops and evening meetups. Thousands of attendees already trust us, and we work hard to keep it that way. Our evening party is the best place to turn talks into friendships.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Novaium Flow</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">Virtual passes let you join the main stage live from anywhere. Group tickets include a private meeting room for your team. We measure success by how many attendees come back and tell their friends.</p>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. Three days of keynotes, hands-on workshops and evening meetups. Every session is recorded, so you can catch up on anything you missed. Our evening party is the best place to turn talks into friendships.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Every attendee receives a certificate of participation. Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Thousands of attendees already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Every detail is handled by people who care about getting it right. The venue is a short walk from the station and fully accessible. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">We listen first, then build a plan around what you actually need. Three days of keynotes, hands-on workshops and evening meetups. Thousands of attendees already trust us, and we work hard to keep it that way. Our evening party is the best place to turn talks into friendships.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Start in minutes and get help from a real person whenever you need it. Virtual passes let you join the main stage live from anywhere. We listen first, then build a plan around what you actually need.
Step two
Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible. We measure success by how many attendees come back and tell their friends.
Step three
More than eighty speakers share what they have learned the hard way. Group tickets include a private meeting room for your team. Our team has done this many times, so you never have to guess. Workshops are limited to thirty seats, so everyone gets hands-on time.
Step four
Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive. Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation.
<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">Start in minutes and get help from a real person whenever you need it. Virtual passes let you join the main stage live from anywhere. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">More than eighty speakers share what they have learned the hard way. Group tickets include a private meeting room for your team. Our team has done this many times, so you never have to guess. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive. Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Venue booking
Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Sponsors meet decision-makers in a relaxed, friendly setting. Clear prices, honest advice and no surprises along the way.
Sponsorship
Thousands of attendees already trust us, and we work hard to keep it that way. More than eighty speakers share what they have learned the hard way. Three days of keynotes, hands-on workshops and evening meetups. Start in minutes and get help from a real person whenever you need it.
Networking app
Group tickets include a private meeting room for your team. Every attendee receives a certificate of participation. Friendly people answer your questions quickly, by phone, chat or email.
Questions
The networking app helps you meet the right people before you arrive. We measure success by how many attendees come back and tell their friends. Early bird tickets save you up to forty percent until the end of the month. We listen first, then build a plan around what you actually need.
<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">Venue booking</a><a class="nav-link" href="#spy-1132">Sponsorship</a><a class="nav-link" href="#spy-1133">Networking app</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">Venue booking</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Sponsors meet decision-makers in a relaxed, friendly setting. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Sponsorship</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. More than eighty speakers share what they have learned the hard way. Three days of keynotes, hands-on workshops and evening meetups. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Networking app</h3>
<p class="small">Group tickets include a private meeting room for your team. Every attendee receives a certificate of participation. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">The networking app helps you meet the right people before you arrive. We measure success by how many attendees come back and tell their friends. Early bird tickets save you up to forty percent until the end of the month. We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Our team has done this many times, so you never have to guess. Workshops are limited to thirty seats, so everyone gets hands-on time. Virtual passes let you join the main stage live from anywhere. Every session is recorded, so you can catch up on anything you missed.
Install
Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Every detail is handled by people who care about getting it right.
Configure
The venue is a short walk from the station and fully accessible. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.
Usage
Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.
Examples
More than eighty speakers share what they have learned the hard way. Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Thousands of attendees 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-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">Our team has done this many times, so you never have to guess. Workshops are limited to thirty seats, so everyone gets hands-on time. Virtual passes let you join the main stage live from anywhere. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">The venue is a short walk from the station and fully accessible. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">More than eighty speakers share what they have learned the hard way. Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Every session is recorded, so you can catch up on anything you missed. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time.
Midday
Three days of keynotes, hands-on workshops and evening meetups. Clear prices, honest advice and no surprises along the way. Virtual passes let you join the main stage live from anywhere.
Afternoon
Friendly people answer your questions quickly, by phone, chat or email. Every attendee receives a certificate of participation. We measure success by how many attendees come back and tell their friends.
Evening
Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.
<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">Every session is recorded, so you can catch up on anything you missed. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. Clear prices, honest advice and no surprises along the way. Virtual passes let you join the main stage live from anywhere.</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. Every attendee receives a certificate of participation. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Our team has done this many times, so you never have to guess. Thousands of attendees 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.
Beta
Early bird tickets save you up to forty percent until the end of the month. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.
Gamma
Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way. Sponsors meet decision-makers in a relaxed, friendly setting.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Our team has done this many times, so you never have to guess. Thousands of attendees 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.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Group tickets include a private meeting room for your team. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. We measure success by how many attendees come back and tell their friends.
Features
Start in minutes and get help from a real person whenever you need it. Every attendee receives a certificate of participation. Virtual passes let you join the main stage live from anywhere.
Reviews
Our evening party is the best place to turn talks into friendships. Every session is recorded, so you can catch up on anything you missed. Friendly people answer your questions quickly, by phone, chat or email. Three days of keynotes, hands-on workshops and evening meetups.
FAQ
The venue is a short walk from the station and fully accessible. Friendly people answer your questions quickly, by phone, chat or email. More than eighty speakers share what they have learned the hard way. Three days of keynotes, hands-on workshops and evening meetups.
<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">Group tickets include a private meeting room for your team. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Every attendee receives a certificate of participation. Virtual passes let you join the main stage live from anywhere.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Every session is recorded, so you can catch up on anything you missed. Friendly people answer your questions quickly, by phone, chat or email. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">The venue is a short walk from the station and fully accessible. Friendly people answer your questions quickly, by phone, chat or email. More than eighty speakers share what they have learned the hard way. Three days of keynotes, hands-on workshops and evening meetups.</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 networking app helps you meet the right people before you arrive. Our evening party is the best place to turn talks into friendships. Workshops are limited to thirty seats, so everyone gets hands-on time. We listen first, then build a plan around what you actually need.
Background
Virtual passes let you join the main stage live from anywhere. Early bird tickets save you up to forty percent until the end of the month. We measure success by how many attendees come back and tell their friends. Every attendee receives a certificate of participation.
Method
Every session is recorded, so you can catch up on anything you missed. We keep things simple, so you can focus on what matters to you. The venue is a short walk from the station and fully accessible. Sponsors meet decision-makers in a relaxed, friendly setting.
Results
Thousands of attendees already trust us, and we work hard to keep it that way. Group tickets include a private meeting room for your team. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
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 networking app helps you meet the right people before you arrive. Our evening party is the best place to turn talks into friendships. Workshops are limited to thirty seats, so everyone gets hands-on time. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Early bird tickets save you up to forty percent until the end of the month. We measure success by how many attendees come back and tell their friends. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Every session is recorded, so you can catch up on anything you missed. We keep things simple, so you can focus on what matters to you. The venue is a short walk from the station and fully accessible. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. Group tickets include a private meeting room for your team. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</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
Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Three days of keynotes, hands-on workshops and evening meetups. Group tickets include a private meeting room for your team.
Set up your profile
The networking app helps you meet the right people before you arrive. More than eighty speakers share what they have learned the hard way. Every detail is handled by people who care about getting it right.
Invite the team
Virtual passes let you join the main stage live from anywhere. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.
Go live
Sponsors meet decision-makers in a relaxed, friendly setting. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.
<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">Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Three days of keynotes, hands-on workshops and evening meetups. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">The networking app helps you meet the right people before you arrive. More than eighty speakers share what they have learned the hard way. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
What our attendees asked us most
Workshops are limited to thirty seats, so everyone gets hands-on time. The venue is a short walk from the station and fully accessible. Friendly people answer your questions quickly, by phone, chat or email.
How to pitch a talk that gets accepted
Every session is recorded, so you can catch up on anything you missed. We measure success by how many attendees come back and tell their friends. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.
What we learned from last year's feedback
Thousands of attendees already trust us, and we work hard to keep it that way. Early bird tickets save you up to forty percent until the end of the month. Every attendee receives a certificate of participation. Every detail is handled by people who care about getting it right.
The small habits that make a big difference
Three days of keynotes, hands-on workshops and evening meetups. We listen first, then build a plan around what you actually need. We measure success by how many attendees come back and tell their friends. Our team has done this many times, so you never have to guess.
<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 our attendees asked us most</h3>
<p class="small mb-0">Workshops are limited to thirty seats, so everyone gets hands-on time. The venue is a short walk from the station and fully accessible. Friendly people answer your questions quickly, by phone, chat or email.</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 to pitch a talk that gets accepted</h3>
<p class="small mb-0">Every session is recorded, so you can catch up on anything you missed. We measure success by how many attendees come back and tell their friends. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.</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">What we learned from last year's feedback</h3>
<p class="small mb-0">Thousands of attendees already trust us, and we work hard to keep it that way. Early bird tickets save you up to forty percent until the end of the month. Every attendee receives a certificate of participation. Every detail is handled by people who care about getting it right.</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 small habits that make a big difference</h3>
<p class="small mb-0">Three days of keynotes, hands-on workshops and evening meetups. We listen first, then build a plan around what you actually need. We measure success by how many attendees come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Five things we learned this year?
- Every session is recorded, so you can catch up on anything you missed.
- Behind the scenes: building the stage?
- Virtual passes let you join the main stage live from anywhere.
- Looking back at a busy season?
- Clear prices, honest advice and no surprises along the way.
Shipping
- Joining online: how the virtual pass works?
- Start in minutes and get help from a real person whenever you need it.
- Highlights from last year's workshops?
- Early bird tickets save you up to forty percent until the end of the month.
- How to choose the right ticket?
- More than eighty speakers share what they have learned the hard way.
Returns
- A beginner's guide to getting started?
- Our evening party is the best place to turn talks into friendships.
- What makes a panel worth watching?
- Sponsors meet decision-makers in a relaxed, friendly setting.
- Our favourite tips for busy weeks?
- Workshops are limited to thirty seats, so everyone gets hands-on time.
<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">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Every session is recorded, so you can catch up on anything you missed.</dd>
<dt class="small">Behind the scenes: building the stage?</dt>
<dd class="small text-body-secondary">Virtual passes let you join the main stage live from anywhere.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</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">Joining online: how the virtual pass works?</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">Highlights from last year's workshops?</dt>
<dd class="small text-body-secondary">Early bird tickets save you up to forty percent until the end of the month.</dd>
<dt class="small">How to choose the right ticket?</dt>
<dd class="small text-body-secondary">More than eighty speakers share what they have learned the hard way.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Our evening party is the best place to turn talks into friendships.</dd>
<dt class="small">What makes a panel worth watching?</dt>
<dd class="small text-body-secondary">Sponsors meet decision-makers in a relaxed, friendly setting.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Workshops are limited to thirty seats, so everyone gets hands-on time.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
We keep things simple, so you can focus on what matters to you. The networking app helps you meet the right people before you arrive. Thousands of attendees already trust us, and we work hard to keep it that way. Group tickets include a private meeting room for your team.
Battery
Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. Every session is recorded, so you can catch up on anything you missed.
Connectivity
Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting. We keep things simple, so you can focus on what matters to you. Early bird tickets save you up to forty percent until the end of the month.
Security
Every attendee receives a certificate of participation. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Our evening party is the best place to turn talks into friendships.
<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">We keep things simple, so you can focus on what matters to you. The networking app helps you meet the right people before you arrive. Thousands of attendees already trust us, and we work hard to keep it that way. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting. We keep things simple, so you can focus on what matters to you. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Every attendee receives a certificate of participation. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Our evening party is the best place to turn talks into friendships.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$10.21 / mo
- Hands-on workshops
- Mobile agenda
- Mobile agenda
Team
$42.91 / mo
- Networking lounges
- Networking lounges
- Certificates
Business
$53.33 / mo
- Recorded sessions
- World-class speakers
- Mobile agenda
<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">$10.21<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Hands-on workshops</li>
<li>Mobile agenda</li>
<li>Mobile agenda</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">$42.91<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Networking lounges</li>
<li>Networking lounges</li>
<li>Certificates</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">$53.33<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Recorded sessions</li>
<li>World-class speakers</li>
<li>Mobile agenda</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: A guide to the city for visiting attendees
Our team has done this many times, so you never have to guess. Thousands of attendees already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. The venue is a short walk from the station and fully accessible.
The networking app helps you meet the right people before you arrive. Workshops are limited to thirty seats, so everyone gets hands-on time. Start in minutes and get help from a real person whenever you need it. We measure success by how many attendees come back and tell their friends.
Chapter 2: Announcing our first keynote speakers
More than eighty speakers share what they have learned the hard way. Friendly people answer your questions quickly, by phone, chat or email. Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups.
Friendly people answer your questions quickly, by phone, chat or email. Thousands of attendees already trust us, and we work hard to keep it that way. Every session is recorded, so you can catch up on anything you missed. We listen first, then build a plan around what you actually need.
Chapter 3: How to get the most out of a conference
The networking app helps you meet the right people before you arrive. Early bird tickets save you up to forty percent until the end of the month. Group tickets include a private meeting room for your team. Our evening party is the best place to turn talks into friendships.
We measure success by how many attendees come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Three days of keynotes, hands-on workshops and evening meetups.
Chapter 4: Ten talks you should not miss this year
We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. The venue is a short walk from the station and fully accessible.
Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. Virtual passes let you join the main stage live from anywhere.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: A guide to the city for visiting attendees</h3>
<p class="small">Our team has done this many times, so you never have to guess. Thousands of attendees already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. The venue is a short walk from the station and fully accessible.</p>
<p class="small">The networking app helps you meet the right people before you arrive. Workshops are limited to thirty seats, so everyone gets hands-on time. Start in minutes and get help from a real person whenever you need it. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Announcing our first keynote speakers</h3>
<p class="small">More than eighty speakers share what they have learned the hard way. Friendly people answer your questions quickly, by phone, chat or email. Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Thousands of attendees already trust us, and we work hard to keep it that way. Every session is recorded, so you can catch up on anything you missed. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: How to get the most out of a conference</h3>
<p class="small">The networking app helps you meet the right people before you arrive. Early bird tickets save you up to forty percent until the end of the month. Group tickets include a private meeting room for your team. Our evening party is the best place to turn talks into friendships.</p>
<p class="small">We measure success by how many attendees come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Ten talks you should not miss this year</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. The venue is a short walk from the station and fully accessible.</p>
<p class="small">Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. Virtual passes let you join the main stage live from anywhere.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Workshops are limited to thirty seats, so everyone gets hands-on time. Sponsors meet decision-makers in a relaxed, friendly setting. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.
Notifications
More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way. Workshops are limited to thirty seats, so everyone gets hands-on time.
Privacy
Thousands of attendees already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.
<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="Isla Duarte">
</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="Vancouver">
</div>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Sponsors meet decision-makers in a relaxed, friendly setting. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.</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">More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way. Workshops are limited to thirty seats, so everyone gets hands-on time.</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">Thousands of attendees already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Research
- Tariq DelgadoCustomer Success
- Nadia OrtegaQA Engineer
- Jonah FischerProduct Designer
Engineering
- Elena SatoSupport Specialist
- Owen VargaOperations Manager
- Kai KimHR Partner
Marketing
- Leo MorganArt Director
- Ava MensahData Analyst
- Chloe HarlowOperations Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Research</a><a class="nav-link" href="#spy-1199">Engineering</a><a class="nav-link" href="#spy-1200">Marketing</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">Research</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Tariq Delgado"><div><div class="small fw-semibold">Tariq Delgado</div><div class="small text-body-secondary">Customer Success</div></div></li>
<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="Nadia Ortega"><div><div class="small fw-semibold">Nadia Ortega</div><div class="small text-body-secondary">QA Engineer</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 Fischer"><div><div class="small fw-semibold">Jonah Fischer</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Elena Sato"><div><div class="small fw-semibold">Elena Sato</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-11.svg" class="rounded-circle" width="36" height="36" alt="Owen Varga"><div><div class="small fw-semibold">Owen Varga</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="Kai Kim"><div><div class="small fw-semibold">Kai Kim</div><div class="small text-body-secondary">HR Partner</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Leo Morgan"><div><div class="small fw-semibold">Leo Morgan</div><div class="small text-body-secondary">Art Director</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Ava Mensah"><div><div class="small fw-semibold">Ava Mensah</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-10.svg" class="rounded-circle" width="36" height="36" alt="Chloe Harlow"><div><div class="small fw-semibold">Chloe Harlow</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Panel
- Masterclass$263.99
- Virtual pass$96.00
- Group bundle$2,100
Keynote
- Masterclass$269.00
- Recording pass$63.00
- Full access pass$474.00
Webinar
- Evening meetup$23.00
- Early bird pass$320.00
- VIP pass$989.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Panel</a><a class="nav-link" href="#spy-1203">Keynote</a><a class="nav-link" href="#spy-1204">Webinar</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">Panel</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Masterclass</span><span class="fw-semibold">$263.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Virtual pass</span><span class="fw-semibold">$96.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Group bundle</span><span class="fw-semibold">$2,100</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Keynote</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Masterclass</span><span class="fw-semibold">$269.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Recording pass</span><span class="fw-semibold">$63.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Full access pass</span><span class="fw-semibold">$474.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Webinar</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Evening meetup</span><span class="fw-semibold">$23.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Early bird pass</span><span class="fw-semibold">$320.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>VIP pass</span><span class="fw-semibold">$989.00</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. Early bird tickets save you up to forty percent until the end of the month. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.
This week
We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Every attendee receives a certificate of participation. Every session is recorded, so you can catch up on anything you missed.
Later
Three days of keynotes, hands-on workshops and evening meetups. Group tickets include a private meeting room for your team. The venue is a short walk from the station and fully accessible.
<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. Early bird tickets save you up to forty percent until the end of the month. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Every attendee receives a certificate of participation. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. Group tickets include a private meeting room for your team. The venue is a short walk from the station and fully accessible.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Virtual passes let you join the main stage live from anywhere. Sponsors meet decision-makers in a relaxed, friendly setting. We measure success by how many attendees come back and tell their friends. Virtual passes let you join the main stage live from anywhere.
Orbit
Thousands of attendees already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Sponsors meet decision-makers in a relaxed, friendly setting. Three days of keynotes, hands-on workshops and evening meetups.
Landing
Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible. The networking app helps you meet the right people before you arrive.
<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">Virtual passes let you join the main stage live from anywhere. Sponsors meet decision-makers in a relaxed, friendly setting. We measure success by how many attendees come back and tell their friends. Virtual passes let you join the main stage live from anywhere.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Sponsors meet decision-makers in a relaxed, friendly setting. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible. The networking app helps you meet the right people before you arrive.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Jun 22, 2026
- NewOur team has done this many times, so you never have to guess.
- ImprovedEarly bird tickets save you up to forty percent until the end of the month.
- FixedWe listen first, then build a plan around what you actually need.
v3.1 Sep 9, 2026
- NewMore than eighty speakers share what they have learned the hard way.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedWe keep things simple, so you can focus on what matters to you.
v3.0 May 25, 2026
- NewWorkshops are limited to thirty seats, so everyone gets hands-on time.
- ImprovedStart in minutes and get help from a real person whenever you need it.
- FixedGroup tickets include a private meeting room for your team.
v2.9 Feb 18, 2026
- NewEvery session is recorded, so you can catch up on anything you missed.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedWe measure success by how many attendees come back and tell their friends.
<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">Jun 22, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Early bird tickets save you up to forty percent until the end of the month.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 9, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>More than eighty speakers share what they have learned the hard way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">May 25, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Workshops are limited to thirty seats, so everyone gets hands-on time.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Group tickets include a private meeting room for your team.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 18, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every session is recorded, so you can catch up on anything you missed.</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>We measure success by how many attendees come back and tell their friends.</li>
</ul>
</div>
</div>
</div>
</div>