Media container

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.

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.

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

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.

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.

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.

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.

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.