Overview

HeroSection renders the primary above-the-fold section of a marketing page. Choose from four variant layouts:

• centered — headline and CTAs horizontally centered, optional content slot below.
• split — two-column layout with text on the left and an image on the right.
• video — full-bleed background video with centered overlay content (forces dark mode).
• gradient — centered layout with a custom CSS gradient layer behind the content.

Usage

import { HeroSection } from '@leanicon/web-builder-library'
;<HeroSection
  variant="centered"
  headline="Build faster with great UI"
  subtext="Production-ready React components."
  primaryCTA={{ label: 'Get started', href: '/signup' }}
  secondaryCTA={{ label: 'View docs', href: '/docs' }}
/>

Variants

Centered

With badge

Split (with image)

Pass any element as children to render in the right column of the split layout.

PreviewCode

DarkResponsive

Ship marketing pages in minutes

Composable blocks, dark mode ready, and accessible out of the box.

Start freeSee pricing

Split (with custom content)

The children slot accepts any element — not just images.

Video background

The video variant automatically enables dark mode. Provide a looping background video via videoSrc.

Gradient

Pass one of the named section bands to background. It renders as an aria-hidden overlay behind the content.

Inside a page you do not set this: RenderBlocks paints the band on the block wrapper from the editor's Section background choice, and enforces the rule that two gradients never sit next to each other.

Dark color scheme

Primary CTA only

Animated background (aurora)

Use the backgroundSlot prop to layer an AnimatedBackground behind the content. Color presets adapt the palette instantly.

Animated background (grid)

The spotlight orbits freely, follows the cursor on hover, and resumes its orbit when the cursor leaves.

Animated background (particles)

Notes

• In split variant, children render in the right column (media slot). In other variants, children render below the headline and CTAs.
• The image prop still works as a shorthand for split — if no children are provided, it renders the image in the right column.
• The video variant always renders inside a <div class="dark"> regardless of colorScheme.
• The section is wrapped in <section aria-label="Hero"> for landmark navigation.
• Prefer the dark bands (grad-ink-brand, grad-deep) behind light hero copy. Note grad-deep will not carry muted text — ink-400 on it is only 3.26:1.
• All four variants are fully responsive — single column on mobile, multi-column on lg breakpoint.