Overlay

<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="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.

<View
  height="300px"
  backgroundColor="positive"
  borderRadius="large"
  overflow="hidden"
  attributes={{ style: { position: "relative" } }}
>
  <Scrim>Scrim content</Scrim>
</View>