CTA Banner

Call-to-action banner section

Marketing BlockHero

Overview

A promotional section with headline, subtext, primary CTA, and optional secondary CTA. Supports four layout variants.

Usage

import { CTABanner } from '@leanicon/web-builder-library'

Variants

Minimal

Centered text on primary background.

Start your free trial today

No credit card required. Cancel anytime.

Get startedLearn more

Gradient

Like minimal but with a gradient background.

Supercharge your workflow

Join thousands of teams already using our platform.

Start free trial

Custom gradient

Use background to pick a named band. The default is grad-brand, whose copy renders in ink — white on teal is 2.18:1 and is never used.

Built for developers

Ship faster with a component library that just works.

Get startedView docs

With image

Two-column layout: text left, image right, on primary background.

See it in action

Watch a 2-minute demo of our platform.

Watch demoContact sales
App screenshot

Split

Two-column card: colored left panel with text, image fills right panel.

Transform your workflow

Everything you need to build better products, faster.

Try it freeBook a demo
App screenshot

Minimal (primary CTA only)

Ready to get started?

Sign up now

Notes

  • Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.
  • All CTA link href values are forwarded to <a> tags.

Props

NameTypeDefaultRequiredDescription
variant"split" | "minimal" | "with-image" | "gradient" | nullminimalNo
headlinestring—Yes
subtextstring—No
primaryCTACTAButton—Yes
secondaryCTACTAButton—No
imageImageProps—No
colorSchemeenum—No
backgroundenum—NoA named section band, used when `variant` is `"gradient"`. For standalone use only — inside a page the adapter does not pass it, because RenderBlocks already paints the band on the block wrapper. Replaces a free-text `gradientClassName`, which interpolated an arbitrary CMS string straight into `cn()`.
classNamestring—No