Loading…

CTA banner

Block

A compact banner call to action: headline, one line of copy and a single action.

Sections
2 components
1 file

Start building today

Install any component with a single command.

Get started

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-banner

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 { CtaBannerBlock } from "@/components/blocks/cta-banner"; export default function Page() {  return <CtaBannerBlock />;}

Built from

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

API

<CtaBannerBlock>

Prop	Type	Default
`action` The single action. `null` hides it.	`CtaBannerAction \| null`	`{ label: "Get started", href: "#" }`
`description`	`string`	`"Install any component with a single command."`
`headingLevel` The headline's level, so the block fits any page outline.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`title` The headline.	`string`	`"Start building today"`

Plus every attribute of <section> except title.

Accessibility

One section landmark named by its headline, whose level is a prop (default 2). The action is a real link whose arrow mirrors in right-to-left text. The banner settles in once, on first scroll into view, and instantly under reduced motion.