Skip to main content
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

VariantLayoutImage usage
centeredContent centred, max-w-3xlNo image
splitText + buttons left, image right (50/50)First image, 960×1080
spreadHeading left, buttons pinned rightNo image
overlayFull-width image background, centred text on topFirst 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' }
  ]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us