CTA split image
BlockA two-column call to action whose copy and image slide in from either side.
- Sections
- 1 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add cta-split-imageimport { CtaSplitImageBlock } from "@/components/blocks/cta-split-image"; export default function Page() { return <CtaSplitImageBlock />;}<CtaSplitImageBlock>
| Prop | Type | Default |
|---|---|---|
description | string | "Stop building UI from scratch. Use production-ready, accessible components that work with your existing design system." |
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. | CtaSplitImageImage | — |
primaryActionThe main call to action. | CtaSplitImageAction | null | { label: "Browse components", href: "#" } |
secondaryActionThe quieter call to action. | CtaSplitImageAction | null | { label: "Read the docs", href: "#" } |
titleThe headline. | string | "Ship faster with animated components" |
Plus every attribute of <section> except title.
One section landmark named by its headline, whose level is a prop (default 2). Actions are real links. The image is content and requires alt text; the placeholder shown without one is aria-hidden. The slide-in follows reading direction, plays once on first scroll into view and settles instantly under reduced motion.