PageHero

The primary band that opens a page: the trail, the page’s h1, its lead and its calls to action, with the chevron bleeding off the right edge.

import { PageHero } from '@zitdevs/ui';

Examples

A page with nothing to call for, in Spanish:

1. Inicio/
2. Contacto

Contacto

Cuéntenos qué necesita su negocio.

Describa lo que quiere lanzar, mejorar o administrar.

A service page, with a qualifier, a foot and an aside, which splits the band, and every link through a router’s link (linkAs):

1. Home/
2. Services/
3. IT audit

Advise

Know what you run before you change it.

An inventory of your systems, what they cost and what is at risk.

Fixed scope, agreed in writing.

Book an auditTalk to us

Report in two weeks.

Healthy

import * as es from '@zitdevs/ui/labels/es';

<PageHero
  headingId="contact-hero"
  labels={es.breadcrumbs}
  breadcrumbs={[{ label: 'Inicio', href: '/es' }, { label: 'Contacto' }]}
  eyebrow="Contacto"
  title="Cuéntenos qué necesita su negocio."
  lead="Describa lo que quiere lanzar, mejorar o administrar."
/>

<PageHero
  linkAs={Link}
  headingId="audit-hero"
  breadcrumbs={trail}
  eyebrow="Advise"
  title="Know what you run before you change it."
  lead="An inventory of your systems, what they cost and what is at risk."
  primary={{ label: 'Book an audit', href: '/book' }}
  secondary={{ label: 'Talk to us', href: '/contact' }}
  aside={<ServiceVisual … />}
/>

Props

Prop	Type	Default	Notes
headingId	string	required	The h1’s id, which names the band.
breadcrumbs	readonly BreadcrumbItem[]	required	As in Breadcrumbs.
eyebrow	string	required
title	string	required	The page’s only h1.
lead	string	required
primary	{ label: string; href: string }	—	The inverse button. Leave both out on a page with nothing to call for.
secondary	{ label: string; href: string }	—	The inverseOutline button.
qualifier	ReactNode	—	Under the lead.
foot	ReactNode	—	Under the calls to action.
aside	ReactNode	—	Beside the copy, such as a service visual; it splits the band in two.
labels	Partial<BreadcrumbsLabels>	English	Forwarded to the trail: es.breadcrumbs from labels/es.
linkAs	LinkComponent	'a'	Renders the trail’s links and both calls to action: Next’s Link, or any router’s.
ref	Ref<HTMLElement>	—	The <section>.
className	string	—	Placement.
anything else	<section> attributes	—	Except aria-labelledby, which headingId sets.

Exported type: PageHeroProps. It has no words of its own: the trail’s landmark name comes from Breadcrumbs’ labels.

Accessibility

• A region named by the page’s only h1, under a navigation landmark for the trail: “Breadcrumb”, or “Ruta de navegación” with labels={es.breadcrumbs}. Without labels the landmark is named in English. See Languages.
• With neither call to action the band draws no empty row.
• The chevron is hidden decoration.

Without JavaScript

It needs none: a heading, a trail and links, rendered as a Server Component, through a router’s link too. See Router links.

aside splits the band whenever it is given, even as a component that renders nothing: only the props are known on the server.

Theming

primary, with on-primary text, the primary trail and the inverse and inverseOutline buttons. The chevron is primary-inverse, from 800px in: the copy (max-w-190 plus the column’s padding, 784px) ends before it at every width, because white on the chevron reads at only 3.2:1. If the column grows, keep both in step.