Use Cases

Partner Logos

Display up to 6 partner/sponsor logos at the top of the header, each with optional links and configurable to open in new tabs. Logos support custom alt text for accessibility.

Content Elements

Standard page header content including tagline, heading with size options, rich text description, up to 2 CTAs, optional disclaimer text, and customizable scroll indicator label.

Header Logo

An optional logo image can be displayed above the heading on any background style. Expand the "Add a logo above the heading" group field and upload an image — when set, content renders as: tagline → logo → heading → description → CTAs. Leave the field empty to use the standard heading-only layout.

Background Style Options

Four background style configurations:

• None: Clean background without decorative elements
• Brand Shape: Style 1 - Bottom: hub-3d-01 shape positioned at bottom, dynamically colored based on theme
• Brand Shape: Style 2 - Top: hub-3d-02 shape positioned at top, dynamically colored based on theme
• Full Bleed Image: Full-viewport background image with content displayed over the image

Full Bleed Image Details

When "Full Bleed Image" is selected:

• Forced Theme: Module automatically uses dark theme with light CTAs for optimal contrast against background images; Theme field is hidden in the editor
• Image Selection: Choose from 8 curated background images (Image 1-8), or select Custom Image to upload your own
• Responsive Behavior (preset images):
• Mobile: Background image hidden; clean background shown instead
• Tablet+: Full bleed image visible with optimized positioning per image
• Edge Gradients (preset images): On viewports wider than 1800px, subtle gradients fade the image edges to match the page background
• Custom Positioning (preset images): Each of the 8 images has optimized background-position values for mobile and desktop
• Content Alignment: Content is left-aligned for preset images; centered by default for Custom Image (configurable)
• Hidden Elements: Brand element fields (leftBrandElement, rightBrandElement) and the Scroll Indicator are automatically hidden when Full Bleed Image is selected

Custom Image Details

When "Custom Image" is selected from the Full Bleed Background Image dropdown:

• Background Image: Upload any image via the Background Image field — displayed full-bleed on all viewports
• Dark Overlay: A 70% opacity dark overlay is applied over the image for text legibility
• Forced Theme: Dark theme with light CTAs; theme field hidden in the editor
• Content Alignment: Center-aligned by default (matching brand shape variants); a Content Alignment field allows switching to left-aligned (matching preset full bleed images)

Scroll Indicator

Interactive scroll button with customizable label text that smoothly scrolls to content below the header. Displays in both desktop and mobile viewports with theme-specific styling.

Navigation Integration

Supports different navigation types (core, coreLp) with specific styling adjustments. Navigation type passed via `navigationType` variable.