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.
What It Does
The Hero Gradient module creates a bold, full-width opening section for any page. It features large gradient-coloured headline text layered over a customisable background — either a solid colour, a gradient, or a background image. The text and background colours are fully configurable to match any brand palette.
Best Used For
- First section of a landing page
- Brand introduction pages
- Campaign or product launch pages
- Any page that needs a strong visual opening statement
Variants
Default
The headline text is rendered with a colour gradient effect and centred on the section. The section fills the full height of the screen. Clean and impactful — ideal for most use cases.
💡 Best for: General landing pages and brand pages
Fit Height
Same as the default, but the section height shrinks to fit the content rather than filling the full screen. Useful when the Hero Gradient is followed immediately by another prominent section.
💡 Best for: Pages where you want a compact hero without full-screen height
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| position | enumeration | Yes | Text position on the section (9 positions: top-left through bottom-right) |
| sectionHeight | enumeration | Yes | Regular fills the full screen height, Fit shrinks to fit the content |
| titles | component | Yes | Gradient headline text lines (up to 3), each with its own gradient colours and direction |
| background | component | No | Background layer -- supports a background image, a colour gradient, or both with optional overlay |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Keep gradient headline text short — 3 to 7 words per line works best. Long sentences lose impact at large sizes.
- Use a dark background with light gradient text, or a light background with dark gradient text, for maximum readability.
- If you add three lines, check how they look on mobile — the text stacks and the spacing tightens automatically but very long words may overflow.
- If the page already has a lot of movement lower down, this section works well as a calm, static anchor at the top.
Supported Languages
Fully bilingual — all text fields support both English and Thai content via the language switcher in the Strapi admin panel.