Overlay

<View width="300px" maxWidth="100%" overflow="hidden" borderRadius="medium">
  <Overlay backgroundSlot={<Image src="/img/examples/image-retina.webp" />}>
    <Placeholder />
  </Overlay>
</View>

By default, Overlay covers the whole background area and centers its content.

<Overlay
  backgroundSlot={
    <AspectRatio ratio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" width="100%" />
    </AspectRatio>
  }
>
  Overlay content
</Overlay>

With the position property, you can control the side at which you want to render the content.

<Overlay
  position="bottom"
  backgroundSlot={
    <AspectRatio ratio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" width="100%" />
    </AspectRatio>
  }
>
  <Text variant="title-3">Image title</Text>
</Overlay>

When used without backgroundSlot, Overlay 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" } }}
>
  <Overlay>Overlay content</Overlay>
</View>