Media Library Grid
Asset browser grid with filename, type badge, and size captions, plus a toolbar with search, filter, view toggle, and upload.
Asset browser grid with filename, type badge, and size captions, plus a toolbar with search, filter, view toggle, and upload.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Media Library Grid is the primary asset browser: nine tiles arranged in a responsive grid, each showing a Placeholder preview, a truncated filename like hero-shot.jpg or product-demo.mp4, a type badge (Image, Video, Archive, Document, Data), and a size caption. The toolbar above pairs a search input and Filter button on the left with a grid/list view toggle and an Upload button on the right, and a muted count line reads 9 assets.
Assets are one flat array with id, name, type, and size. The view toggle uses aria-pressed so keyboard and screen-reader users know which layout is active.
Reach for this block as the main media-picker or library page, wired to your assets endpoint and paginated as the library grows. Connect the Upload button to your file-input handler.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace media library. Other grid configurations:
Tip: keep the asset count visible at all times; it tells uploaders whether a filter is hiding items or the library is genuinely empty.