Banner Image Hero

#Overview

The Banner Image Hero component is a large, visually impactful section designed to appear at the top of a page. It displays a full-width background image with an dark overlay effect, accompanied by a prominent headline and optional buttons for calls to action. This section is commonly used for supporting pages.

The component includes customizable overlay opacity, content alignment, and color settings. It’s optimized for high-quality images, making it versatile for a wide range of page types and styles.

Best use cases

Examples of Effective Use:

• Ideal for supporting pages (such as the contact, services, about us) where your business wants to showcase a hero image that captures attention instantly, but isn't over the top.
• Useful for product or service landing pages where visual appeal and a strong call to action are needed.
• Effective as a lead-in section for content-heavy pages, creating an engaging entry point.

How NOT to use this

Common Missteps:

• We DO NOT recommend using this for the homepage. This is better used in supporting pages where the hero section is less important
• Avoid using low-resolution images, as they may appear pixelated or stretched in full-width mode.
• Avoid adding too much text or too many buttons, which can clutter the design and detract from the main message.
• Ensure that the text and button colors contrast with the background image to maintain readability.

FAQ, pro tips, and troubleshooting

• Pro Tip: Use high-contrast colors or select images that naturally contrast with your text to ensure the headline and buttons remain readable.
• Troubleshooting: If the overlay opacity seems too light or too dark, adjust the background opacity setting to improve text visibility without overpowering the image.

Suggestions

If you aren't sure what type of hero to select for a page, this is a good starting point