Hero Banners
Hero Banners are used to display the top section of a website or application.
Overview
Hero banners are prominent visual elements typically placed at the top of a webpage, designed to capture visitors' attention and convey key messages or content.
We have two types of hero banners available in our design system:
- Hero banners with static background images
- Hero banners featuring background videos
Both types of hero banners serve to create a strong first impression, highlight important information, and set the tone for the rest of the page.
Usage
The hero banner component uses a background image for its visual impact. This image is set as the background of the main container div with the class .hero-banner.
The background image is directly applied to this div using inline CSS. This approach allows for easy customization of the banner's appearance while maintaining a consistent structure.
Banner with video
For a more dynamic and engaging hero banner, you can use a video background. This option adds movement and visual interest to your banner, potentially increasing user engagement.
When using a video background, the image is still utilized as a fallback or poster image, ensuring that there's always visual content displayed, even if the video fails to load or play.