The hero is the first thing a reader meets: a single claim, the sentence that makes it
believable, and the one or two places to go next. A page reaches for it once, at the top, when
the page has a proposition to state before it explains anything, a pricing page or a reference
page usually opens on its own subject instead.

It is one of the [marketing sections](/concepts/marketing-sections): the heading block, the body
and the actions are the same three parts every band has, and the picture is the one part only a
hero takes. A page puts it inside a [MarketingLayout](/components/layouts/marketing-layout) as the
first child of the main region.

```tsx demo="marketing/hero-preview"
```

## Usage

```tsx
import { Hero } from "@asheeui/web";

<Hero
  title="Send campaigns your customers finish reading"
  primaryAction={{ label: "Start free", href: "/signup" }}
/>
```

`title` is the only required prop; a hero with nothing else is a headline in a band, which is
occasionally exactly what a page wants. The actions are configured rather than rendered, a primary action is
solid and a secondary one bordered unless the configuration states otherwise, and `href` is what
makes one a link rather than a button.

## The picture beside the words

`media` is a node: a screenshot, an illustration, a short loop, whatever the claim needs. On a
narrow window it sits under the text column; from the `lg` breakpoint the band places the two
beside each other, and `mediaPosition` decides which side the picture takes, `end`, after the
words, which is the default, or `start`, so the picture opens the band and the text reads to its
right.

The reading order does not follow it. The text column is first in the markup and the media second,
and `start` moves the picture with a column order rather than by moving it in the document, so a
screen reader always hears the claim before the picture and a keyboard reaches the actions before
anything inside the media.

```tsx demo="marketing/hero-media"
```

## Centred, and a line under the actions

`align` sets the alignment of the heading block and the action row together: `start`, the default,
or `center`. Centring suits a short claim with no media, where a measured block in the middle of
the page reads better than one ragged against the left edge.

`children` renders after the actions, inside the text column, the line of small print, a row of
customer logos, the note about what the free plan includes. It is not a second body slot: the
band's copy belongs in `eyebrow`, `title` and `description`, and `children` is for what the band
has no prop for.

```tsx demo="marketing/hero-centred"
```

## Props

```props Hero
```

The six band options are registered, `align` `start`, `spacing` `xl`, `background` `none`,
`mediaPosition` `end`, `containerSize` `lg` and `contained` `true`, and each resolves from the
instance, then from `components.hero`, then from the registration. A product whose heroes are all
centred, taller and tinted states it once in configuration and stops repeating it on every page.
Everything else is instance-only, because it states this page's proposition rather than the
design: `title`, `eyebrow`, `description`, `titleAs`, the level belongs to the page's outline
rather than to the product, the two actions, `media` and `children`.

`contained` decides whether the band draws the framework's width for you. The hero renders its own
`Container` and switches the underlying `Section`'s container off, so `containerSize` is the
option that decides the measure; turning `contained` off is what a page does when its own layout
has already given the content one. `as` picks the element the band renders as, `section` unless
stated, and it is not the heading's lever: the headline's level comes from `titleAs`, so `as`
changes the band and leaves the heading where it is.

## Accessibility

- The headline is an `<h2>` by default. The band renders the section kit's heading at its `xl`
  step, that step resolves to the `display` typography role, and the step decides the treatment
  only: every size of the heading block renders an `<h2>`, because a band is a section of a page
  rather than the page itself. `titleAs` states another level, and it is the only prop that does.
  A landing page whose hero *is* the page title, nothing above it but the navigation, passes
  `titleAs="h1"`; a page that gives its `<h1>` to a heading of its own leaves the band at `h2`,
  and every band below it takes a section heading.
- The band renders a `<section>` and names it with the headline it draws: it points
  `aria-labelledby` at the heading, so a reader navigating by region hears the headline rather
  than an unnamed region. A consumer's own `aria-labelledby` wins over the generated one, and
  every other attribute the band does not use itself is passed to that element, so an
  `aria-label` names the region differently as well.
- The actions go through [`Button`](/components/forms/button): an action with `href`, or with a
  router `component`, renders an anchor and announces as a link, and one without renders a
  `<button>`. The row is a column on a narrow window and a row from `sm`, so two labels stay
  readable on a phone.
- The media is a node you pass, and its alternative text is yours to state: a meaningful `alt` for
  a picture the claim depends on, and an empty one for a decorative frame the headline already
  explains.

The anatomy all five bands share, the configured actions and the one-`<h1>` rule are stated once in
[Marketing sections](/concepts/marketing-sections).

## Related

```related marketing-layout, cta, section
```