Media Asset Card
Selectable media or file card with grid, list, and responsive orientations.
When To Use
- Use Media Asset Card 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
name, src, alt, meta, details, actions
Example Code
import { MediaAssetCard } from "@hilum/ui"
<MediaAssetCard
name="campaign-cover.png"
src={coverImage}
meta="PNG - 1.2 MB"
details="Used by the summer campaign landing page."
selected
/>Grid
Image asset
Use grid orientation for libraries, pickers, and asset browsing.
campaign-cover.png
PNG - 1.2 MB
Used by the summer campaign landing page.
List
File row
Use list orientation inside compact media panels and upload summaries.
brand-guidelines.pdf
PDF - 842 KB
Shared with all storefront editors.