Hero product
BlockA centred hero with an announcement, headline and two calls to action over a large product screenshot.
- Heroes
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add hero-productimport { HeroProductBlock } from "@/components/blocks/hero-product"; export default function Page() { return <HeroProductBlock />;}<HeroProductBlock>
| Prop | Type | Default |
|---|---|---|
announcementA short linked announcement above the headline. | HeroProductAction | null | { label: "New: motion components", href: "#" } |
description | string | "Craft, build and ship modern websites with smooth, accessible animation." |
headingLevelThe headline's level, so the block fits any page outline. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
imageThe product screenshot. Without one, a token gradient holds its place. | HeroProductImage | — |
primaryActionThe main call to action. | HeroProductAction | null | { label: "Start building", href: "#" } |
secondaryActionThe quieter call to action. | HeroProductAction | null | { label: "Watch the video", href: "#" } |
titleThe headline. | string | "Build beautiful interfaces, effortlessly" |
Plus every attribute of <section> except title.
One section landmark named by its headline, whose level is a prop. The announcement and calls to action are real links. The screenshot is content and requires alt text; the placeholder shown without one is aria-hidden. The staged entrance runs on the motion scale and the hover lift and tilt are motion-safe only, so under reduced motion nothing moves.