Staaarter

Split Layout Newsletter CTA

A visually rich, two-column newsletter call-to-action: a full-height decorative photo fills one side, while the other holds a heading, a short checklist of what subscribers get, and an inline email input with a subscribe button. Perfect for conversion sections that need real visual weight.

By Staaarter Team
CTA
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/split-layout-newsletter-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta9.tsx instead.

Usage

The file also exports cta9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta9, cta9Demo } from "@/components/blocks/cta/cta9";

export default function Page() {
  return <Cta9 {...cta9Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Stay ahead of every release"Section heading.
descriptionstringnoneSupporting paragraph under the heading.
featuresstring[]noneShort checklist of subscriber benefits.
imageMediaSlotImagenoneDecorative photo filling the opposite column.
emailPlaceholderstring"[email protected]"Placeholder text for the email input.
actionLabelstring"Subscribe"Label for the submit button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Fully static: this is a Server Component, so the form has no onSubmit handler and the email input is uncontrolled, nothing is sent anywhere on submit.
  • The image side uses MediaSlot inside an aspect-ratio wrapper div (per this repo's Safari height-collapse gotcha) and falls back to a decorative placeholder when no image is supplied.

More CTA Blocks

View all →

centered-newsletter-cta

Centered Newsletter CTA

Minimal centered call-to-action with heading, description, and action buttons.

newsletter-social-proof-cta

Newsletter CTA with Social Proof

Newsletter call-to-action with an avatar stack, subscriber count, and a testimonial quote.

banner-cta

Banner CTA

Horizontal banner call-to-action with heading and action buttons side by side.

stats-cta

Stats CTA

Call-to-action section with impressive statistics and trust indicators above action buttons.

multi-card-cta

Multi-Card CTA

Three action cards side by side, each offering a different path to conversion.

benefit-checklist-cta

Checklist CTA

Call-to-action with a vertical list of benefit checkmarks and action buttons.