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
We measure success by how many attendees come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Sponsors meet decision-makers in a relaxed, friendly setting.
We listen first, then build a plan around what you actually need. 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.
Details
More than eighty speakers share what they have learned the hard way. 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. Virtual passes let you join the main stage live from anywhere.
Group tickets include a private meeting room for your team. Every session is recorded, so you can catch up on anything you missed. Three days of keynotes, hands-on workshops and evening meetups.
Pricing
Workshops are limited to thirty seats, so everyone gets hands-on time. Early bird tickets save you up to forty percent until the end of the month. Every attendee receives a certificate of participation.
Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Solais Labs</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
<p class="small">We listen first, then build a plan around what you actually need. 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>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">More than eighty speakers share what they have learned the hard way. 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. Virtual passes let you join the main stage live from anywhere.</p>
<p class="small">Group tickets include a private meeting room for your team. Every session is recorded, so you can catch up on anything you missed. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Early bird tickets save you up to forty percent until the end of the month. Every attendee receives a certificate of participation.</p>
<p class="small">Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. Virtual passes let you join the main stage live from anywhere. More than eighty speakers share what they have learned the hard way.
Step two
Clear prices, honest advice and no surprises along the way. 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.
Step three
We listen first, then build a plan around what you actually need. Sponsors meet decision-makers in a relaxed, friendly setting. Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive.
Step four
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. The venue is a short walk from the station and fully accessible. 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">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. Virtual passes let you join the main stage live from anywhere. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We listen first, then build a plan around what you actually need. Sponsors meet decision-makers in a relaxed, friendly setting. 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-1129" class="pb-3">
<h3 class="h6">Step four</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. The venue is a short walk from the station and fully accessible. 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
Workshops are limited to thirty seats, so everyone gets hands-on time. We measure success by how many attendees come back and tell their friends. 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.
Speaker management
Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way.
Sponsorship
We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team.
Questions
Every session is recorded, so you can catch up on anything you missed. Virtual passes let you join the main stage live from anywhere. 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-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Venue booking</a><a class="nav-link" href="#spy-1132">Speaker management</a><a class="nav-link" href="#spy-1133">Sponsorship</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">Workshops are limited to thirty seats, so everyone gets hands-on time. We measure success by how many attendees come back and tell their friends. 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.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Speaker management</h3>
<p class="small">Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Sponsorship</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</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. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Three days of keynotes, hands-on workshops and evening meetups. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.
Install
Clear prices, honest advice and no surprises along the way. Sponsors meet decision-makers in a relaxed, friendly setting. 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.
Configure
Our evening party is the best place to turn talks into friendships. Every attendee receives a certificate of participation. 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.
Usage
We listen first, then build a plan around what you actually need. The networking app helps you meet the right people before you arrive. We keep things simple, so you can focus on what matters to you.
Examples
Start in minutes and get help from a real person whenever you need it. Sponsors meet decision-makers in a relaxed, friendly setting. Group tickets include a private meeting room for your team. More than eighty speakers share what they have learned the hard 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">Three days of keynotes, hands-on workshops and evening meetups. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Sponsors meet decision-makers in a relaxed, friendly setting. 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.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Every attendee receives a certificate of participation. 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.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">We listen first, then build a plan around what you actually need. The networking app helps you meet the right people before you arrive. 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">Start in minutes and get help from a real person whenever you need it. Sponsors meet decision-makers in a relaxed, friendly setting. Group tickets include a private meeting room for your team. More than eighty speakers share what they have learned the hard way.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Workshops are limited to thirty seats, so everyone gets hands-on time. Friendly people answer your questions quickly, by phone, chat or email. Every session is recorded, so you can catch up on anything you missed.
Midday
Three days of keynotes, hands-on workshops and evening meetups. The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. Early bird tickets save you up to forty percent until the end of the month.
Afternoon
Thousands of attendees already trust us, and we work hard to keep it that way. Every attendee receives a certificate of participation. Our team has done this many times, so you never have to guess.
Evening
Every detail is handled by people who care about getting it right. The venue is a short walk from the station and fully accessible. 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-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">Workshops are limited to thirty seats, so everyone gets hands-on time. Friendly people answer your questions quickly, by phone, chat or email. Every session is recorded, so you can catch up on anything you missed.</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. The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. Every attendee receives a certificate of participation. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</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. Our evening party is the best place to turn talks into friendships.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Virtual passes let you join the main stage live from anywhere. We measure success by how many attendees come back and tell their friends. Clear prices, honest advice and no surprises along the way.
Beta
Every session is recorded, so you can catch up on anything you missed. Virtual passes let you join the main stage live from anywhere. More than eighty speakers share what they have learned the hard way.
Gamma
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.
<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">Virtual passes let you join the main stage live from anywhere. We measure success by how many attendees come back and tell their friends. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</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. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</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.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Our evening party is the best place to turn talks into friendships. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.
Features
Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way. Three days of keynotes, hands-on workshops and evening meetups.
Reviews
Every attendee receives a certificate of participation. Workshops are limited to thirty seats, so everyone gets hands-on time. We measure success by how many attendees come back and tell their friends. Sponsors meet decision-makers in a relaxed, friendly setting.
FAQ
The venue is a short walk from the station and fully accessible. The networking app helps you meet the right people before you arrive. Friendly people answer your questions quickly, by phone, chat or email.
<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">Our evening party is the best place to turn talks into friendships. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Every attendee receives a certificate of participation. Workshops are limited to thirty seats, so everyone gets hands-on time. 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-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">The venue is a short walk from the station and fully accessible. The networking app helps you meet the right people before you arrive. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Clear prices, honest advice and no surprises along the way. 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.
Background
Every attendee receives a certificate of participation. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.
Method
The networking app helps you meet the right people before you arrive. Group tickets include a private meeting room for your team. 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.
Results
The venue is a short walk from the station and fully accessible. 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. 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">Clear prices, honest advice and no surprises along the way. 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.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Every attendee receives a certificate of participation. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">The networking app helps you meet the right people before you arrive. Group tickets include a private meeting room for your team. 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.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">The venue is a short walk from the station and fully accessible. 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. 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
Sponsors meet decision-makers in a relaxed, friendly setting. Every detail is handled by people who care about getting it right. Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups.
Set up your profile
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. More than eighty speakers share what they have learned the hard way.
Invite the team
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. The venue is a short walk from the station and fully accessible. Early bird tickets save you up to forty percent until the end of the month.
Go live
Workshops are limited to thirty seats, so everyone gets hands-on time. Our team has done this many times, so you never have to guess. Sponsors meet decision-makers in a relaxed, friendly setting.
<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">Sponsors meet decision-makers in a relaxed, friendly setting. Every detail is handled by people who care about getting it right. Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. The venue is a short walk from the station and fully accessible. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Our team has done this many times, so you never have to guess. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Looking back at a busy season
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. Every detail is handled by people who care about getting it right. Group tickets include a private meeting room for your team.
Highlights from last year's workshops
We measure success by how many attendees come back and tell their friends. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Three days of keynotes, hands-on workshops and evening meetups.
Our favourite tips for busy weeks
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. Virtual passes let you join the main stage live from anywhere. The networking app helps you meet the right people before you arrive.
Announcing our first keynote speakers
Every attendee receives a certificate of participation. We listen first, then build a plan around what you actually need. Our evening party is the best place to turn talks into friendships. Friendly people answer your questions quickly, by phone, chat or email.
<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">Looking back at a busy season</h3>
<p class="small mb-0">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. Every detail is handled by people who care about getting it right. Group tickets include a private meeting room for your team.</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">Highlights from last year's workshops</h3>
<p class="small mb-0">We measure success by how many attendees come back and tell their friends. We keep things simple, so you can focus on what matters to you. 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-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">Our favourite tips for busy weeks</h3>
<p class="small mb-0">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. Virtual passes let you join the main stage live from anywhere. The networking app helps you meet the right people before you arrive.</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">Announcing our first keynote speakers</h3>
<p class="small mb-0">Every attendee receives a certificate of participation. We listen first, then build a plan around what you actually need. Our evening party is the best place to turn talks into friendships. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- What makes a panel worth watching?
- Clear prices, honest advice and no surprises along the way.
- How to get the most out of a conference?
- Early bird tickets save you up to forty percent until the end of the month.
- The small habits that make a big difference?
- More than eighty speakers share what they have learned the hard way.
Shipping
- Ten talks you should not miss this year?
- Start in minutes and get help from a real person whenever you need it.
- Joining online: how the virtual pass works?
- Sponsors meet decision-makers in a relaxed, friendly setting.
- How to pitch a talk that gets accepted?
- Every session is recorded, so you can catch up on anything you missed.
Returns
- A guide to the city for visiting attendees?
- Every detail is handled by people who care about getting it right.
- What our attendees asked us most?
- Workshops are limited to thirty seats, so everyone gets hands-on time.
- How to choose the right ticket?
- We measure success by how many attendees come back and tell their friends.
<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">What makes a panel worth watching?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
<dt class="small">How to get the most out of a conference?</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">The small habits that make a big difference?</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-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Ten talks you should not miss this year?</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">Joining online: how the virtual pass works?</dt>
<dd class="small text-body-secondary">Sponsors meet decision-makers in a relaxed, friendly setting.</dd>
<dt class="small">How to pitch a talk that gets accepted?</dt>
<dd class="small text-body-secondary">Every session is recorded, so you can catch up on anything you missed.</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 guide to the city for visiting attendees?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
<dt class="small">What our attendees asked us most?</dt>
<dd class="small text-body-secondary">Workshops are limited to thirty seats, so everyone gets hands-on time.</dd>
<dt class="small">How to choose the right ticket?</dt>
<dd class="small text-body-secondary">We measure success by how many attendees come back and tell their friends.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups. 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.
Battery
Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships. Group tickets include a private meeting room for your team. Our team has done this many times, so you never have to guess.
Connectivity
The venue is a short walk from the station and fully accessible. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.
Security
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. 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-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">Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups. 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.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships. Group tickets include a private meeting room for your team. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">The venue is a short walk from the station and fully accessible. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</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. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$17.80 / mo
- Recorded sessions
- World-class speakers
- Hands-on workshops
Team
$37.30 / mo
- Hands-on workshops
- Networking lounges
- Networking lounges
Business
$55.76 / 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">$17.80<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>Hands-on workshops</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$37.30<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Hands-on workshops</li>
<li>Networking lounges</li>
<li>Networking lounges</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">$55.76<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: What we learned from last year's feedback
We keep things simple, so you can focus on what matters to you. 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. Every attendee receives a certificate of participation.
Thousands of attendees already trust us, and we work hard to keep it that way. The venue is a short walk from the station and fully accessible. Virtual passes let you join the main stage live from anywhere.
Chapter 2: A beginner's guide to getting started
Our evening party is the best place to turn talks into friendships. 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.
Friendly people answer your questions quickly, by phone, chat or email. 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. Group tickets include a private meeting room for your team.
Chapter 3: Five things we learned this year
Sponsors meet decision-makers in a relaxed, friendly setting. Every session is recorded, so you can catch up on anything you missed. Three days of keynotes, hands-on workshops and evening meetups.
We listen first, then build a plan around what you actually need. The networking app helps you meet the right people before you arrive. Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team.
Chapter 4: Behind the scenes: building the stage
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. 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. The networking app helps you meet the right people before you arrive. Every attendee receives a certificate of participation.
<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: What we learned from last year's feedback</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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. Every attendee receives a certificate of participation.</p>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. The venue is a short walk from the station and fully accessible. Virtual passes let you join the main stage live from anywhere.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: A beginner's guide to getting started</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. 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.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Five things we learned this year</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. Every session is recorded, so you can catch up on anything you missed. Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="small">We listen first, then build a plan around what you actually need. The networking app helps you meet the right people before you arrive. Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Behind the scenes: building the stage</h3>
<p class="small">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. Early bird tickets save you up to forty percent until the end of the month.</p>
<p class="small">We listen first, then build a plan around what you actually need. The networking app helps you meet the right people before you arrive. Every attendee receives a certificate of participation.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Three days of keynotes, hands-on workshops and evening meetups. 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.
Notifications
Thousands of attendees already trust us, and we work hard to keep it that way. Virtual passes let you join the main stage live from anywhere. Clear prices, honest advice and no surprises along the way. Every session is recorded, so you can catch up on anything you missed.
Privacy
Workshops are limited to thirty seats, so everyone gets hands-on time. 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. Sponsors meet decision-makers in a relaxed, friendly setting.
<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="Amara Carter">
</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="Oslo">
</div>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. 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.</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">Thousands of attendees already trust us, and we work hard to keep it that way. Virtual passes let you join the main stage live from anywhere. Clear prices, honest advice and no surprises along the way. Every session is recorded, so you can catch up on anything you missed.</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">Workshops are limited to thirty seats, so everyone gets hands-on time. 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. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Finance
- Mia DuarteProject Manager
- Amara PatelBackend Engineer
- Ravi OrtegaArt Director
Research
- Jonah AshfordProject Manager
- Noah MoreauData Analyst
- Samir FischerFinance Lead
Customer Support
- Luna QuinnProject Manager
- Ruby WhitakerSupport Specialist
- Lea TanakaArt Director
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Research</a><a class="nav-link" href="#spy-1200">Customer Support</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Mia Duarte"><div><div class="small fw-semibold">Mia Duarte</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Amara Patel"><div><div class="small fw-semibold">Amara Patel</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Ravi Ortega"><div><div class="small fw-semibold">Ravi Ortega</div><div class="small text-body-secondary">Art Director</div></div></li>
</ul>
</div>
<div id="spy-1199" 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-7.svg" class="rounded-circle" width="36" height="36" alt="Jonah Ashford"><div><div class="small fw-semibold">Jonah Ashford</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Noah Moreau"><div><div class="small fw-semibold">Noah Moreau</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-5.svg" class="rounded-circle" width="36" height="36" alt="Samir Fischer"><div><div class="small fw-semibold">Samir Fischer</div><div class="small text-body-secondary">Finance Lead</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Customer Support</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Luna Quinn"><div><div class="small fw-semibold">Luna Quinn</div><div class="small text-body-secondary">Project Manager</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="Ruby Whitaker"><div><div class="small fw-semibold">Ruby Whitaker</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-3.svg" class="rounded-circle" width="36" height="36" alt="Lea Tanaka"><div><div class="small fw-semibold">Lea Tanaka</div><div class="small text-body-secondary">Art Director</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Panel
- Workshop ticket$156.00
- Early bird pass$308.00
- Speaker dinner$116.00
Meetup
- Group bundle$2,050
- Speaker dinner$117.99
- Student pass$133.99
Workshop
- VIP pass$989.00
- Group bundle$2,050
- Panel day ticket$180.99
<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">Meetup</a><a class="nav-link" href="#spy-1204">Workshop</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>Workshop ticket</span><span class="fw-semibold">$156.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Early bird pass</span><span class="fw-semibold">$308.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Speaker dinner</span><span class="fw-semibold">$116.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Meetup</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Group bundle</span><span class="fw-semibold">$2,050</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Speaker dinner</span><span class="fw-semibold">$117.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Student pass</span><span class="fw-semibold">$133.99</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Workshop</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>VIP pass</span><span class="fw-semibold">$989.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Group bundle</span><span class="fw-semibold">$2,050</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Panel day ticket</span><span class="fw-semibold">$180.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Friendly people answer your questions quickly, by phone, chat or email. Our evening party is the best place to turn talks into friendships. We listen first, then build a plan around what you actually need.
This week
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. Our team has done this many times, so you never have to guess.
Later
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. Thousands of attendees already trust us, and we work hard to keep it that way. Every attendee receives a certificate of participation.
<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. 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-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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. Thousands of attendees already trust us, and we work hard to keep it that way. Every attendee receives a certificate of participation.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
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. The venue is a short walk from the station and fully accessible.
Orbit
We keep things simple, so you can focus on what matters to you. More than eighty speakers share what they have learned the hard way. Three days of keynotes, hands-on workshops and evening meetups.
Landing
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting.
<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">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. The venue is a short walk from the station and fully accessible.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Group tickets include a private meeting room for your team. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 May 3, 2026
- NewThe networking app helps you meet the right people before you arrive.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedThe networking app helps you meet the right people before you arrive.
v3.1 Dec 27, 2025
- NewOur evening party is the best place to turn talks into friendships.
- ImprovedWe listen first, then build a plan around what you actually need.
- FixedOur team has done this many times, so you never have to guess.
v3.0 Dec 5, 2025
- NewThousands of attendees already trust us, and we work hard to keep it that way.
- ImprovedWorkshops are limited to thirty seats, so everyone gets hands-on time.
- FixedEarly bird tickets save you up to forty percent until the end of the month.
v2.9 Jun 12, 2026
- NewEvery detail is handled by people who care about getting it right.
- ImprovedThe venue is a short walk from the station and fully accessible.
- FixedVirtual passes let you join the main stage live from anywhere.
<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">May 3, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>The networking app helps you meet the right people before you arrive.</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>The networking app helps you meet the right people before you arrive.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Dec 27, 2025</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>We listen first, then build a plan around what you actually need.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Dec 5, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of attendees already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Workshops are limited to thirty seats, so everyone gets hands-on time.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Early bird tickets save you up to forty percent until the end of the month.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jun 12, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The venue is a short walk from the station and fully accessible.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Virtual passes let you join the main stage live from anywhere.</li>
</ul>
</div>
</div>
</div>
</div>