Media Asset Grid
Responsive media asset container that keeps compact divided rows on mobile and switches to a grid on larger screens.
When To Use
- Use Media Asset Grid when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
columns, children
Key exports
MediaAssetGrid, MediaAssetGridItem
Responsive
Media library
Use with MediaAssetCard for asset libraries, media pickers, and product image managers.
'/%3E%3Ccircle cx='305' cy='94' r='54' fill='white' fill-opacity='.55'/%3E%3Cpath d='M55 315 168 180l75 88 38-44 68 91z' fill='white' fill-opacity='.8'/%3E%3C/svg%3E)
campaign-cover.png
PNG - 1.2 MB
lookbook.jpg
JPG - 840 KB
brand-guidelines.pdf
PDF - 420 KB
product-feed.csv
CSV - 18 KB