defuss-shadcn / Website / website-media
Media
Blocks for pictures, video, audio and social content: single pictures with a large view, galleries with shared controls, text beside media, native video and audio players, playlists, before / after comparisons and locally rendered social posts. Every block is CSS-only and built from the library's components and tokens.
On this page (3)
§The template
The Media blocks composed into one page - the source is the page.
§A media page
Text Media, a Media Gallery, a Video Player with transcript, a podcast Audio Player over its Playlist, a Before After slider and Social Posts - only Media blocks.
§The blocks
Gallery Item
Presents one image with a caption and enlarged-view action - the picture opens a large view in a native modal dialog.
Media Gallery
Coordinates a collection of images with shared viewing controls - switch between grid, masonry and filmstrip, and open a slideshow of every picture.
Text Media
Pairs explanatory text with an image, illustration, or video - side by side, reversed, or with the text card overlapping the picture.
Video Player
Plays one video with playback controls and captions - native controls, a WebVTT captions track, title and details, chapters or a transcript.
Audio Player
Plays one audio recording with playback controls and metadata - cover art, title, show and episode, the native player and a download link.
Playlist Item
Represents one selectable track or episode within a playlist - number, cover, title, artist and length; the selected one shows "now playing" bars.
Before After
Compares two images through aligned views or a slider - drag a divider, toggle between them, or set them side by side.
Social Post
Displays one embedded or locally rendered social post - author, text with links, media, time and engagement, as a post, a photo post or a quote.
Comments, ideas or improvements? Edit this page's source on GitHub