CTA Section

The call to action at the end of a landing page: a heading, one line of text and one or two actions — centered or split, on the page or on a band.

Centered

The default: heading, text and actions stacked and centered, with the section's own 64px of air above and below.

html

Start shipping today

Install with one command, theme it in one file, ship your first screen before lunch.

Get started Browse components

<section class="vt-cta vt-w-full">
  <div class="vt-cta-content">
    <h2 class="vt-cta-title">Start shipping today</h2>
    <p class="vt-cta-description">Install with one command, theme it in one file, ship your first screen before lunch.</p>
  </div>
  <div class="vt-cta-actions">
    <a class="vt-btn vt-btn-primary vt-btn-lg" href="/docs/installation/"><span>Get started</span></a>
    <a class="vt-btn vt-btn-bordered vt-btn-lg" href="/components/button/"><span>Browse components</span></a>
  </div>
</section>

Split

vt-cta-split: the text on the left and the buttons on the right from 768px; stacked and left-aligned below.

html

Ready to build?

Every component, token and pattern — free and open source.

Get started See examples

<section class="vt-cta vt-cta-split vt-w-full">
  <div class="vt-cta-content">
    <h2 class="vt-cta-title">Ready to build?</h2>
    <p class="vt-cta-description">Every component, token and pattern — free and open source.</p>
  </div>
  <div class="vt-cta-actions">
    <a class="vt-btn vt-btn-primary vt-btn-lg" href="/docs/installation/"><span>Get started</span></a>
    <a class="vt-btn vt-btn-bordered vt-btn-lg" href="/examples/"><span>See examples</span></a>
  </div>
</section>

Subtle Band

vt-cta-subtle sets the section on a rounded surface-subtle panel with a 48px inset — it closes the page without shouting. One action is enough.

html

Start shipping today

Install with one command, theme it in one file.

Get started

<section class="vt-cta vt-cta-subtle vt-w-full">
  <div class="vt-cta-content">
    <h2 class="vt-cta-title">Start shipping today</h2>
    <p class="vt-cta-description">Install with one command, theme it in one file.</p>
  </div>
  <div class="vt-cta-actions">
    <a class="vt-btn vt-btn-primary vt-btn-lg" href="/docs/installation/"><span>Get started</span></a>
  </div>
</section>

Brand Band

vt-cta-brand puts it on brand-fill with on-brand text — the loudest ending, once per page. It carries one action, and it is not brand-filled: vt-btn-secondary.

html

Ready to build?

Every component, token and pattern — free and open source.

Get started

<section class="vt-cta vt-cta-brand vt-cta-split vt-w-full">
  <div class="vt-cta-content">
    <h2 class="vt-cta-title">Ready to build?</h2>
    <p class="vt-cta-description">Every component, token and pattern — free and open source.</p>
  </div>
  <div class="vt-cta-actions">
    <a class="vt-btn vt-btn-secondary vt-btn-lg" href="/docs/installation/"><span>Get started</span></a>
  </div>
</section>

Guidelines

Try it free

Get started

One clear action, a second one at most — the main action first.

Try it free

Get started

Don't

Don't put a brand-filled button on the brand band — it disappears.

API Reference

Class	Type	Description
`vt-cta`	Base	The section — centered column, text above the actions 32px apart; 64px above and below, 24px at the sides
`vt-cta-content`	Part	Heading and description, 12px apart
`vt-cta-title`	Part	The call to action — Heading/LG, an h2
`vt-cta-description`	Part	One supporting line — Body/MD, muted, at most 24rem wide
`vt-cta-actions`	Part	One or two vt-btn vt-btn-lg, the main one first, 12px apart; they wrap on a narrow screen
`vt-cta-split`	Layout	Text on the left, buttons on the right from 768px, vertically centered; stacked and left-aligned below
`vt-cta-subtle`	Surface	On a band: surface-subtle, radius 2xl, 48px inset
`vt-cta-brand`	Surface	On a brand-fill band, radius 2xl, 48px inset; heading on-brand, description on-brand at 80%
`vt-btn-secondary`	Part	The one action on a brand band — secondary; never a brand-filled button on brand

Accessibility

Feature	Details
Semantics	A <section> with an h2 heading; the section can take aria-labelledby pointing at it
Actions	Actions that go somewhere are links (<a class="vt-btn">); a button only when it acts on the page
Contrast	On the brand band the heading and description use on-brand, which the theme keeps readable on brand-fill
Link text	Say where the action leads ("Start free trial", not "Click here")

Built with:

Button