File Grid Gallery
Media grid of eight thumbnail tiles with type badges, filename captions, one selected tile, and a view toggle.
Media grid of eight thumbnail tiles with type badges, filename captions, one selected tile, and a view toggle.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
File Grid Gallery is the media browser in grid view, eight Placeholder thumbnail tiles in a responsive four-column layout. Each tile shows a type badge in the top-left corner (PNG, JPG, SVG, PDF, GIF, ZIP), the filename truncated in the caption below, and a tabular size. The first tile, hero-banner-v3.png at 4.6 MB, is selected with a full ring. A toolbar above carries the panel title All media, an 8 files count, and a view toggle pair (grid active, list inactive) with aria-pressed states marking which mode is on.
Files are one flat array with an optional selected flag. The ring-2 on the selected tile and the aria-pressed states together give assistive technology the complete picture without any runtime state.
Reach for this block on the media library or asset picker screen, wired to a paginated files endpoint. Replace Placeholder tiles with real thumbnails via an img tag and wire the view-toggle buttons to swap to a list layout.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace media library. Other grid shapes:
Tip: the type badge earns its overlay position, putting it inside the caption buries the signal below the fold on short tiles.