Hero V06

Author: Colorlib
Released: September 2026
License: CC BY 3.0
A product hero for an online audio shop, pairing a large product photo with the headline, rating, sale price, description and buying options. Three colour swatches are native radio buttons, so arrow keys work, and choosing one swaps the photo, its alt text, the colour label and the stock line with a short cross-fade. It also includes a wishlist toggle, spec badges over the photo and shipping perks.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 342 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Colour swatches built on native radios with keyboard support
- Photo, alt text and stock status update together
- Stock changes announced through an aria-live region
- Wishlist toggle using aria-pressed
- Spec badges move under the photo on phones

