Skip to main content

Media

The Media component renders an image, video or a color fill. It requires a relatively positioned wrapper element; it is absolutely positioned to fill its parent container. While it can be used alone, it is most often used as a sub-component of the Media components (MediaCard, MediaHero, etc.).

Examples

Color-fill Media

Image Media

image description

Video Media

Props

PropertyDescriptionType
mediaThe medium to display: color, image, or videoMediaType
priorityNextJS image property to control lazy loadingBoolean
sizesNextJS image property used in image optimizationString
classNameCustom CSS classes for styling the elementString