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.