MarketingHero

Centered

Rook Example

Write it once. Find it whenever.

Structured documents for teams whose decisions need to stay connected.

Free for teams of up to 10.

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."
/>

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

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.

Marketing sections: Every section after the hero.
SiteHeader and SiteFooter: The header above and footer below.
PageHeader: 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