cta call-to-action conversion banner landing-page cta call-to-action banner conversion action call to action section conversion banner with buttons
CTA Base
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/base.json base.html
<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
<div class="mx-auto max-w-3xl px-6 text-center">
<h2 class="text-[var(--ws-cta-text)] text-balance text-3xl font-bold tracking-tight sm:text-4xl">Ready to build faster?</h2>
<p class="mt-4 text-pretty text-lg text-[var(--ws-cta-text-soft)]">Start with free patterns, upgrade when your team grows. No credit card required.</p>
<div class="mt-8 flex flex-wrap justify-center gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-cta-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-cta-action-text)] 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-6 py-3 text-sm font-semibold text-[var(--ws-cta-text)] transition hover:bg-white/10">View documentation</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ctacall-to-actionconversionbannerlanding-page
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Compelling action headline. |
| description | No | Supporting text. |
| actions | Yes | Primary and secondary CTA buttons. |
Dark-background CTA banner for placing between content sections. Drives conversions with a clear headline and dual action buttons.