MediaHero
Alt text for image (omit/empty for decorative).
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
Alt text for image (omit/empty for decorative).
Accessibility
Landmark structure (header/nav/footer) with skip-to-content support. Collapsible navigation keeps an accessible name when collapsed.
Import
const { MediaHero } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
variant | "bare" | "box" | "cards" | "carousel" | — | Layout style. |
media | HeroMedia | — | Background media (all variants except carousel). |
eyebrow | React.ReactNode | — | |
title | React.ReactNode | — | |
text | React.ReactNode | — | |
actions | React.ReactNode | — | Buttons/links row. |
box | "translucent" | "solid" | "light" | — | Panel style for variant="box". |
cards | HeroNavCard[] | — | Bottom navigation cards for variant="cards". |
slides | HeroSlide[] | — | Slides for variant="carousel". |
size | "sm" | "md" | "lg" | "full" | — | Hero height. |
align | "center" | "end" | — | Vertical placement of content. |
scrim | "soft" | "default" | "strong" | — | Scrim strength for legibility. |
autoPlay | boolean | — | Auto-advance the carousel (paused under prefers-reduced-motion). |
interval | number | — | Carousel interval in ms. |
className | string | — |