Utility - Gallery

Show photos, projects and results with these blocks. They take typed props with fictional content, such as photos, projects, studies, videos and items, using Unsplash photos that are already used elsewhere in the library. Images are lazy loaded and every one has alt text.

Nothing is uploaded or fetched beyond the images. The video block uses a demo clock in place of a real player, so swap in your own <video> element or embed. Motion respects the reduced motion setting.

Style One

Masonry gallery with mixed aspect ratios, category filter chips with a live count, and captions that appear on hover and on keyboard focus.

Style Two

Lightbox grid. Selecting a thumbnail opens a dialog with the full size photo, a caption, previous and next buttons and arrow key navigation.

Style Three

Portfolio grid with category tabs and counts, project cards with a year and tags, and a view project overlay on hover and focus.

Style Four

Case study cards with a wide featured card, a headline result for each customer, industry tags and a read case study link.

Style Five

Video gallery with a featured player, a playlist with duration badges and a demo play and pause with a moving progress bar. Choosing a video switches the player.

Style Six

Before and after sliders. Drag the divider or use the arrow keys, Home and End. Each slider has labels, a reset button and an accessible range input.