Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Discography Grid — Free Website Section Template
Music · v1.0.0 · Updated 2026-10-27 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Discography Grid — Free Album & Releases Section
Discography Grid shows your catalogue as a grid of cover art. Each release has its cover, title, type, year and a listen link, and a vinyl record slides out from behind the cover on hover. Filter chips are built from the release types you write (Album, EP, Single, Live), so visitors can narrow the catalogue in one tap.
A catalogue that is easy to browse
Square covers sit in a responsive grid that fits two columns on a phone and four or more on a wide screen. Hover or keyboard focus on a card makes the vinyl slide out and spin a little, which signals that the card is clickable. On touch screens the record is shown half out all the time, because there is no hover.
Every setting and option
Heading group: eyebrow, heading with brand-coloured words and intro text, which you can switch off. Filter chips: on or off, with the label of the "show all" chip. The other chips come from the types you enter, in order of first use. Vinyl on hover: on or off. Releases (2 to 24): each has cover art, alt text, a type, a title, a year, extra info (such as "11 tracks" or "3:42"), link text and a link. Theme: colours, fonts, corner radius, content width and the text, spacing and gap scales.
Good for fans and for search
Every release is a real link with a real title, year and type in the HTML, whether or not the visitor uses the chips. Without JavaScript every release is simply shown, and with reduced motion the vinyl stays still.
Part of a complete music website
Show it after the Audio Player & Track List and the New Release Spotlight, or put the covers in the 3D Scroll Carousel for a showcase. The Music Artist & Band Website template uses both.
Getting the most from it
Use square covers of the same size, about 1000 by 1000 pixels, and write alt text that describes the cover. List the newest release first, keep types consistent (always "Single", not "single" and "Singles") so the chips stay tidy, and link each card to the release's own page or streaming link rather than to your profile.
Why use it
Why Use the Discography Grid
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading, releases and filters in the panel. Switch the heading and filters on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
In real websites
Website Templates That Use the Discography Grid Section
The Discography Grid section is part of 1 complete website template in the free Website Builder, so you can see it in a full page before you use it on its own: Music Artist & Band Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.
Got questions?
Frequently Asked Questions
They are built automatically from the type you enter for each release. If you use Album, EP, Single and Live you get those four chips plus the All chip, whose label you can change.
Yes. There is a switch for the vinyl in the settings. With it off, the covers still lift slightly on hover. Visitors who prefer reduced motion do not see the sliding animation.
Square images around 1000 by 1000 pixels. They are shown in a square frame, so non-square images are cropped. Add alt text that describes the cover for screen readers.
Every release is shown and every card is a normal link. JavaScript only adds the filter chips on top, which keeps the page fast on slow connections and makes the whole catalogue readable by search engines and AI assistants.
It saves an editable copy of your Discography Grid in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.