Back to All Modules

Page Header - Display

Search (CSOL) Page Header - Display in the CMS

Jump to Guidelines and Use Cases

Theme Options:

Module Preview

Platform Overview

Grow better with HubSpot

Learn how top marketing teams integrate AI for insights, personalization, and demand generation. Discover frameworks to add AI to your stack while maintaining data integrity and effectiveness.

Guide’s content:

  • All-in-one CRM platform for scaling companies
  • Free tools to get you started, premium plans to help you grow
  • Award-winning customer support and onboarding
228K+
customers worldwide
120+
countries represented
200+
app integrations

Platform Overview

Grow better with HubSpot

Learn how top marketing teams integrate AI for insights, personalization, and demand generation. Discover frameworks to add AI to your stack while maintaining data integrity and effectiveness.

Guide’s content:

  • All-in-one CRM platform for scaling companies
  • Free tools to get you started, premium plans to help you grow
  • Award-winning customer support and onboarding
228K+
customers worldwide
120+
countries represented
200+
app integrations

Platform Overview

Grow better with HubSpot

Learn how top marketing teams integrate AI for insights, personalization, and demand generation. Discover frameworks to add AI to your stack while maintaining data integrity and effectiveness.

Guide’s content:

  • All-in-one CRM platform for scaling companies
  • Free tools to get you started, premium plans to help you grow
  • Award-winning customer support and onboarding
228K+
customers worldwide
120+
countries represented
200+
app integrations

Platform Overview

Grow better with HubSpot

Learn how top marketing teams integrate AI for insights, personalization, and demand generation. Discover frameworks to add AI to your stack while maintaining data integrity and effectiveness.

Guide’s content:

  • All-in-one CRM platform for scaling companies
  • Free tools to get you started, premium plans to help you grow
  • Award-winning customer support and onboarding
228K+
customers worldwide
120+
countries represented
200+
app integrations
Module Preview

FAQ's

How To Use This Module

Create high-impact landing page headers with our Page Header - Display module. Feature a bold display heading with an optional floating card overlay that supports rich text, up to 3 statistics, and configurable CTAs - perfect for showcasing key metrics and driving conversions.

Use Cases

This module is ideal for high-impact landing pages, such as product announcements, platform overviews, and campaign heroes, where the heading needs to be the primary visual element and supporting content should feel secondary but accessible.

When adding the Page Header - Display module to your page, consider whether you need the card overlay or just a clean heading-only header. The card only renders when content is provided, so you can start simple and add detail later.

Make use of the statistics feature to highlight key metrics - up to 3 stat items with a value and label, like "228K+ customers worldwide." These add credibility and draw the eye inside the card.

Experiment with the two heading sizes: Display 01 for maximum impact, or Display 02 for a more restrained look. Toggle the branded heading option to apply the display font styling.

Finally, take advantage of the rich text card content - add checkmark lists, links, and formatted text to give visitors a clear summary of what you're offering, paired with up to 2 CTAs to drive action.

Guidelines

Character Count

  • Tagline recommended maximum character count is 60

  • Recommended heading character count is ~30 characters (display headings need room to breathe)

  • Recommended stat value character count is ~5 characters (e.g. "228K+", "73%")                      

  • Recommended stat label character count is ~25 characters

  • Limit CTA text to 2 or 3 words


Things to Know

  • The module requires a heading to render - without one, it shows an empty state warning

  • The card overlay is optional - leave the Card Content field empty for a clean, heading-only header

  • Statistics are optional - add up to 3 stat items (value + label) inside the card

  • You can add up to 2 CTAs, displayed center-aligned inside the card and stacked on mobile

  • Choose between two heading sizes: Display 01 (large) or Display 02 (standard). Both render as H1s

  • Toggle the branded heading option to apply the display font styling

  • The card uses a frosted glass backdrop effect

  • On desktop, the module includes a subtle on-load animation and parallax scroll effect

  • Tagline, Card Content, Statistics, CTAs, and Disclaimer are all optional

Similar Modules

Page Header - Brand Graphics

Add a strong introductory statement and brand styled header area to your page.

updated

Page Header - Splash

Create a visually stunning full-screen campaign headers with branded background shapes or full bleed images using our Page Header - Splash Module