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.
- Scrim
- Media
- Matte
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.
Ratio
Do use one of the 4 ratios available.
Don’t use arbitrary ratios. This will introduce inconsistency and result in visually distracting layouts.
Fill type
Do choose to fill the content whenever possible. Only fit content with extreme or unusual dimensions.
Don’t fit the content if it can fill without losing detail. Don’t fill the content if it has an unusual ratio as this will crop important details.
Scrim
Do keep the scrim to maintain a consistent shape across item tiles in a collection.
Don’t override the scrim to adjust its opacity, as this will create visual inconsistency between media.
