Overview
Introduction: The Full Screen Image Hero component is a visually impactful section designed to cover the entire screen with a background image, headline, subheadline, description, and action buttons. This component is typically used as the first section on a page to immediately capture attention and set the tone for the content that follows.
Key Features:
- Full-screen background image with customizable opacity overlay for readability and aesthetic impact.
- Flexible content alignment (left, center, or right) and text alignment options.
- Supports a headline, eyebrow text, description, and multiple buttons to enhance interactivity.
- Customizable color scheme to match the website’s design, ensuring cohesive styling.
Best use cases
Examples of Effective Use:
- Ideal for homepage intros or landing pages where a strong first impression is crucial.
- Effective as a promotional banner or hero image for product launches or event announcements.
- Useful for storytelling sections, where an immersive visual and headline can draw users into the site’s content.
How NOT to use this
Common Missteps:
- Avoid using low-contrast or overly complex images that may detract from the text readability.
- Do not overload the hero with too much text or too many buttons, as it may overwhelm users and dilute the main message.
- Ensure that the content aligns with the image and overall theme of the page to maintain relevance and engagement.
FAQ, pro tips, and troubleshooting
- Pro Tip: Choose an image with sufficient contrast or apply an overlay to make the text stand out for better readability.
- Troubleshooting: If the text appears difficult to read, try adjusting the overlay opacity or choosing an image with fewer visual details.
Ideas
Suggested Combinations: This component pairs well with the “Features - Centered Image” section placed below, creating a smooth transition from the immersive hero to actionable or informative content.