CTA

A mid-page conversion block: title + lede + actions. Hero-lite — smaller, less display-y, designed to live inside the page flow rather than dominate the top.

When to use

End-of-page conversion: "Ready to start?"
Section dividers with a primary call to action.
Mid-page reminders to subscribe / sign up / contact.

For above-the-fold landing introductions, use Hero. For inline single buttons, just use Button directly.

Variants

Variant	Class	Use for
Default	`.cta`	Raised surface card, centered
On accent	`.cta.-on-accent`	Accent-colored block
On inverse	`.cta.-on-inverse`	Inverse (dark) block
Bordered	`.cta.-bordered`	Outlined, no fill
Start	`.cta.-start`	Left-aligned (override of centered)

Variants compose: .cta.-on-accent.-start.

Anatomy

<section class="cta">
  <h2 class="cta__title">Ready to start?</h2>
  <p class="cta__lede">Free for personal use, no card required.</p>
  <div class="cta__actions">
    <a class="button -primary">Sign up</a>
    <a class="button -ghost">Talk to sales</a>
  </div>
</section>

<!-- Accent variant -->
<section class="cta -on-accent">
  <h2 class="cta__title">Try Pro for 14 days.</h2>
  <p class="cta__lede">Cancel anytime.</p>
  <div class="cta__actions">
    <a class="button -secondary">Start trial</a>
  </div>
</section>

Tokens used

From semantic tier

--color-surface-raised — default background
--color-accent — on-accent
--color-ink-strong — on-inverse + default text
--color-ink-regular — lede text
--color-ink-inverse — on-accent / on-inverse text
--color-border-default — bordered variant
--space-inset-section-m — padding
--space-gap-elements-{s,m} — gaps
--radius-section — corner radius
--border-width-hairline
--font-display-statement-*, --font-body-regular-*

Component-tier (shared with Hero)

--hero-max-content — measure cap

Accessibility

Use <section> for the wrapper so the block participates in document outline.
The title is an <h2> (or <h3> if the surrounding hierarchy is deeper). Don't reuse <h1> here — that's Hero's job.

Edge cases

No lede: drop the <p>. Title + actions alone is fine.
Single button: still wrap in .cta__actions so spacing stays consistent.
Bordered + on-accent: rare but allowed; border becomes barely visible against the accent fill — usually you want one or the other.

Do

Use Hero for the top of the page, CTA for everything else that asks for action.
Pair .cta.-on-accent with .button.-secondary so the button reads as the "other" surface.

Don't

Don't stack two CTAs back-to-back. One conversion ask per section.
Don't put more than 2 buttons in .cta__actions — the call dilutes.