Page Header - Display

Search (CSOL) Page Header - Display in the CMS

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

Get started free Get a demo

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

Get started free Get a demo

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

Get started free Get a demo

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

Get started free Get a demo

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

### Content Elements

Center-aligned heading with optional tagline, two heading size options (Display 01 large, Display 02 standard), and a branded heading toggle for display font styling.

### Card Content

Optional rich text card with support for links, lists, images, and emoji. The card renders only when content is provided, keeping the module clean when used as a heading-only header.

### Statistics

Up to 3 optional statistics items (value + label) displayed inside the card in a responsive row layout. Useful for highlighting key metrics like adoption rates or performance numbers.

### CTAs

Up to 2 configurable CTAs rendered inside the card, center-aligned and stacked on mobile.

### Animations

On-load: Desktop-only entrance animation that collapses the row gap between heading and card on page load.
Parallax scroll: When a card is present, scrolling adjusts padding, card margin, and heading opacity to create a subtle depth effect.

### Theme Integration

Four page header themes (light, white, dark, dark-2) controlling background and card appearance via Component Library theme attributes.

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