Full Screen Image Text Bottom Hero

#Overview

Introduction: The Full Screen Image Text Bottom Hero component displays a full-screen background image with text content positioned at the bottom. It includes an eyebrow, headline, description, and call-to-action buttons, designed to engage users with a bold visual experience while keeping the focus on key messaging at the screen’s base.

Key Features:

• Full-screen background image with adjustable overlay opacity for improved text readability.
• Content positioned at the bottom of the screen for a unique layout, drawing attention to the text without obstructing the image.
• Customizable text fields, including an eyebrow, headline, description, and buttons, providing flexibility for promotional or informational content.

Best use cases

Examples of Effective Use:

• Best for when you have a small amount of description text to go with the headline
• Ideal for landing pages or homepages, where a bold, introductory image with key information can make a memorable impact.
• Suitable for event or promotional pages where a high-contrast image and concise message can drive user action.
• Works well as an entry point for a site’s main call-to-action, guiding users naturally from visual engagement to interaction.

How NOT to use this

Common Missteps:

• This section should not be used if you have a large amount of text.
• Avoid using low-contrast images that may reduce text readability, even with an overlay.
• Do not overload the component with excessive text or buttons, as the bottom alignment benefits from a clean, concise presentation.
• Ensure the image quality is high, as a low-resolution image may detract from the professional look of the section.

FAQ, pro tips, and troubleshooting

• Pro Tip: Adjust the overlay opacity to enhance readability without sacrificing the impact of the background image.
• Troubleshooting: If text appears difficult to read, increase the overlay opacity or use a simpler background image.

Ideas

Suggested Combinations: This component pairs well with a "Features - Centered Image" or "Image Grid Portfolio" section below, creating a balanced flow from visual impact to informative content.