CTA Banner

Conversion-focused call-to-action section with heading, description, buttons, and four layout variants.

The CtaBanner block is a mid-page conversion prompt. It pairs a heading and description with one or more CTA buttons and supports four layout variants — from a simple centred strip to a full image overlay. The backgroundVariant field adjusts button colour treatment to maintain contrast on different backgrounds.

Props

heading · string · required

Section heading rendered as <h2> at 4xl–5xl. Required — Studio validation prevents saving without it.

description · string

Supporting text below the heading. Rendered as a paragraph with text-muted-foreground styling.

ctaButtons · Button[] · required

Array of button objects. At least one button is required. The first button uses the primary style; subsequent buttons use outline style (adjusted per backgroundVariant).

backgroundImages · SanityImageObject[]

Array of images with hotspot support. Only the first image is used. Hidden in Studio when variant is centered or spread. Required for split (right panel) and overlay (full-width background) variants.

variant · 'centered' | 'split' | 'spread' | 'overlay'

Layout variant. Defaults to centered. See Variants for details.

backgroundVariant · 'white' | 'light' | 'dark' | 'primary'

Background colour of the section. Adjusts button colour classes:

• primary — primary button uses bg-background text-primary; secondary uses inverted border.
• dark — secondary button uses border-background text-background with hover inversion.
• white / light — standard button styles.

spacing · 'none' | 'small' | 'default' | 'large'

Vertical padding override. Defaults to default.

maxWidth · 'narrow' | 'default' | 'full'

Content container max-width. Defaults to default.

class · string

Additional CSS classes.

id · string

HTML id for anchor targeting.

Button fields

{
  text: string;          // required
  url: string;           // required — path or absolute URL
  variant?: 'default' | 'secondary' | 'outline' | 'ghost';
}

Usage in Sanity Studio

1. Add a CTA Banner block to a page.
2. Enter a Heading and optional Description.
3. Add at least one CTA Button with text and URL.
4. Expand Layout Options and choose a Variant.
5. If using split or overlay, upload a Background Image with alt text.
6. Set Background Variant to match your design — this automatically adjusts button contrast colours.

When variant is split or overlay, the Background Images field is shown and should contain at least one image. Without an image, the split variant shows an empty right panel and overlay renders without a background image.

Variants / Options

Variant	Layout	Image usage
centered	Content centred, max-w-3xl	No image
split	Text + buttons left, image right (50/50)	First image, 960×1080
spread	Heading left, buttons pinned right	No image
overlay	Full-width image background, centred text on top	First image, 1920×600 with 60% dark overlay

Example

{
  _type: 'ctaBanner',
  heading: 'Ready to Sponsor a Team?',
  description: 'Join 50+ companies shaping the next generation of software engineers.',
  variant: 'spread',
  backgroundVariant: 'white',
  ctaButtons: [
    { text: 'Become a Sponsor', url: '/sponsor', variant: 'default' },
    { text: 'View Tiers',       url: '/tiers',   variant: 'outline' }
  ]
}