Hero
BlockBasic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Hero } from "@corew500/ui/blocks/hero"
<Hero>Content</Hero>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Hero title text (required) |
| subtitle | string | — | Subtitle or description text |
| action | HeroAction | — | Primary call-to-action button |
| secondaryAction | HeroAction | — | Secondary call-to-action button |
| media | HeroMedia | — | Featured media (image) below the content |
| titleEffect | HeroTitleEffect | — | Text effect to apply to specific title words. Words are identified by 0-indexed position after splitting on spaces. |
| contentWidth | enum | 4xl | Maximum width of the content area |
| decorative | enum | false | Show decorative border accents |
| animated | enum | true | Enable entrance animations (default true) |
| renderCta | (action: HeroAction, isPrimary: boolean) => ReactNode | — | Custom render function for CTA buttons |
| height | enum | auto | — |
| align | enum | center | — |
Accessibility
Screen Readers
- Title is an `<h1>` heading for SEO and screen readers
- Media images require alt text for screen readers
Additional
- - Renders as a `<section>` element for proper document structure
- Animations respect `prefers-reduced-motion` system setting
- CTA buttons have proper accessible names from labels
Localization
Translatable Content
- - All text props (title, subtitle, action labels) should be pre-translated
Additional
- Component does not contain internal i18n logic
- Use `renderCta` for localized link components (e.g., next-intl Link)