Centered CTA

Fetch pattern JSON: curl https://webspire.de/patterns/cta/centered.json

centered.html

<section class="ws-cta relative overflow-hidden bg-[var(--ws-cta-bg)] py-24 sm:py-32">
  <!-- Subtle dot-grid background pattern -->
  <div class="absolute inset-0 bg-[radial-gradient(circle,_rgba(99,102,241,0.08)_1px,_transparent_1px)] bg-[length:24px_24px]" aria-hidden="true"></div>
  <!-- Decorative gradient glow -->
  <div class="absolute left-1/2 top-0 -z-0 h-72 w-[40rem] -translate-x-1/2 rounded-full bg-indigo-400/10 blur-3xl" aria-hidden="true"></div>

  <div class="relative mx-auto max-w-3xl px-6 text-center">
    <h2 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-cta-text)] sm:text-5xl">Take your projects to the next level</h2>
    <p class="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-[var(--ws-cta-text-soft)]">Start building beautiful, production-ready interfaces in minutes. No complex setup, no dependencies — just copy, paste, and ship.</p>
    <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
      <a href="#" class="rounded-xl bg-[var(--ws-cta-action-bg)] px-7 py-3.5 text-sm font-semibold text-[var(--ws-cta-action-text)] shadow-sm transition hover:bg-[var(--ws-cta-action-bg-hover)]">Get started free</a>
      <a href="#" class="rounded-xl border border-[var(--ws-cta-border)] bg-white/5 px-7 py-3.5 text-sm font-semibold text-[var(--ws-cta-text)] transition hover:bg-white/10">Learn more</a>
    </div>
  </div>
</section>

Details

Family

cta

Tier

enhanced

Kind

section

Extends

cta/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

ctacenteredconversionlanding-pageemphasis

Slots

Name	Required	Description
heading	Yes	Large bold action headline.
description	No	Supporting paragraph below the headline.
actions	Yes	Primary filled and secondary outline CTA buttons.

Full-width centered CTA section with generous padding, large bold headline, supporting paragraph, and side-by-side primary/secondary buttons. Subtle dot-grid background pattern with dark mode support. High-impact placement for landing pages and bottom-of-page conversion.