Hero Section TWO
This content is for v1.0. Switch to the latest version for up-to-date documentation.
Overview
Section titled “Overview”The Hero Section TWO is a simplified hero variant designed for clear and direct communication.
Compared to Hero Section ONE, it removes complex styling options such as keywords and highlighted headline parts, making it ideal for straightforward messaging.
Fields
Section titled “Fields”Headline
Section titled “Headline”- Type: String
- Required: Yes
- Max length: 120 characters
- Purpose: Main heading of the hero section
- Example:
Professional Services – Your Business in Example City
Subheadline
Section titled “Subheadline”- Type: Text (2 rows)
- Required: No
- Purpose: Supporting heading displayed below the main headline
- Example:
Modern solutions for your business needs
Description
Section titled “Description”- Type: Text (3 rows)
- Required: No
- Purpose: Additional descriptive text providing more detail
- Example:
We provide professional services tailored to your needs. With experienced team members and flexible scheduling.
Show Badge
Section titled “Show Badge”- Type: Boolean
- Required: No
- Default:
false - Purpose: Toggles the visibility of a badge in the hero section
- Type: Reference (
badge) - Required: No
- Hidden when: Show Badge is disabled
- Purpose: Displays a badge component in the hero area
- Examples:
NEW,Bestseller
Usage Example
Section titled “Usage Example”Text Content
Section titled “Text Content”-
Headline:
Professional Services – Your Business in Example City -
Subheadline:
Modern solutions for your business needs -
Description:
We provide professional services tailored to your needs. With experienced team members and flexible scheduling.
Badge Configuration
Section titled “Badge Configuration”- Show Badge:
true - Badge: Reference to a badge document (e.g.
NEW,Bestseller)
Best Practices
Section titled “Best Practices”- Headline: Keep it concise and impactful. The 120-character limit helps maintain clarity.
- Subheadline: Use to expand or clarify the headline without repeating it.
- Description: Provide additional value for users who want more context.
- Badge: Use sparingly and only when it adds meaningful emphasis.
- Hierarchy: Leverage the three text levels (headline → subheadline → description) for a clear information flow.
Key Features
Section titled “Key Features”- Simple structure: Linear, easy-to-understand layout
- Compact headline: Character limit ensures focused messaging
- Optional badge: Adds emphasis when needed
- Layered text: Supports staged content delivery
- Clean design: Minimal styling keeps attention on the message
Where It’s Used
Section titled “Where It’s Used”- Pages (
page)
Subpages, landing pages, and informational content
Technical Notes
Section titled “Technical Notes”- Badge uses the global
badgeschema - Headline length is capped at 120 characters
- All text fields support rich formatting
- Uses semantic HTML for accessibility
Differences from Hero Section ONE
Section titled “Differences from Hero Section ONE”| Feature | Hero Section ONE | Hero Section TWO |
|---|---|---|
| Headline structure | Multi-part with styles and keywords | Simple string |
| Keywords | Yes (colored) | No |
| Buttons | Yes (Primary / Secondary) | No |
| Badge | No | Yes (optional) |
| Background image | Yes | No |
| Description | Yes | Yes |