A warm, light podcast homepage template built with Bootstrap 6 for a fictional weekly show called The Long Question, with a cover-art hero, a working episode player, a searchable episode archive, hosts, listener reviews, subscribe links and an FAQ.
How it works
The page lives inside .lq-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role to forest green and the accent role to tangerine, so buttons, chips, the switch and the range all use the brand colors.
- Navbar: a rounded floating bar (
.lq-nav-bar) onnavbar lg:navbar-expand. Below 1024px the toggler opens a<dialog class="drawer drawer-start">; the script keepsaria-expandedin sync and closes the drawer after a link is chosen. - Hero: serif headline, platform buttons (
btn-solid/btn-outline theme-primary), anavatar-stackwith the rating, and.lq-stage: a CSS-drawn cover (.lq-cover) with the.lq-playercard on top. - Player: simulated, no audio file. The play button toggles a one-second timer that moves the Bootstrap 6 Range (
.form-rangewith.form-range-input). Skip buttons usedata-lq-skip, and a.menusets the speed fromdata-lq-rate. Status changes go to a polite live region. - Episodes: each
.lq-episodestoresdata-lq-topic,data-lq-numberanddata-lq-length(seconds). Its play button loads it into the player. Topic.chipbuttons and aform-adornsearch field filter the list, and[data-lq-empty]appears when nothing matches. Release dates come fromdata-lq-days-ago, counted back from today, so they never go stale. - Hosts, reviews, subscribe, FAQ: portrait cards, a studio photo tile, review figures with
avatarinitials, a<form data-bs-validate novalidate>with aswitch, and an exclusive<details name="lq-faq">accordion. On a valid submit the script shows a spinner, simulates the request and opens.lq-toastwithToast.getOrCreateInstance().
Customization
- Change
--lq-greenand--lq-orangein.lq-page(style.css) and the matching--bs-primary-*/--bs-accent-*overrides to rebrand. - Add episodes by copying an
.lq-episodeand settingdata-lq-topic,data-lq-number,data-lq-lengthanddata-lq-days-ago. - Add a topic by adding a chip with a new
data-lq-topicvalue to.lq-topics. - To play real audio, replace the timer in
setPlaying()with an<audio>element and update the range from itstimeupdateevent. - Replace the
setTimeoutin the form submit handler withfetch()to your newsletter provider. - The portraits and studio photo come from Unsplash; replace them with photos of your own hosts.
Accessibility
A skip link targets #lq-main. The play button exposes aria-pressed and a changing label, the seek range has aria-valuetext, the topic chips use aria-pressed, and filter results and player changes are announced through aria-live. The cover art is a single role="img" with a label, decorative icons are hidden, and focus outlines use the accent color. Hover lifts are disabled under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Coming from Bootstrap 5: the Drawer replaces navbar-collapse/Offcanvas, .menu replaces Dropdown, btn-solid theme-primary replaces btn-primary, the Range wrapper replaces form-range on the input, .switch replaces form-switch, accordions are native <details>, and data-bs-validate replaces needs-validation. Chips and form-adorn are new in Bootstrap 6.
