Hero Text
A flexible hero section with headline, subtitle, description, optional form, and Lottie animation. The most versatile hero module.
What It Does
The Hero Text module creates a customisable full-width hero section that can include a headline, subtitle, body text, a call-to-action button, an embedded form, and an animated illustration (Lottie or static image). It supports 9 text positions and two height modes, making it the most flexible hero option available.
Best Used For
- Homepage hero sections with a form (e.g. newsletter signup, quick enquiry)
- Product landing pages with animated illustrations
- Campaign pages with a strong headline and call to action
- Any page that needs a rich, multi-element hero
Variants
Default
Headline, subtitle, and description with an optional button. Clean and versatile.
Best for: Most landing pages and content pages
RichtextMode
The body area is rendered from a markdown string instead of Strapi Blocks content. Set textType to RICHTEXT and populate the richtext field.
Best for: Content that uses lightweight markup without the full Blocks editor
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| textType | enumeration | No | Content mode for the body area -- NORMAL uses Blocks editor content, RICHTEXT uses a markdown string |
| position | enumeration | Yes | Text position on the section (9 positions: top-left through bottom-right) |
| sectionHeight | enumeration | Yes | Regular fills the full screen, Fit shrinks to fit content, No Padding Top / No Padding Bottom drop the padding on that edge, Compact uses tight footer-style padding |
| title | component | No | Main headline text with configurable size, weight, and colour |
| subTitle | component | No | Secondary headline above or below the title |
| description | blocks | No | Body text with configurable size and colour |
| richtext | customField | No | Markdown string rendered as the body when textType is RICHTEXT |
| descriptionAlign | enumeration | No | Alignment for the description text block |
| buttons | component | No | CTA buttons with label, link, variant, size, colour, and optional icons |
| chipColor | component | No | Colour chip configuration |
| imageHeader | media | No | Header image or Lottie animation |
| media | component | No | Media component for the hero section |
| background | component | No | Background layer -- gradient, image, or both with optional overlay |
| mobileBackground | component | No | Mobile-specific background override |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Use the Title for your main message and the Description for supporting detail -- don't put everything in the title.
- Lottie animations should be lightweight (under 200KB) for fast loading. Test on mobile.
- Set textType to RICHTEXT when the body content uses simple markdown formatting without needing the full Blocks editor.
- The Button works best with short, action-oriented text like "Get Started" or "Learn More".
Supported Languages
Fully bilingual -- all text fields support both English and Thai content.
Module Catalog
A complete reference of all visual modules available in the Mee Web Platform. Each module is a configurable section that content editors can add to any page via Strapi.
Hero Gradient
A full-width hero section with gradient text and a customisable background. Best used as the first section on a landing page or brand page.