Call To Action Split

A split call-to-action block — heading and copy on one side, CTA links and an assurance line on the other.

v0.1.1Page blockCall to action familySplit CTA

New in 0.1.1 Version the current component and shared source, including explicit localization semantics where applicable.

Installation

npx payload-components add call-to-action-split

What it installs

Copies 3 source files into your project:

  • src/blocks/shared/callToActionFields.tsshared
  • src/blocks/CallToActionSplit/config.ts
  • src/blocks/CallToActionSplit/Component.tsx

…and makes 4 edits to wire the block into your project:

Registers the blocksrc/collections/Pages/index.ts
Maps the renderersrc/blocks/RenderBlocks.tsx
Regenerates typessrc/payload-types.ts
Regenerates the admin import mapsrc/app/(payload)/admin/importMap.js
callToActionFields.ts is shared source for this component family. Components that install the same path reuse that local copy, and re-running an install never overwrites a copy you have changed.

Re-running the CLI install detects existing source and wiring, then records install state in .payload-components/state.json.

Content model

title and description come from the shared call-to-action base at src/blocks/shared/callToActionFields.ts, so editing them updates every installed call-to-action block at once. assurance and links are specific to this variant.

The copy column stays left-aligned while the actions sit at the end of the row on large screens, so this variant suits a mid-page or footer prompt where a centered layout would break the reading line.

Prop

Type

Each item in links carries a link group with the standard Payload link fields (type, reference, url, label, newTab, appearance). The first link renders as the default button and an outline appearance renders as the secondary action.

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the CallToActionSplit block to its layout.
Fill the content. Complete the fields from the content model above — the component ships sample content you can start from.
Publish. Save and publish the page; the block renders through RenderBlocks on the frontend, fully typed — no extra wiring.

Requirements

Target
payload-website-starter, payload-blocks-app
Payload
v3
Next.js
15 / 16
shadcn UI
none

Your project must already expose components.json, src/payload.config.ts — the surfaces patched by payload-components add. The CLI verifies this against the support matrix before touching anything.

In this family

call-to-action-centered
Call To Action CenteredA centered call-to-action block: heading, supporting copy, and one or two CTA links.
call-to-action-boxed
Call To Action BoxedA boxed call-to-action block: heading, copy, and CTA links inside a nested panel.
call-to-action-splitcurrent
Call To Action SplitA split call-to-action block: heading and copy on one side, CTA links and an assurance line on the other.
call-to-action-signup
Call To Action SignupAn email-capture call-to-action block: heading, copy, and a form that posts to a same-origin endpoint.