Media container
The media container displays a variety of visual content.

Discernible
Media content will draw more attention than other elements within the UI.
Common
The container is familiar no matter the context or size.
Unobtrusive
The image container is a simple container for rich visual content. The container itself doesn’t distract from the content.
The media container supports both still and animated graphics, including images, videos, GIFs, 3D assets, and Rive animations.

There are 4 container ratios available, a 1:1, 2:3, 4:5, and 16:9. Certain contexts may force one ratio. Other contexts, like a masonry grid, can use the best ratio available for the content.

Orientation
The container can be in a portrait or landscape orientation. The orientation depends on the content and its context. Some contexts may force a ratio and orientation. Others, like a masonry grid, may allow for the best orientation for the content.

Fill type
The container can either fill or fit its content. Fill is the default.

Auto-fill
The media content can be set to automatically fill the container if the source media has a ratio close to the container’s. The default tolerance is 75% of the container.

Disabled
Images used in interactive contexts can be disabled until prerequisites are met. Disabled images are desaturated and the opacity is lowered to reduce its contrast against enabled content.

Scrim
A light radial scrim is applied over images by default to define a consistent shape. The radial gradient leaves a percentage of the center clear to avoid altering key details of the image. The scrim can be toggled off and is generally not used for assets other than photography and video.

Border radius
The border radius adjusts according to the size of the container. The radius is 16px for images 80x80 and larger. Containers smaller than 80x80 use 8px.

Dark mode
The image scrim remains the same across light and dark mode. However, the matte behind the image adjusts between modes to maintain the container shape when images are set to fit.

