<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.
<Scrim backgroundSlot={ <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.
<Scrim position="bottom" backgroundSlot={ <View aspectRatio={16 / 9}> <Image src="/img/examples/image-retina.webp" width="100%" /> </View> } > <Text variant="featured-3" weight="bold"> Image title </Text> </Scrim>
When used without backgroundSlot, Scrim will become absolute positioned and take the entire width and height of the parent element.
<View height="300px" backgroundColor="positive" borderRadius="large" overflow="hidden" attributes={{ style: { position: "relative" } }} > <Scrim>Scrim content</Scrim> </View>