Skip to content
Components

MediaFrame

A rounded clip frame for media (image or video). Establishes a relative overflow-hidden positioning context and clips its single child to a rounded corner - but it is a dumb box: it does NOT size or cover-fill the child. Give it one media child with size-full object-cover (identical contract to AspectRatio). Radius, size, and positioning all come from the className you pass (rounded-2xl, size-full, absolute inset-0, …) - there is no radius prop. Extracted from the product-card and editorial-card media frames; available to any composition that needs a rounded overflow-clip layer.

object-cover

Usage

import { MediaFrame, MediaFrameEmbed, MediaFrameEmbedProps, MediaFrameProps } from "@instruments/materia-ui/components/media-frame";

Best practices

  • MediaFrame is a dumb clip box - it does not size or cover-fill the child; give it one media child with size-full object-cover, like AspectRatio.

  • Set radius, size, and positioning through className (rounded-3xl, size-full, absolute inset-0) - there is no radius prop.

  • Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

  • Set edge to frame photography with an inset hairline that stays above the media; do not fake it with a border or an inset shadow on the frame, which the media hides.

  • Reach for raised only when the frame sits on the same fill as its surface; in a dense row the edge already separates it.

Props

MediaFrame

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

edgebooleanfalse

Draw an inset hairline over the media. It is painted by an overlay pseudo-element, so it sits above the media child rather than behind it (an inset shadow on the frame is hidden by any media that fills the box). Translucent dark in light mode, translucent light in dark mode. Inset edge adapted from

raisedbooleanfalse

Lift the frame slightly off the surface with one tight downward shadow.

MediaFrameEmbed

PropTypeDefaultDescription
title(required)string

Accessible name for the embedded document. Required.

sandboxstring"allow-scripts allow-same-origin"

Restrictions on the embedded document. Defaults to scripts and same-origin access only: enough for a live preview of your own pages, with no forms, pop-ups or top-level navigation. Widen it deliberately for other content.

Also exports

  • interfaceMediaFrameEmbedProps
  • interfaceMediaFrameProps

Composition

Used by

EditorialCard, ProductCard