In general, placing textual contents above an image or video can easily lead to contrast issues. Though the
component provides a scalable background gradient to reduce the risk of low contrasts between foreground text and
background image, there still can occur issues with color contrast ratios, especially if different aspect ratios for
multiple viewport sizes are used. So, always check readability and play around with the size and weight properties
to achieve the best results.
In case a video background is used, the component checks whether reduced motion is enabled in the operating system
settings and prevents the <video autoplay loop /> attribute from working to improve accessibility & UX. In addition,
the slotted video should have no audio or is muted by <video muted />. Also keep in mind that long videos or videos in
general might increase the page load time. The video content should support the CTA instead of distracting from it. To
support screen reader users, it's recommended to define an alternative video description
<video aria-label="Some video description"" />.
Heading hierarchy
To provide more contextual HTML semantics you can use the headingTag property to change the heading parent from
default h2 to e.g. h3.
