Loading…

CTA centered

Block

A centred call to action with two actions on a muted band with a soft glow.

Sections
1 components
1 file

Ready to build something great?

Start building with accessible, animated components today. Free, open source and ready for production.

Get started Learn more

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add cta-centered

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { CtaCenteredBlock } from "@/components/blocks/cta-centered"; export default function Page() {  return <CtaCenteredBlock />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

Button

API

<CtaCenteredBlock>

Prop	Type	Default
`description`	`string`	`"Start building with accessible, animated components today. Free, open source and ready for production."`
`headingLevel` The headline's level, so the block fits any page outline.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`primaryAction` The main call to action. `null` hides it.	`CtaCenteredAction \| null`	`{ label: "Get started", href: "#" }`
`secondaryAction` The quieter call to action. `null` hides it.	`CtaCenteredAction \| null`	`{ label: "Learn more", href: "#" }`
`title` The headline.	`string`	`"Ready to build something great?"`

Plus every attribute of <section> except title.

Accessibility

One section landmark named by its headline, whose level is a prop (default 2). Both actions are real links. The glow is aria-hidden decoration. The copy rises in once, on first scroll into view, and settles instantly under reduced motion.