Footer CTA Section
Section-sized last-chance CTA with optional embedded social proof (logos and a testimonial). Composes PrimaryButtonCTA, and conditionally TrustLogoStrip and SingleQuoteTestimonial.
Live preview
Rendered with real component code. Each example demonstrates a documented variant.
Subtle variant
Ready to ship with confidence?
Join engineering teams already moving faster without sacrificing quality or visibility.
Bold variant
Start building today.
One codebase. Every conversion surface you need. No component fatigue.
With social proof
Trusted by engineering teams worldwide.
From seed-stage startups to established product teams, these patterns ship in hours, not weeks.
Used at companies like
Switching was the easiest infrastructure decision we made all year.
React props
Configure the component via props in React or via attributes in HTML.
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | string | required | Large heading text at the top of the section |
| description | string | undefined | Supporting paragraph beneath the headline |
| primaryCta | { label: string; href?: string; variant?: "solid" | "outlined"; icon?: "arrow-right" | "chevron-right" } | required | Primary action; rendered via PrimaryButtonCTA |
| secondaryCta | { label: string; href?: string; type?: "outlined" | "text-link" } | undefined | Optional secondary action; outlined renders via PrimaryButtonCTA, text-link renders a plain underlined anchor |
| proofLogos | { eyebrow?: string; logos: { name: string; src: string; href?: string }[] } | undefined | When provided, renders a TrustLogoStrip below the action group |
| proofQuote | { quote: string; attribution: { name: string; title?: string; company?: string } } | undefined | When provided, renders a SingleQuoteTestimonial as an anchor quote |
| alignment | "center" | "left" | "center" | Text and action alignment within the section |
| variant | "subtle" | "bold" | "subtle" | Subtle uses the default surface background; bold applies a brand-accent background |
| className | string | undefined | Extra class appended to the root element |
HTML usage
The HTML variant uses the same shared styles and class names. Drop into any stack.
<link rel="stylesheet" href="path/to/primary-button-cta/styles.css">
<link rel="stylesheet" href="path/to/footer-cta-section/styles.css">
<!-- Subtle centered (default) -->
<section class="fcs fcs--subtle fcs--center" aria-label="Get started">
<div class="fcs__inner">
<h2 class="fcs__headline">Ready to ship with confidence?</h2>
<p class="fcs__description">Join thousands of teams already moving faster.</p>
<div class="fcs__actions">
<a class="pbc pbc--solid pbc--rounded pbc--with-icon" href="/signup">
Get started
<svg class="pbc__icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" fill="none"/>
</svg>
</a>
</div>
</div>
</section>Customization
Override these CSS custom properties to integrate the component into your brand.
.fcs {
--fcs-bg: var(--brand-surface, #ffffff);
--fcs-bold-bg: var(--brand-accent, #1e5fcf);
--fcs-text-color: var(--brand-ink, #111827);
--fcs-bold-text-color: #ffffff;
--fcs-padding: 5rem 1.5rem;
--fcs-heading-size: 2.5rem;
--fcs-max-width: 56rem;
--fcs-description-color: var(--brand-muted, #6b7280);
--fcs-bold-description-color: rgba(255, 255, 255, 0.8);
--fcs-secondary-link-color: var(--brand-ink, #111827);
--fcs-bold-secondary-link-color: rgba(255, 255, 255, 0.9);
--fcs-gap-actions: 1rem;
--fcs-gap-proof: 3rem;
--fcs-heading-line-height: 1.15;
}