CTA Section
Call-to-action block. Pro · Landing pages and brand › Conversion and footer
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add cta-section
npm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { CTASection } from 'valyro-ui-pro';
Props
| Prop | Type | Default | |
|---|---|---|---|
eyebrow | ReactNode | Small label above the title. | |
title * | ReactNode | Heading of the block; also the section's accessible name. | |
description | ReactNode | Supporting paragraph under the title. | |
primaryAction | MarketingAction | Large primary button; a link when it has href. | |
secondaryAction | MarketingAction | Large secondary button next to the primary one. | |
variant | 'default' | 'inverted' | 'gradient' | 'default' | inverted: foreground-coloured block. gradient: vivid colour field. |
visual | ReactNode | Illustration or product shot beside the text on wide screens. | |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Level of the title (h1–h6). |
Related components
- Newsletter Signup — Newsletter signup
- App Store Buttons — App store buttons: App Store, Google Play, Galaxy Store, RuStore
- Footer — Site footer
- Hero Section — Landing page hero
- Feature Grid — Feature grid
- Bento Grid — Responsive bento grid of cards in mixed sizes
- Logo Cloud — Customer logos
- Pricing Table — Pricing plans
- Comparison Table — Product comparison
- Testimonials — Customer testimonials
- FAQ Section — Frequently asked questions
- Award Badge — Award badge with a laurel wreath, stars and caption
Previous: Award Badge · Next: Newsletter Signup · All Landing pages and brand