The Hero Component creates bold, full-width introductions for your brand guide. Combining backgrounds, typography, logos, and optional actions, it helps establish the tone of a page while drawing attention to the content that follows.
Whether you're welcoming visitors, introducing a section, or highlighting an important message, the Hero Component provides a flexible foundation for creating memorable first impressions.
The Hero Component is ideal for:
Because it appears at the top of a page, the Hero Component is often the first thing visitors see.
Choose the visual foundation for your hero section.
Use a solid background color for a clean, minimal presentation.
Solid backgrounds work especially well when typography and branding are the primary focus.
Select an image from your brand's media library to create a visually engaging hero.
Image backgrounds support optional overlays that improve text readability while preserving the impact of your photography.
Use a video background to add motion and energy to your page.
Video backgrounds support:
Because modern browsers typically require autoplaying videos to be muted, these settings are designed to work together for the best viewing experience.
Apply an optional color overlay to image and video backgrounds.
Adjusting the overlay color and opacity helps improve contrast, ensuring headlines and supporting text remain easy to read regardless of the background.
Build the messaging that appears within your hero.
Display a logo or brand mark above the main heading.
This is ideal for reinforcing brand identity or introducing a specific campaign or product.
Use a concise, attention-grabbing headline to introduce the page or communicate your primary message.
Expand on your headline with supporting text that provides additional context or direction.
Optionally display a call-to-action button that allows visitors to download brand assets or supporting files.
This is especially useful for logo pages, media kits, or downloadable resources.
Customize the overall appearance of your hero.
Adjust the height using any valid CSS unit.
Common examples include:
60vh for a traditional hero100vh for a full-screen introduction500px for a fixed-height bannerThe height you choose influences the visual emphasis of the section.
Customize the appearance of your hero's content.
Available options include:
Button styles are designed to complement your theme while providing clear visual emphasis for calls to action.
The Hero Component works seamlessly with your brand theme.
You can:
This keeps every hero section visually consistent with the rest of your brand guide.
Click Save Component to apply your updates.
Your changes are immediately reflected in the live preview, allowing you to review the finished hero before returning to the Page Editor.
The Hero Component is the primary way to introduce pages and establish visual impact within your brand guide.
With flexible backgrounds, customizable typography, optional branding, and integrated theme support, it provides everything you need to create engaging, professional hero sections that set the tone for the content that follows.
