<View width="300px" maxWidth="100%" overflow="hidden" borderRadius="medium"><Scrim backgroundSlot={<Image src="/img/examples/image-retina.webp" />}><View backgroundColor="neutral-faded" height={10} /></Scrim></View>
By default, Scrim covers the whole background area and centers its content.
<ScrimbackgroundSlot={<View aspectRatio={16 / 9}><Image src="/img/examples/image-retina.webp" width="100%" /></View>}>Scrim content</Scrim>
With the position property, you can control the side at which you want to render the content.
<Scrimposition="bottom"backgroundSlot={<View aspectRatio={16 / 9}><Image src="/img/examples/image-retina.webp" width="100%" /></View>}><Text variant="title-3">Image title</Text></Scrim>
When used without backgroundSlot, Scrim will become absolute positioned and take the entire width and height of the parent element.
<Viewheight="300px"backgroundColor="positive"borderRadius="large"overflow="hidden"attributes={{ style: { position: "relative" } }}><Scrim>Scrim content</Scrim></View>