Source: https://monarchui.dev/components/marketing-hero/

Patterns · Layout

# MarketingHero

The opening section of a public page: eyebrow, the page h1, lead, actions and media.

@rookcom/monarch-react/marketing

Pattern

## Centered

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

States what the product does for whom, offers the primary action, and shows the product. It owns the page’s single h1. Import from `@rookcom/monarch-react/marketing`.

### Use when

- The top of a product site, launch page or solution page.

### Avoid when

- Signed-in app screens: use PageHeader.
- A second hero further down the page: use MarketingSection with MarketingSectionHeader.

## Design principles

- Type does the work: `--mn-display-xl` (Poppins 600, tight tracking), balanced line breaks, a muted lead capped at about 38rem.
- One accent moment: the eyebrow and primary action use the product accent; the background is a very subtle wash derived from it (`--mn-gradient-wash`).
- Hero actions are pill-shaped and one size up from the default, so the primary action is unmistakable.

## API reference

```tsx
import { MarketingHero } from '@rookcom/monarch-react/marketing';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `MarketingHero` | component | server-safe | `.mn-hero` |

Renders `<section class="mn-hero">`; place it first inside `<main>`.

Generated from the TypeScript declarations of `packages/react/src/patterns/layout/marketing-hero`.

## Properties

### `MarketingHero`

The opening section of a marketing page. Server-component safe.

| Prop | Type | Description |
| --- | --- | --- |
| `title` required | `ReactNode` | The page's single h1. Keep it under ~8 words. |
| `actions` | `ReactNode` | One primary Button and at most one secondary action. |
| `background` | `"none" \| "wash"` | `wash`: a very subtle accent wash behind the hero. |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `eyebrow` | `ReactNode` | Short context line above the title, in the product accent. |
| `headingAs` | `"h2" \| "h1"` | Heading element. Use `h2` only when the page title lives elsewhere. |
| `id` | `string` |  |
| `layout` | `"centered" \| "split"` | `centered` for launch pages; `split` puts media beside the copy on wide screens. |
| `lead` | `ReactNode` | One or two sentences that say what the product does for whom. |
| `media` | `ReactNode` | Product illustration, normally a ProductFrame. |
| `note` | `ReactNode` | Small reassurance under the actions, e.g. "Free for teams of five". |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `layout` | `'centered'``'split'` | `centered` stacks copy over media; `split` puts media beside the copy from 1024px. |
| `background` | `'wash'``'none'` | `wash` (default) paints `--mn-gradient-wash`; `none` leaves the canvas. |
| `headingAs` | `'h1'``'h2'` | `h2` only when the page title is rendered elsewhere. |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Static | – | No interactive state of its own; the actions carry their own states. |

## Interaction behaviour

- No interaction of its own. `actions` are ordinary Buttons or links.

## Keyboard support

Not interactive itself; focus moves through the actions in source order.

## Accessibility

Role

region (section)

Accessible name

–

- Renders the page’s only h1 by default; give a separate `aria-label` only if the section needs a name other than the heading.
- Under 640px the actions stack full width, each at least 48px tall.
- Put product imagery in `media` as a ProductFrame so it is one labelled image, not a stream of fake headings and inputs.

## Responsive behaviour

- Title, lead and section padding are fluid (`clamp()`) between 390px and 1440px.
- `split` becomes two columns at 1024px; below that media follows the copy.
- Actions stack full width below 640px.

## Theme support

- The wash, eyebrow and primary action follow the product accent (`data-mn-product`).
- Dark, light and more-contrast themes come from the semantic tokens; the wash stays subtle in each.

## Do and don't

### Do

- Keep the title under about eight words and the lead to one or two sentences.
- One primary action, at most one secondary.

### Don't

- Do not override the title with light weights or arbitrary pixel font sizes.
- Do not add hand-picked gradients, glows or decorative shapes behind it.
- Do not invent proof (customer counts, ratings) for the note line.

## Related components

- [Marketing sections](https://monarchui.dev/components/marketing-section-blocks/): Every section after the hero.
- [SiteHeader and SiteFooter](https://monarchui.dev/components/marketing-site-shell/): The header above and footer below.
- [PageHeader](https://monarchui.dev/components/page-header/): The equivalent for signed-in app screens.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | None |
| Monarch components | None |

Tokens: `--mn-display-xl*`, `--mn-lead*`, `--mn-section-*`, `--mn-gradient-wash`.

## Testing coverage

- Renders the h1 with eyebrow, lead, actions and note.
- layout, background and headingAs reach the DOM.
- No axe violations; renders on the server.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines and three-browser axe: /__marketing |

Tests: `packages/react/src/patterns/layout/marketing-hero`

## All example code

### Centered

```tsx
import { Button } from '@rookcom/monarch-react';
import { MarketingHero } from '@rookcom/monarch-react/marketing';

<MarketingHero
  headingAs="h2"
  eyebrow="Rook Example"
  title="Write it once. Find it whenever."
  lead="Structured documents for teams whose decisions need to stay connected."
  actions={
    <>
      <Button variant="primary">Start writing</Button>
      <Button variant="secondary">See how it works</Button>
    </>
  }
  note="Free for teams of up to 10."
/>
```