A banner is a prominent, visual or informational element on a website that draws attention to key messages, promotions, or actions. It usually appears at the top of a page, but can also be positioned in other strategic areas depending on its purpose.
The banner component has three types of media that can be used: image, video, or video with an image (one at a time).
When using an image, there will be a title, subtitle, and description fields (WYSIWYG), as well as two images (one for desktop and one for responsive devices). If only the "desktop" image is used, it will be adapted for responsive devices. Finally, a link can be added (internal or external).
The video banner lets you use videos from YouTube and Vimeo, offering optional configurations for autoplay, looping, muting, etc.
Using the video with image is similar to using just the video, but you have the option of using two images (one for desktop and one for responsive devices). If you use only the "desktop" image, it will be adapted for responsive devices. This image will be shown before the video plays.
Below under the title "Demo component" we can see the 3 variatons of the banner component:
- Banner - Image
- Banner - Video
- Banner - Video with image (an image that it's shown before the video is played)
