Cta 16 - Contained image CTA with flat overlay

Pro

A call to action with a background image inside a rounded container, a uniform dark overlay, centered headline and description, and a single secondary button.

Shadcn Cta 16 block

Component Data

  • ID:cta16
  • Access:pro
  • Created:Oct 9, 2024
  • Type:block

Cta 16 block design & features

Cta16 is a single-column call to action built with Shadcn UI, placing a background photograph inside a rounded container panel with a flat dark overlay. Unlike gradient-based variants, the overlay applies an even level of opacity across the entire frame, giving consistent text contrast regardless of where the image is brightest. The text stack holds a centered headline, description, and a single secondary button.

The panel sits inside the page container with rounded corners, creating a card-like frame with visible side margins. The overlay uses a foreground color at reduced opacity, so it adapts to the current theme. Headline type is semibold with tight tracking, and the body text drops slightly in opacity for visual hierarchy. The props interface adds optional eyebrow fields for a short label above the headline.

A simple block that reads as a slightly more uniform alternative to gradient-overlay CTAs. The flat overlay makes text legibility predictable across a wider range of background photographs since there is no gradient falloff to worry about. Swapping the image prop is the main customization point.