Skip to content
Aback UI

Block · Marketing

Call to action

A closing banner with one primary and one optional secondary action, in brand or neutral tone.

Beta1 componentRegistry JSON (opens in a new tab)
the Call to action preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add cta-banner

The block lands at components/blocks/cta-banner.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • One primary action. A second, quieter action is optional. More than two dilutes the banner.
  • Use the brand tone at the end of a marketing page and the muted tone on dense product pages.

Accessibility

  • The banner is a section labelled by its h2.
  • Actions are links because they navigate. The arrow is decorative.
  • On phones the actions stack at full width, so touch targets stay large.