Header Sections
Header sections sit at the top of a page and set the first impression. ClearCMS includes three hero variants for different visual styles.
Hero Split
ID: hero-split-v2
A two-column layout with your headline and CTAs on one side and a large image on the other. Includes an optional avatar row and trust badge.
Live preview
Fields
| Field | Type | Label | Default |
|---|---|---|---|
eyebrow | text | Eyebrow | Introducing Acme 2.0 |
tagline | text | Headline | Build something people love |
description | textarea | Description | The modern platform for teams who ship fast... |
heroImage | image | Hero Image | Unsplash placeholder |
heroImageAlt | text | Image Alt Text | Team collaborating |
trustedBy | text | Trust Badge Text | Trusted by 10,000+ teams worldwide |
reversed | boolean | Reverse Layout | false |
avatars | array | Avatars | 4 default team members |
Avatar item fields:
| Field | Type | Label | Default |
|---|---|---|---|
name | text | Name | Team Member |
src | image | Avatar Image | -- |
initials | text | Initials (optional) | -- |
color | text | Color (optional) | -- |
Default content
Eyebrow: Introducing Acme 2.0
Headline: Build something people love
Description: The modern platform for teams who ship fast.
Streamline your workflow, collaborate in real-time,
and deploy with confidence.
Trust badge: Trusted by 10,000+ teams worldwide
Avatars: Sarah Chen, Marcus Johnson, Elena Rodriguez, Alex Rivera
When to use
Best when you have a strong hero image and want a balanced text-plus-image layout. The reversed toggle flips the image to the left side.
Tips
- Upload a hero image at least 800 x 600 px for sharp rendering.
- Add 3-5 avatars to reinforce the trust badge.
Hero Centered
ID: hero-centered-v2
A full-width hero with a background image, dark overlay, centered headline, and a scroll indicator. Great for dramatic, photo-driven landing pages.
Live preview
Fields
| Field | Type | Label | Default |
|---|---|---|---|
eyebrow | text | Eyebrow | Welcome to Acme |
tagline | text | Headline | Build something people love |
description | textarea | Description | The modern platform for teams who ship fast. |
heroImage | image | Background Image | Default placeholder |
Default content
Eyebrow: Welcome to Acme
Headline: Build something people love
Description: The modern platform for teams who ship fast.
Background: Default hero image with dark overlay
When to use
Best for landing pages where a background photo sets the mood. The dark overlay keeps text readable over any image.
Tips
- Choose a background image without too much fine detail so text stays legible.
- A scroll indicator at the bottom encourages visitors to keep scrolling.
Hero Minimal
ID: hero-minimal-v2
A clean, centered hero on a white background with gradient-tinted text and decorative blobs. No background photo required.
Live preview
Fields
| Field | Type | Label | Default |
|---|---|---|---|
eyebrow | text | Eyebrow | Introducing Acme |
tagline | text | Headline | Build something people love |
description | textarea | Description | The modern platform for teams who ship fast. |
heroImage.url | image | Hero Image | -- |
heroImage.alt | text | Hero Image Alt Text | -- |
Default content
Eyebrow: Introducing Acme
Headline: Build something people love
Description: The modern platform for teams who ship fast.
Image: (optional, shown below the CTA buttons)
When to use
Best for a modern, lightweight hero without a background image. Works well for SaaS and developer tool landing pages.
Tips
- The headline renders with a gradient from the text color to the primary brand color.
- The hero image is optional. When set, it appears below the CTAs at 16:9 aspect ratio.