When to use
- To create a visually engaging introduction to a page with strong imagery and key messaging.
- When you need to highlight important content, like a campaign, product, or service, right at the top of a page.
- Use the left aligned type when text-heavy content requires more focus.
- Use the center aligned type for a balanced layout, especially when additional elements (e.g., nested components) are needed.
When not to use
- Avoid using this component if the page does not have a strong visual or textual element to highlight.
- Do not use when there is minimal content or if imagery does not contribute to the purpose of the page.
- Avoid on pages where simplicity and speed are more important than visual appeal, such as utility or dashboard pages.
Placement
- Place the Hero Image Inspirational component at the top of a page for maximum visual impact.
- It should serve as a banner or introduction before the main content begins.
- Ensure there is sufficient contrast between the background image and text to maintain readability.
Accessibility
- Product teams must ensure that all images have appropriate alt text for screen readers.
- The text content, including the H1 title and any buttons, should be accessible and fully keyboard-navigable.
- Ensure that color contrast ratios meet WCAG guidelines for users with visual impairments.
- Avoid relying solely on the background image to convey critical information; key messages should be clear through text as well.