Hero Banner
The Hero Banner element creates a full-width hero section for landing pages with a large heading, subheading, and call-to-action buttons over a customizable background.
Features
- Large heading and subheading text
- Primary and secondary CTA buttons
- Three background types — solid color, gradient, or image with overlay
- Configurable text alignment — left, center, right
- Adjustable height and text color
Settings
| Setting | Description | Default |
|---|---|---|
| Heading | Main headline text | "Build Apps Without Code" |
| Subheading | Supporting text below the heading | Sample tagline |
| CTA Text | Primary button label | "Get Started Free" |
| CTA Color | Primary button color | #4285F4 |
| Secondary CTA Text | Secondary button label | "Learn More" |
| Show Secondary Button | Display the secondary CTA | true |
| Text Align | Text alignment: left, center, or right | center |
| Height | Banner height in pixels | 300 |
| Background Type | solid, gradient, or image | gradient |
| Background Color | Solid background color | #1a1a2e |
| Background Gradient | CSS gradient string | Dark blue gradient |
| Background Image URL | Image URL for image backgrounds | — |
| Overlay Opacity | Dark overlay opacity for images (0-1) | 0.5 |
| Text Color | Color of all text | #ffffff |
Use Cases
- Landing page hero sections
- Marketing campaign banners
- Product launch announcements
- Welcome screens
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.