A dark, poster-style music band homepage template built with Bootstrap 6 for a fictional indie band called The Velvet Static, with tour dates, album tracklists, a video grid, press quotes and a mailing list signup.
How it works
Everything lives inside .vs-page, which carries data-bs-theme="dark" and re-maps the Bootstrap 6 primary role to the brand ember orange, so every btn-solid theme-primary, badge and checkbox follows the brand.
- Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end">. Below 1024px the toggler opens the drawer; wider, the drawer becomes the inline link row. "Listen" opens a.menuwith streaming links. The script syncsaria-expandedon the toggler and closes the drawer after an in-page link. - Hero: a full-bleed concert photo (
.vs-hero-img) under a gradient, a condensed headline, two calls to action, the.vs-nextcard with the next shows and an orange.vs-tickerband. - Tour dates: each
.vs-showrow has adata-vs-daysoffset. The script adds that many days to today and writes the day and month, so the list never shows past dates. Abtn-groupofbtn-checkradios filters rows bydata-vs-regionand announces the count in a live region. - Records: the new album has a CSS-drawn cover and a numbered tracklist; older releases use a
<details>accordion (accordion-flush accordion-sm) for their tracklists. - Videos: each
.vs-videobutton opens the shared#vs-video-dialog(<dialog class="dialog dialog-lg">). The script copiesdata-vs-video-titleanddata-vs-video-srcinto the dialog first. - Press and Static Club: stat tiles, three review quotes, and a
<form data-bs-validate novalidate>that flags invalid fields with.is-invalid, simulates the request with a spinner and shows#vs-toastwithToast.getOrCreateInstance().
Customization
- Change
--vs-emberand--vs-goldin.vs-page(style.css) to rebrand; keep the--bs-primary-*overrides next to them in sync. - Edit
data-vs-dayson each.vs-showand.vs-next-dateto set how many days from today each show is. - Add rows with
data-vs-region="eu"or"na", or a radio with a new value for another region. - Replace
.vs-playerinside#vs-video-dialogwith a YouTube or Vimeo embed. - Swap the
setTimeoutin the submit handler ofscript.jsforfetch()to your mailing list endpoint. - The photos come from Unsplash; replace them with your own band and live shots.
Accessibility
A skip link jumps to #vs-main. The drawer toggler has aria-controls and an updated aria-expanded, decorative icons are aria-hidden, the CSS album covers are role="img" with labels, and filter results are announced with aria-live. Fields have labels and feedback text, the toast uses role="status", and focus rings use the brand color. The ticker animation and hover zooms stop under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will notice: btn-solid theme-primary and btn-outline theme-secondary replace per-color button classes, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is now Menu, Modal is now Dialog, the accordion is native <details>, badges use badge-subtle theme-*, and validation uses data-bs-validate. Drawer and Toast are imported as ES modules.
