Hero
v1.0.20Updated 19 Oct 2026Above-the-fold hero section for landing/marketing pages — headline, subcopy, CTAs and a visual. Copy-paste block; baked-in demo content (no data props — edit the JSX to customise).
Preview
Live · 13 stories▸Why this is recommendedherolandingmarketingheader+4
Hero in a two-column split layout — image.
- ✓Landing pages
- ✓Marketing/product home pages
- ✓Campaign pages
- Headline + subcopy + primary/secondary CTA
- Split-image, centered-gradient, orbit, app-screenshot, form and video-bg layouts
- Every call to action renders NOTHING until it is wired: ctaHref / onCtaClick and secondaryCtaHref / onSecondaryCtaClick. The hero buttons used to fire nothing (condo69 fb_bc8045e2 / fb_f8fba1de)
- HeroWithForm hands the typed address to onSubmitLead instead of discarding it, and shows pending, success and error from what the handler actually did
- HeroStatsBar takes its figures from `stats`; the orbit and integration logo sets are props too
- trustAvatars are avatar seeds inside a decorative trust row, so they keep their default and are configurable all the same
- Client-side routing: pass linkComponent and every anchor routes through the host app link component (fb_bf7dc63a)
- ✕In-app dashboards
- ✕Dense data screens
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the hero family (eyebrows, headlines, subcopy, CTA text, form and mockup chrome, trust-row captions, aria-labels) for i18n or white-labelling. Merged over DEFAULT_HERO_LABELS.
—ctaHrefWhere the hero PRIMARY call to action goes. No default: until this (or onCtaClick) is given the CTA renders NOTHING, because these buttons used to fire nothing. MCP feedback fb_bc8045e2 / fb_f8fba1de.
—onCtaClickWhat the primary call to action does. Safe to combine with ctaHref; on its own it makes the CTA a real type=button. Receives the click event so a routed host can preventDefault (fb_bf7dc63a).
—secondaryCtaHrefWhere the secondary call to action goes (Watch the tour, Book a demo). Same contract as ctaHref.
—onSecondaryCtaClickWhat the secondary call to action does. See onCtaClick.
—onSubmitLeadHeroWithForm only: receives the address the visitor typed. Awaited, so the button shows its pending state and the success line appears only once the handler resolved. Without it the form does not claim to have sent anything.
—statsHeroStatsBar figures. Keeps the built-in demo numbers by default; a caller with real numbers supplies each caption with its own number.
—trustAvatarsThe avatar seeds in the decorative trust row. Illustration rather than named endorsements, so it keeps its default; pass your own, or [] to drop the row.
—orbitLogosHeroWithOrbit: which built-in marks orbit the centre, inner ring and outer ring.
—integrationLogosThe integration marks the hero shows. Keeps its default set.
—linkComponentThe host app link component for every anchor this family renders. Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—