Bottom Image Hero

#Overview

Introduction:
The Bottom Image Hero is a visually striking section designed to feature key messaging with a supporting image below. It combines a hero-style heading with an impactful image, creating a dynamic focal point for landing pages or key content sections.

Key Features:

• Hero Heading: Eye-catching headline with optional eyebrow and description text.
• Dynamic Backgrounds: Top and bottom background color options for seamless design integration.
• Supporting Benefits: Includes a list of supporting benefits or features.
• Full-Width Image: A visually impactful image positioned below the content.

Best use cases

Examples of Effective Use:

• Highlighting a product, service, or event with a bold visual.
• Landing pages with a need for strong visual engagement.
• Key messaging or announcements, paired with an attention-grabbing image.

How NOT to use this

Common Missteps:

• Avoid using low-quality or irrelevant images, as they can detract from the overall impact.
• Don’t overcrowd the benefits section with too many points; focus on concise, high-impact messaging.
• Ensure the text and image contrast well with the background colors for readability.

FAQ, pro tips, and troubleshooting

Pro Tip:

• In the styles section you'll see two colors. The bottom color should match the background color of the section right after the hero.
• This section works best with landscape style images.

Troubleshooting: Images have max height equal to the size of this screen. Portrait style images may look cut off at large screen sizes because of this. Play around with the y axis position if you see this happen with your portrait image.

Ideas

Suggested Combinations:

• Review Cards: Use beneath to add social proof after the main message.