Scrollspy
Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
Our evening party is the best place to turn talks into friendships. 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. More than eighty speakers share what they have learned the hard way.
Every attendee receives a certificate of participation. 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. Friendly people answer your questions quickly, by phone, chat or email.
Details
The venue is a short walk from the station and fully accessible. Every detail is handled by people who care about getting it right. 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. Virtual passes let you join the main stage live from anywhere. We measure success by how many attendees come back and tell their friends.
Pricing
We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Every session is recorded, so you can catch up on anything you missed. The networking app helps you meet the right people before you arrive.
Every attendee receives a certificate of participation. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Group tickets include a private meeting room for your team.
<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
<a class="navbar-brand" href="#">Zeni Studio</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-4">
<h3 class="h6">Intro</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. 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. More than eighty speakers share what they have learned the hard way.</p>
<p class="small">Every attendee receives a certificate of participation. 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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1123" class="pb-4">
<h3 class="h6">Details</h3>
<p class="small">The venue is a short walk from the station and fully accessible. Every detail is handled by people who care about getting it right. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
<p class="small">We listen first, then build a plan around what you actually need. Virtual passes let you join the main stage live from anywhere. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1124" class="pb-4">
<h3 class="h6">Pricing</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. Every session is recorded, so you can catch up on anything you missed. The networking app helps you meet the right people before you arrive.</p>
<p class="small">Every attendee receives a certificate of participation. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Group tickets include a private meeting room for your team.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. We measure success by how many attendees come back and tell their friends.
Step two
Early bird tickets save you up to forty percent until the end of the month. 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.
Step three
The venue is a short walk from the station and fully accessible. We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed.
Step four
Sponsors meet decision-makers in a relaxed, friendly setting. 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. Virtual passes let you join the main stage live from anywhere.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-4">
<h3 class="h6">Step one</h3>
<p class="small">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. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1127" class="pb-4">
<h3 class="h6">Step two</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. 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.</p>
</div>
<div id="spy-1128" class="pb-4">
<h3 class="h6">Step three</h3>
<p class="small">The venue is a short walk from the station and fully accessible. We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1129" class="pb-4">
<h3 class="h6">Step four</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. 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. Virtual passes let you join the main stage live from anywhere.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Speaker management
Friendly people answer your questions quickly, by phone, chat or email. Our evening party is the best place to turn talks into friendships. Three days of keynotes, hands-on workshops and evening meetups.
Sponsorship
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. The venue is a short walk from the station and fully accessible.
Live streaming
Our evening party is the best place to turn talks into friendships. Start in minutes and get help from a real person whenever you need it. More than eighty speakers share what they have learned the hard way. Every attendee receives a certificate of participation.
Questions
Three days of keynotes, hands-on workshops and evening meetups. We keep things simple, so you can focus on what matters to you. Workshops are limited to thirty seats, so everyone gets hands-on time.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1131">Speaker management</a><a class="nav-link" href="#spy-1132">Sponsorship</a><a class="nav-link" href="#spy-1133">Live streaming</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-4">
<h3 class="h6">Speaker management</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our evening party is the best place to turn talks into friendships. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1132" class="pb-4">
<h3 class="h6">Sponsorship</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. The venue is a short walk from the station and fully accessible.</p>
</div>
<div id="spy-1133" class="pb-4">
<h3 class="h6">Live streaming</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Start in minutes and get help from a real person whenever you need it. More than eighty speakers share what they have learned the hard way. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1134" class="pb-4">
<h3 class="h6">Questions</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. We keep things simple, so you can focus on what matters to you. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
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. The networking app helps you meet the right people before you arrive. Every detail is handled by people who care about getting it right.
Install
Sponsors meet decision-makers in a relaxed, friendly setting. Early bird tickets save you up to forty percent until the end of the month. Friendly people answer your questions quickly, by phone, chat or email.
Configure
Virtual passes let you join the main stage live from anywhere. Every session is recorded, so you can catch up on anything you missed. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.
Usage
Friendly people answer your questions quickly, by phone, chat or email. More than eighty speakers share what they have learned the hard way. 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.
Examples
Workshops are limited to thirty seats, so everyone gets hands-on time. 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. Clear prices, honest advice and no surprises along the way.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-full flex-col items-stretch">
<nav class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-4">
<h3 class="h6">Getting started</h3>
<p class="small">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. The networking app helps you meet the right people before you arrive. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1137" class="pb-4">
<h3 class="h6">Install</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. Early bird tickets save you up to forty percent until the end of the month. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1138" class="pb-4">
<h3 class="h6">Configure</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Every session is recorded, so you can catch up on anything you missed. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1139" class="pb-4">
<h3 class="h6">Usage</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. More than eighty speakers share what they have learned the hard way. 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>
</div>
<div id="spy-1140" class="pb-4">
<h3 class="h6">Examples</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. 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. Clear prices, honest advice and no surprises along the 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. Virtual passes let you join the main stage live from anywhere. We listen first, then build a plan around what you actually need. Group tickets include a private meeting room for your team.
Midday
Early bird tickets save you up to forty percent until the end of the month. Every attendee receives a certificate of participation. Sponsors meet decision-makers in a relaxed, friendly setting. The venue is a short walk from the station and fully accessible.
Afternoon
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. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.
Evening
Three days of keynotes, hands-on workshops and evening meetups. 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. Workshops are limited to thirty seats, so everyone gets hands-on time.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-4">
<h3 class="h6">Morning</h3>
<p class="small">Every session is recorded, so you can catch up on anything you missed. Virtual passes let you join the main stage live from anywhere. We listen first, then build a plan around what you actually need. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1143" class="pb-4">
<h3 class="h6">Midday</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. Every attendee receives a certificate of participation. Sponsors meet decision-makers in a relaxed, friendly setting. The venue is a short walk from the station and fully accessible.</p>
</div>
<div id="spy-1144" class="pb-4">
<h3 class="h6">Afternoon</h3>
<p class="small">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. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1145" class="pb-4">
<h3 class="h6">Evening</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. 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. Workshops are limited to thirty seats, so everyone gets hands-on time.</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. Three days of keynotes, hands-on workshops and evening meetups. Sponsors meet decision-makers in a relaxed, friendly setting. Clear prices, honest advice and no surprises along the way.
Beta
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. Our evening party is the best place to turn talks into friendships.
Gamma
Every attendee receives a certificate of participation. Group tickets include a private meeting room for your team. Every detail is handled by people who care about getting it right.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="flex flex-col gap-2 small">
<a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-4">
<h3 class="h6">Alpha</h3>
<p class="small">Our team has done this many times, so you never have to guess. Three days of keynotes, hands-on workshops and evening meetups. Sponsors meet decision-makers in a relaxed, friendly setting. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1148" class="pb-4">
<h3 class="h6">Beta</h3>
<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. Our evening party is the best place to turn talks into friendships.</p>
</div>
<div id="spy-1149" class="pb-4">
<h3 class="h6">Gamma</h3>
<p class="small">Every attendee receives a certificate of participation. Group tickets include a private meeting room for your team. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Start in minutes and get help from a real person whenever you need it. The venue is a short walk from the station and fully accessible. 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.
Features
Virtual passes let you join the main stage live from anywhere. More than eighty speakers share what they have learned the hard way. We measure success by how many attendees come back and tell their friends.
Reviews
We listen first, then build a plan around what you actually need. Virtual passes let you join the main stage live from anywhere. Our evening party is the best place to turn talks into friendships.
FAQ
The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. Three days of keynotes, hands-on workshops and evening meetups.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="relative border rounded-md p-4 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-4">
<h3 class="h6">Overview</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. The venue is a short walk from the station and fully accessible. 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-1152" class="pb-4">
<h3 class="h6">Features</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. More than eighty speakers share what they have learned the hard way. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1153" class="pb-4">
<h3 class="h6">Reviews</h3>
<p class="small">We listen first, then build a plan around what you actually need. Virtual passes let you join the main stage live from anywhere. Our evening party is the best place to turn talks into friendships.</p>
</div>
<div id="spy-1154" class="pb-4">
<h3 class="h6">FAQ</h3>
<p class="small">The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. 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
Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting.
Background
We measure success by how many attendees come back and tell their friends. Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. The venue is a short walk from the station and fully accessible.
Method
Early bird tickets save you up to forty percent until the end of the month. More than eighty speakers share what they have learned the hard way. Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation.
Results
Thousands of attendees already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-4">
<h3 class="h6">Summary</h3>
<p class="small">Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
<div id="spy-1157" class="pb-4">
<h3 class="h6">Background</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. The venue is a short walk from the station and fully accessible.</p>
</div>
<div id="spy-1158" class="pb-4">
<h3 class="h6">Method</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. More than eighty speakers share what they have learned the hard way. Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1159" class="pb-4">
<h3 class="h6">Results</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first md:order-last">
<p class="small font-semibold uppercase text-muted mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-col small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. More than eighty speakers share what they have learned the hard way.
Set up your profile
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. Clear prices, honest advice and no surprises along the way. Three days of keynotes, hands-on workshops and evening meetups.
Invite the team
Sponsors meet decision-makers in a relaxed, friendly setting. Early bird tickets save you up to forty percent until the end of the month. Thousands of attendees already trust us, and we work hard to keep it that way.
Go live
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.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-4">
<h3 class="h6">Create an account</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1162" class="pb-4">
<h3 class="h6">Set up your profile</h3>
<p class="small">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. Clear prices, honest advice and no surprises along the way. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1163" class="pb-4">
<h3 class="h6">Invite the team</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. Early bird tickets save you up to forty percent until the end of the month. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1164" class="pb-4">
<h3 class="h6">Go live</h3>
<p class="small">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.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
How to choose the right ticket
Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible. Workshops are limited to thirty seats, so everyone gets hands-on time. Friendly people answer your questions quickly, by phone, chat or email.
What makes a panel worth watching
Every detail is handled by people who care about getting it right. Virtual passes let you join the main stage live from anywhere. We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed.
Announcing our first keynote speakers
The networking app helps you meet the right people before you arrive. Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. The venue is a short walk from the station and fully accessible.
What we learned from last year's feedback
We measure success by how many attendees come back and tell their friends. 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.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">How to choose the right ticket</h3>
<p class="small mb-0">Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible. Workshops are limited to thirty seats, so everyone gets hands-on time. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">What makes a panel worth watching</h3>
<p class="small mb-0">Every detail is handled by people who care about getting it right. Virtual passes let you join the main stage live from anywhere. We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Announcing our first keynote speakers</h3>
<p class="small mb-0">The networking app helps you meet the right people before you arrive. Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. The venue is a short walk from the station and fully accessible.</p>
</div>
<div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">What we learned from last year's feedback</h3>
<p class="small mb-0">We measure success by how many attendees come back and tell their friends. 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.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Our favourite tips for busy weeks?
- The networking app helps you meet the right people before you arrive.
- Looking back at a busy season?
- Group tickets include a private meeting room for your team.
- Highlights from last year's workshops?
- We keep things simple, so you can focus on what matters to you.
Shipping
- A beginner's guide to getting started?
- Thousands of attendees already trust us, and we work hard to keep it that way.
- How to get the most out of a conference?
- Three days of keynotes, hands-on workshops and evening meetups.
- Ten talks you should not miss this year?
- Friendly people answer your questions quickly, by phone, chat or email.
Returns
- Behind the scenes: building the stage?
- Early bird tickets save you up to forty percent until the end of the month.
- How to pitch a talk that gets accepted?
- Sponsors meet decision-makers in a relaxed, friendly setting.
- The small habits that make a big difference?
- Virtual passes let you join the main stage live from anywhere.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-muted">The networking app helps you meet the right people before you arrive.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-muted">Group tickets include a private meeting room for your team.</dd>
<dt class="small">Highlights from last year's workshops?</dt>
<dd class="small text-muted">We keep things simple, so you can focus on what matters to you.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-muted">Thousands of attendees already trust us, and we work hard to keep it that way.</dd>
<dt class="small">How to get the most out of a conference?</dt>
<dd class="small text-muted">Three days of keynotes, hands-on workshops and evening meetups.</dd>
<dt class="small">Ten talks you should not miss this year?</dt>
<dd class="small text-muted">Friendly people answer your questions quickly, by phone, chat or email.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Behind the scenes: building the stage?</dt>
<dd class="small text-muted">Early bird tickets save you up to forty percent until the end of the month.</dd>
<dt class="small">How to pitch a talk that gets accepted?</dt>
<dd class="small text-muted">Sponsors meet decision-makers in a relaxed, friendly setting.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-muted">Virtual passes let you join the main stage live from anywhere.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Our team has done this many times, so you never have to guess. Every attendee receives a certificate of participation. 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.
Battery
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.
Connectivity
Clear prices, honest advice and no surprises along the way. Our evening party is the best place to turn talks into friendships. Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting.
Security
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. 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.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-col">
<a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-4">
<h3 class="h6">Performance</h3>
<p class="small">Our team has done this many times, so you never have to guess. Every attendee receives a certificate of participation. 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.</p>
</div>
<div id="spy-1176" class="pb-4">
<h3 class="h6">Battery</h3>
<p class="small">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.</p>
</div>
<div id="spy-1177" class="pb-4">
<h3 class="h6">Connectivity</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Our evening party is the best place to turn talks into friendships. Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
<div id="spy-1178" class="pb-4">
<h3 class="h6">Security</h3>
<p class="small">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. 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.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$19.62 / mo
- Hands-on workshops
- Certificates
- Hands-on workshops
Team
$42.13 / mo
- Certificates
- Hands-on workshops
- Hands-on workshops
Business
$69.17 / mo
- Recorded sessions
- World-class speakers
- Hands-on workshops
<nav id="spy-nav-1179" class="nav nav-pills justify-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="relative border rounded-md p-4 bg-surface-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="text-xl font-bold mb-1">$19.62<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Hands-on workshops</li>
<li>Certificates</li>
<li>Hands-on workshops</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="text-xl font-bold mb-1">$42.13<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Certificates</li>
<li>Hands-on workshops</li>
<li>Hands-on workshops</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="text-xl font-bold mb-1">$69.17<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Recorded sessions</li>
<li>World-class speakers</li>
<li>Hands-on workshops</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: What our attendees asked us most
Start in minutes and get help from a real person whenever you need it. Thousands of attendees already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. The venue is a short walk from the station and fully accessible.
We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation. Early bird tickets save you up to forty percent until the end of the month.
Chapter 2: A guide to the city for visiting attendees
Friendly people answer your questions quickly, by phone, chat or email. Virtual passes let you join the main stage live from anywhere. Workshops are limited to thirty seats, so everyone gets hands-on time.
We listen first, then build a plan around what you actually need. 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. We listen first, then build a plan around what you actually need.
Chapter 3: Five things we learned this year
We measure success by how many attendees come back and tell their friends. The venue is a short walk from the station and fully accessible. Three days of keynotes, hands-on workshops and evening meetups. Every detail is handled by people who care about getting it right.
We keep things simple, so you can focus on what matters to you. Sponsors meet decision-makers in a relaxed, friendly setting. 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.
Chapter 4: Joining online: how the virtual pass works
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. Workshops are limited to thirty seats, so everyone gets hands-on time.
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Every attendee receives a certificate of participation. The networking app helps you meet the right people before you arrive.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-4">
<h3 class="h6">Chapter 1: What our attendees asked us most</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Thousands of attendees already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. The venue is a short walk from the station and fully accessible.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1185" class="pb-4">
<h3 class="h6">Chapter 2: A guide to the city for visiting attendees</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Virtual passes let you join the main stage live from anywhere. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
<p class="small">We listen first, then build a plan around what you actually need. 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. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1186" class="pb-4">
<h3 class="h6">Chapter 3: Five things we learned this year</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. The venue is a short walk from the station and fully accessible. Three days of keynotes, hands-on workshops and evening meetups. Every detail is handled by people who care about getting it right.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Sponsors meet decision-makers in a relaxed, friendly setting. 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-1187" class="pb-4">
<h3 class="h6">Chapter 4: Joining online: how the virtual pass works</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. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Every attendee receives a certificate of participation. The networking app helps you meet the right people before you arrive.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
More than eighty speakers share what they have learned the hard 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.
Notifications
Virtual passes let you join the main stage live from anywhere. Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive.
Privacy
Our team has done this many times, so you never have to guess. The venue is a short walk from the station and fully accessible. 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.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-4">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Lea Tanaka">
</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="Dublin">
</div>
<p class="small">More than eighty speakers share what they have learned the hard 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 id="spy-1190" class="pb-4">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">Virtual passes let you join the main stage live from anywhere. Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1191" class="pb-4">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Our team has done this many times, so you never have to guess. The venue is a short walk from the station and fully accessible. 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>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Customer Support
- Priya WhitakerContent Writer
- Lucas SilvaMarketing Lead
- Finn MorganSales Executive
Legal
- Freya WhitakerHR Partner
- Ava AlvarezSupport Specialist
- Maya TanakaFrontend Engineer
Research
- Hana SatoSales Executive
- Noah IbrahimHR Partner
- Felix HarlowProject Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Customer Support</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Research</a>
</nav>
<div class="relative border rounded-md p-4" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-4">
<h3 class="h6">Customer Support</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Priya Whitaker"><div><div class="small font-semibold">Priya Whitaker</div><div class="small text-muted">Content Writer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-full" width="36" height="36" alt="Lucas Silva"><div><div class="small font-semibold">Lucas Silva</div><div class="small text-muted">Marketing Lead</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Finn Morgan"><div><div class="small font-semibold">Finn Morgan</div><div class="small text-muted">Sales Executive</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-4">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Freya Whitaker"><div><div class="small font-semibold">Freya Whitaker</div><div class="small text-muted">HR Partner</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="36" height="36" alt="Ava Alvarez"><div><div class="small font-semibold">Ava Alvarez</div><div class="small text-muted">Support Specialist</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Maya Tanaka"><div><div class="small font-semibold">Maya Tanaka</div><div class="small text-muted">Frontend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-4">
<h3 class="h6">Research</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="36" height="36" alt="Hana Sato"><div><div class="small font-semibold">Hana Sato</div><div class="small text-muted">Sales Executive</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Noah Ibrahim"><div><div class="small font-semibold">Noah Ibrahim</div><div class="small text-muted">HR Partner</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Felix Harlow"><div><div class="small font-semibold">Felix Harlow</div><div class="small text-muted">Project Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Webinar
- Group bundle$1,950
- Speaker dinner$131.00
- Student pass$140.00
Keynote
- Recording pass$60.99
- Early bird pass$326.00
- Panel day ticket$199.00
Meetup
- Full access pass$504.00
- Speaker dinner$130.99
- Group bundle$2,050
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Webinar</a><a class="nav-link" href="#spy-1203">Keynote</a><a class="nav-link" href="#spy-1204">Meetup</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-4">
<h3 class="h6">Webinar</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Group bundle</span><span class="font-semibold">$1,950</span></li>
<li class="flex justify-between border-b py-2 small"><span>Speaker dinner</span><span class="font-semibold">$131.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Student pass</span><span class="font-semibold">$140.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-4">
<h3 class="h6">Keynote</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Recording pass</span><span class="font-semibold">$60.99</span></li>
<li class="flex justify-between border-b py-2 small"><span>Early bird pass</span><span class="font-semibold">$326.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Panel day ticket</span><span class="font-semibold">$199.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-4">
<h3 class="h6">Meetup</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Full access pass</span><span class="font-semibold">$504.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Speaker dinner</span><span class="font-semibold">$130.99</span></li>
<li class="flex justify-between border-b py-2 small"><span>Group bundle</span><span class="font-semibold">$2,050</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Group tickets include a private meeting room for your team. We measure success by how many attendees come back and tell their friends. Sponsors meet decision-makers in a relaxed, friendly setting.
This week
We listen first, then build a plan around what you actually need. Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.
Later
Start in minutes and get help from a real person whenever you need it. Early bird tickets save you up to forty percent until the end of the month. We keep things simple, so you can focus on what matters to you. Three days of keynotes, hands-on workshops and evening meetups.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="relative border rounded-md p-4 border-0 rounded-none" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-4">
<h3 class="h6">Today</h3>
<p class="small">Group tickets include a private meeting room for your team. We measure success by how many attendees come back and tell their friends. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
<div id="spy-1207" class="pb-4">
<h3 class="h6">This week</h3>
<p class="small">We listen first, then build a plan around what you actually need. Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1208" class="pb-4">
<h3 class="h6">Later</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Early bird tickets save you up to forty percent until the end of the month. We keep things simple, so you can focus on what matters to you. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation. More than eighty speakers share what they have learned the hard way. Three days of keynotes, hands-on workshops and evening meetups.
Orbit
Every session is recorded, so you can catch up on anything you missed. More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way.
Landing
We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.
<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="relative border rounded-md p-4 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-4">
<h3 class="h6">Launch</h3>
<p class="small">Every session is recorded, so you can catch up on anything you missed. Every attendee receives a certificate of participation. 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 id="spy-1211" class="pb-4">
<h3 class="h6">Orbit</h3>
<p class="small">Every session is recorded, so you can catch up on anything you missed. More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1212" class="pb-4">
<h3 class="h6">Landing</h3>
<p class="small">We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Mar 5, 2026
- NewVirtual passes let you join the main stage live from anywhere.
- ImprovedEarly bird tickets save you up to forty percent until the end of the month.
- FixedEvery attendee receives a certificate of participation.
v3.1 Mar 19, 2026
- NewSponsors meet decision-makers in a relaxed, friendly setting.
- ImprovedGroup tickets include a private meeting room for your team.
- FixedWorkshops are limited to thirty seats, so everyone gets hands-on time.
v3.0 May 14, 2026
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedThe networking app helps you meet the right people before you arrive.
- FixedEvery detail is handled by people who care about getting it right.
v2.9 Jun 15, 2026
- NewOur evening party is the best place to turn talks into friendships.
- ImprovedOur team has done this many times, so you never have to guess.
- 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-col small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-4">
<h3 class="h6">v3.2 <small class="text-muted font-normal">Mar 5, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Virtual passes let you join the main stage live from anywhere.</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>Every attendee receives a certificate of participation.</li>
</ul>
</div>
<div id="spy-1215" class="pb-4">
<h3 class="h6">v3.1 <small class="text-muted font-normal">Mar 19, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Sponsors meet decision-makers in a relaxed, friendly setting.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Group tickets include a private meeting room for your team.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Workshops are limited to thirty seats, so everyone gets hands-on time.</li>
</ul>
</div>
<div id="spy-1216" class="pb-4">
<h3 class="h6">v3.0 <small class="text-muted font-normal">May 14, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</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-primary me-1">Improved</span>The networking app helps you meet the right people before you arrive.</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 id="spy-1217" class="pb-4">
<h3 class="h6">v2.9 <small class="text-muted font-normal">Jun 15, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our evening party is the best place to turn talks into friendships.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</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>