Media

Media defines how EnterUI handles a stable image shell with aspect ratio, fit, rounding, and empty state, including default structure, accessible states, and token-driven styling.

#Default usage

Media

Media prevents image layout shift in cards and previews.

<div className="docs-preview-grid">
  <Media src="/enterui-logo-square.png" alt="EnterUI mark" aspectRatio={1} />
  <Media alt="Empty media placeholder" aspectRatio={1} />
</div>

#Import

import { Media } from "@froggdesign/enter-ui-react";

#Accessibility

Media forwards image props to the inner img. Provide meaningful alt text for informative images and empty alt text for decorative images.

#API

• src and alt describe the image.
• aspectRatio defaults to 16 / 9.
• fit: cover or contain.
• rounded toggles the default radius.

#Styling

Uses .eui-media classes and neutral token surfaces.