PageHero
PageHero — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
PageHero — Prism component.
Accessibility
Landmark structure (header/nav/footer) with skip-to-content support. Collapsible navigation keeps an accessible name when collapsed.
Import
const { PageHero } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
eyebrow | React.ReactNode | — | Small overline above the title (optionally with a leading icon node). |
title | React.ReactNode | — | |
description | React.ReactNode | — | |
actions | React.ReactNode | — | Action nodes (Buttons) rendered in a row below the copy. |
media | React.ReactNode | — | Media node shown beside the copy (above it when align="center"). |
align | "start" | "center" | — | |
tone | "default" | "primary" | "secondary" | "tertiary" | "accent" | — | Tints the whole band: section accents or the brand accent. |
children | React.ReactNode | — | |
className | string | — |