shadcn.io is not affiliated with official shadcn/ui
Featured Release Footer Block for Vue
A record-label footer with a featured release, a drawn cover, a short equalizer and listen links beside two columns.
Installation
Overview
A record-label footer for Vue with Ark UI, for Vespermoor. An even split: the start half is the wordmark, one sentence and the featured release. The release is a drawn cover in a frame, the title and the artist, a three-bar equalizer that plays a short loop and then rests, and three listen links: Streaming, Download and Vinyl. The end half holds two link columns in a nav labelled Footer. The divider runs from the top rule to the end of the page, and the legal band continues it. It's built from Guides, a drawn cover and plain links.
FAQ
How do I change the featured release?
The title and the artist are the caption text ("Salt glass", "Lark Pell"). LISTEN is the three links under the cover. GROUPS and LEGAL are the columns and the policies. Point each href at its page.
Why don't the listen links name a platform?
The links say Streaming, Download and Vinyl, so the footer stays useful whatever the label uses this month. The icon set has no brand marks. To name a service, change the label in LISTEN and keep the link's text as its accessible name.
Does the equalizer keep moving?
No. Each bar bounces four times, at 0.8 seconds a bounce, and the last bar starts a fraction later, so the motion ends in under four seconds and then rests. When the visitor has asked for reduced motion, the bars stay still. The bars are hidden from assistive technology; the title and the artist are the caption.
Can I use a real cover instead of the drawing?
Yes. Cover is one svg of a disc and its grooves, in the theme's foreground and muted tones. Replace that svg with an img of the sleeve, keep the frame around it, and give the image a text alternative. Leave the svg as one component: splitting the shapes into nested components breaks the ports.
How does it fit on a phone?
The wordmark, the sentence and the release come first, then a rule, then the two columns, then the legal row. From lg the release sits beside the columns and the divider runs through the legal band. The cover is a small square, so the row stays short. Nothing scrolls sideways at 320 pixels.