Search blocks by description or jump to a page.
Media grid of eight thumbnail tiles with type badges, filename captions, one selected tile, and a view toggle.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? 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.