Inline CTA

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

inline.html

<section class="ws-cta bg-[var(--ws-cta-bg)] py-16">
  <div class="mx-auto max-w-7xl px-6">
    <div class="flex flex-col items-center justify-between gap-6 rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] px-8 py-8 sm:flex-row">
      <div>
        <h3 class="text-xl font-semibold text-[var(--ws-cta-text)]">Want to stay in the loop?</h3>
        <p class="mt-1 text-sm text-[var(--ws-cta-text-soft)]">Get notified when we add new patterns and features.</p>
      </div>
      <div class="flex shrink-0 gap-3">
        <a href="#" class="rounded-xl bg-[var(--ws-cta-action-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-cta-action-text)] transition hover:bg-[var(--ws-cta-action-bg-hover)]">Subscribe</a>
        <a href="#" class="rounded-xl border border-[var(--ws-cta-border)] bg-white/5 px-5 py-2.5 text-sm font-semibold text-[var(--ws-cta-text)] transition hover:bg-white/10">Learn more</a>
      </div>
    </div>
  </div>
</section>

Details

Family

cta

Tier

enhanced

Kind

section

Extends

cta/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

ctainlinebannerconversioncompact

Slots

Name	Required	Description
heading	Yes	Short action headline.
description	No	Supporting text.
actions	Yes	Primary and secondary CTA buttons.

Compact inline CTA bar in a rounded container. Horizontal layout with headline, description, and dual action buttons. Stacks vertically on mobile. Place between content sections for mid-page conversion.