Call To Action (CTA)
Prominent CTA sections used to convert visitors with a clear value proposition and primary action
What is it?
A call-to-action section is designed to convert users by presenting a clear benefit and a single primary action. CTAs typically appear near the top of landing pages and again near the end of long pages.
Mockdown
``` ────────────── [Big Heading] Short supporting sentence that explains value. [Primary CTA] [Secondary Link] ────────────── ``` Characteristics: - Strong visual contrast for primary action - Short, benefit-focused copy - Optional supporting secondary action - Consider sticky or repeated CTAs on long pages
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ ┌───────────────────────────────────────┐ │
│ │ ✉ Preview text goes here... │ │
│ └───────────────────────────────────────┘ │
│ │
│ ◉ ACME Inc. │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ │ │
│ │ 🚀 Introducing Our New Feature │ │
│ │ │ │
│ │ We've been working hard to bring │ │
│ │ you something special... │ │
│ │ │ │
│ │ [ Learn More → ] │ │
│ │ │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Feature 1│ │ Feature 2│ │ Feature 3│ │
│ │ desc │ │ desc │ │ desc │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Unsubscribe · Preferences · View Online │
└───────────────────────────────────────────────┘Marketing
Product Launch Email Campaign
A responsive HTML email layout for a product launch — featuring a hero image, feature highlights, social proof, and a single focused CTA — compatible with major email clients.
--email--campaign--launch
Simple
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
SaaS Product Landing Page
A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.
--hero--cta--features
Medium
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.