Hero

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: 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 as the first child of the main region.

Usage

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.

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.

Props

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: 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.

Related