MarketingHero
Top-of-page marketing hero. Eyebrow, headline, subcopy, CTA buttons, and an optional media slot. Centered single-column or split copy + media layout. Presentational and fully theme-driven.
Your design system, on autopilot
AI-native components and blocks your agents can assemble end-to-end — themed, accessible, and ready to ship.
Installation
pnpm dlx @hex-core/cli add marketing-heroSplit hero with media
Copy beside a product screenshot on desktop.
<MarketingHero
layout="split"
title="Your design system, on autopilot"
description="One source of truth for components, tokens, and blocks."
actions={<Button size="lg">Start free</Button>}
media={<img src="/hero.png" alt="Product dashboard" className="rounded-xl border border-border shadow-lg" />}
/>Variant values
layoutHero composition.| Value | Description |
|---|---|
centereddefault | Single centered column. |
split | Copy left, media right on ≥lg. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The headline. Required — a hero with no title is just a layout. |
eyebrow | ReactNode | — | Small announcement / eyebrow above the title, e.g. a <Badge> pill. |
description | ReactNode | — | Supporting subcopy below the title. |
actions | ReactNode | — | Call-to-action buttons. Pass one or more <Button> elements. |
media | ReactNode | — | Visual (screenshot / illustration). Beside the copy when layout='split', below it otherwise. |
layout | enum | centered | 'centered' for a single-column hero, 'split' for copy + media side-by-side on ≥lg. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use as the first section of a landing page. Pick layout='split' when you have a screenshot or illustration; layout='centered' for a copy-led hero.
When not to use
Don't use inside an app shell or for in-product page headers — use a page-heading pattern there. Don't stack two heroes on one page.
Common mistakes
- Passing a long paragraph as the title — keep the title to one line; move detail into description.
- Putting raw <a> tags in actions instead of <Button asChild><a>…</a></Button>, which loses the button styling and focus ring.
- Using layout='split' with no media — it leaves an empty column; drop to 'centered'.
- Hard-coding colors via className instead of relying on the semantic tokens, which breaks theme switching.
Accessibility
Renders a single <h1> for the page — don't place another <h1> elsewhere. Decorative media should carry an empty alt or aria-hidden. CTA focus rings come from the Button primitive.
Related components
Token budget: 600
Verified against @hex-core/components@1.12.0