Marketing

CTA Section

A full-width call-to-action banner with headline, subheading, and primary and secondary CTA buttons. Three variants: default (bordered), muted (grey background), and primary (brand-coloured).

Start building today

Free forever. No credit card required.

Get started Learn more

Ready to level up?

Join thousands of developers already using Aether UI.

Get started free

Ship your next project faster

Token-driven components, open-code, zero lock-in.

Get started View docs

import { CTASection } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add cta-section

Import

import.tsx

import { CTASection } from "@aetherstack/blocks"

Usage

cta-section.tsx

import { CTASection } from "@aetherstack/blocks"

export default function CTAPage() {
  return (
    <CTASection
      headline="Start building today"
      subheading="Free forever. No credit card required."
      primaryCta={{ label: "Get started", href: "/signup" }}
      secondaryCta={{ label: "Learn more", href: "/docs" }}
      variant="primary"
    />
  )
}

Props

Prop	Type	Default	Description
headline*	string	—	Section heading text.
subheading	string	—	Supporting paragraph below the headline.
primaryCta	{ label: string; href: string }	—	Primary action button.
secondaryCta	{ label: string; href: string }	—	Secondary action button.
variant	'default' \| 'muted' \| 'primary'	'default'	Visual style. default = bordered, muted = grey bg, primary = brand colour.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→Uses semantic <section> element.
→CTA links use <a> via Button asChild — include descriptive link text.
→In the primary variant, text colours automatically invert for contrast.