Similar Modules
Page Header - Brand Graphics
Add a strong introductory statement and brand styled header area to your page.
Module Preview
Startup Tech Stack Guide
G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2
Startup Tech Stack Guide
G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2
Startup Tech Stack Guide
G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2
Startup Tech Stack Guide
G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2, the largest and most trusted B2B software marketplace, has partnered with HubSpot for Startups to bring you this resource of top tech stacks used by G2
Module Preview
FAQ's
How To Use This Module
Make a lasting impression with our powerful Page Header - Splash module. Customize stunning full-screen campaign headers that are brand compliant, and leverage the flexibility to showcase multiple logos for impactful co-marketing campaigns or events
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.
### 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 using a grid layout
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
- Grid Layout: Content is positioned using the Component Library grid system for consistent alignment
- Image Selection: Choose from 8 curated background images (Image 1-8) stored in HubSpot File Manager
- Responsive Behavior:
- Mobile: Background image hidden; clean background shown instead
- Tablet+: Full bleed image visible with optimized positioning per image
- Edge Gradients: On viewports wider than 1800px, subtle gradients fade the image edges to match the page background
- Custom Positioning: Each of the 8 images has optimized background-position values for mobile and desktop to ensure key visual elements are visible
- Content Alignment: Content remains left-aligned (unlike brand shape variants which center content on tablet+)
- Hidden Elements: Brand element fields (leftBrandElement, rightBrandElement) and the Scroll Indicator section are automatically hidden when Full Bleed Image is selected
### 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.
Get on-brand assets for your module
Guidelines
Character Count
- Tagline recommended maximum character count is 60- Recommended header character count is ~45 characters
- Recommended description character count ~150
- Limit CTA text to 2 or 3 words
Things to Know
- Mix and match brand shapes as you wish!- Adding a "scroll for more" label is mandatory, unless you are using a Full bleed image
- Logos, Tagline, Sub-Headline, CTAs, and Disclaimer text are optional
- You can "hide" brand background shapes by selecting None on both sides
- You can now chose the heading size: Normal 48px or Small 36px. Both will still be H1s. On mobile both will be 36px by default.
What's New?
| v5.6.0 February 2026
- Introduced “Full Bleed Image” option for module background style
- Introduced “Full Bleed Image options” selector with 8 preselected image options
- Full Bleed Image won’t be available in mobile view
- ”Full Bleed Image” option won’t include the “Scroll for more” section
- Full Bleed image is not visible in mobile view (only dark background color)
| v2.13.0 August 2024
- Added a new “Heading Size” option to give users the option to change the heading size. Normal will be the default 48px heading size or Small which will be 36px. Both options will still semantically be a H1 and will appear as 36px on mobile regardless of the size chosen.
| v2.11.0 June 2024
- Allows CTA styling options so user can set a Type (button versus text link) and Button Style (i.e. primary, secondary or tertiary)