CTA 1

Clean centered call-to-action with header, subheader, and flexible action buttons

Preview

Ready to Ship Your Next Project?

Join the developers and founders building faster with UIFoundry. Choose your path and start building today.

Get Developer Template Start Hosted Trial

Props

The CTA_1 block accepts the following configuration from PayloadCMS:

Prop

Type

Installation

npx shadcn@latest add @uifoundry/cta-1

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component uses the following registry components:

Button - Customizable button component with variants
Header Field - PayloadCMS text field for headers
Subheader Field - PayloadCMS text field for subheaders
Call To Action Pair Field - PayloadCMS array field for pairs of call-to-action buttons
Block Constants - Block slug and group constants for PayloadCMS blocks

Dependencies

This component requires the following NPM packages:

React - JavaScript library for building user interfaces
Next.js - React framework for production
PayloadCMS - Headless CMS and application framework

Design Notes

This CTA block features:

Clean, centered layout: All content is center-aligned for maximum impact
Flexible spacing: Responsive padding that scales from mobile to desktop
Action button flexibility: Supports 0-2 action buttons with automatic gap spacing
Button variants: Alternating button styles (outline variant for secondary actions)
Balanced typography: Large, bold header with supporting subheader text
Maximum width container: Content constrained to 5xl for optimal readability

Use this component for simple, effective call-to-action sections that need clear messaging and prominent action buttons. Perfect for landing pages, product pages, or conversion-focused sections.