BlocksCall To Action
CTA 2
Dark background call-to-action with responsive horizontal layout and dual action buttons
Preview
Action-driving headline that creates urgency
Props
The CTA_2 block accepts the following props from PayloadCMS:
Prop
Type
Installation
npx shadcn@latest add @uifoundry/cta-2If 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
- Call To Action Pair Field - PayloadCMS array field for pairs of call-to-action buttons with label and href
- 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
- Payload - Headless CMS and application framework
Design Notes
This CTA block features:
- Dark background (neutral-950) for high contrast and visual impact
- Responsive layout: Centered on mobile, horizontal on desktop
- Dual action pattern: Primary button (white) and secondary link
- Flexible text alignment: Centered on mobile, left-aligned on desktop
- Source: Based on shadcnblocks.com CTA design pattern
Use this component for strong, bold call-to-action sections that demand attention with high contrast styling.