Page Hero
A full-width hero banner with a background image, animated title, and optional description text.
What It Does
The Page Hero module creates a wide banner section with a background image. A bold title animates in from below, and an optional multi-line description slides in from the right. This is typically the first section visitors see when landing on a page, setting the tone for the content below.
Best Used For
- Contact Us page headers
- About Us page headers
- Any interior page that needs a strong visual introduction
- Landing page top sections
Variants
Default
A background image with a left-aligned title and right-aligned description. Both elements animate on load.
Best for: Pages that need both a title and supporting context
Title Only
Same layout but without a description, keeping the focus entirely on the heading.
Best for: Simple page headers where the title speaks for itself
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| title | component | No | Main heading displayed prominently on the banner |
| description | component | No | Supporting text shown on the right side |
| image | media | Yes | Background image for the banner |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Choose a background image with enough contrast for white text to remain readable.
- Keep the title short and impactful — 2 to 4 words work best at this scale.
- If using a description, limit it to 2 short lines for the cleanest appearance on mobile.
Supported Languages
Fully bilingual — all text fields support both English and Thai content.