HeroCard
HeroCard — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
HeroCard — Prism component.
Accessibility
When the whole card is actionable, expose a single accessible name and make it reachable with Tab + Enter. Decorative imagery uses empty alt.
Import
const { HeroCard } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
sectionNumber | React.ReactNode | — | e.g. "Section 03" or "03". |
title | React.ReactNode | — | |
description | React.ReactNode | — | |
leadout | React.ReactNode | — | Lead-out label; an arrow is appended. Default "Continue". |
image | string | — | Background image URL; a tinted overlay keeps text legible. |
tint | "dark" | "brand" | — | Overlay tint when shown. "dark" (neutral) or "brand". |
onPress | (e: React.SyntheticEvent) => void | — | |
href | string | — | |
className | string | — |