Hero split image
BlockA two-column hero with a headline, reviewer avatars, a star rating and calls to action beside an image.
- Heroes
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add hero-split-imageimport { HeroSplitImageBlock } from "@/components/blocks/hero-split-image"; export default function Page() { return <HeroSplitImageBlock />;}<HeroSplitImageBlock>
| Prop | Type | Default |
|---|---|---|
description | string | "Accessible, composable building blocks for polished, animated interfaces — ready in minutes." |
headingLevelThe headline's level, so the block fits any page outline. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
imageThe image beside the copy. Without one, a token gradient holds its place. | HeroSplitImageImage | — |
primaryActionThe main call to action. | HeroSplitImageAction | null | { label: "Get started", href: "#" } |
reviewsSocial proof under the copy. | HeroSplitImageReviews | null | DEFAULT_REVIEWS |
secondaryActionThe quieter call to action. | HeroSplitImageAction | null | { label: "Watch the demo", 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 star rating is one image named in words ("Rated 4.9 out of 5"), and the visible figure beside it is hidden so it is not read twice. Reviewer avatars carry their names. The image is content and requires alt text; the placeholder shown without one is aria-hidden. The entrance runs on the motion scale and settles at rest under reduced motion.