CtaBand

Closing headline with a command and actions.

Preview

Start using it

One command makes the site, and one more publishes it.

npx docs-sitekit init

src/examples/cta-band/example.astro

---
import CtaBand from "@/presentation/components/site/cta-band.astro";
---

<CtaBand
  title="Start using it"
  text="One command makes the site, and one more publishes it."
  command="npx docs-sitekit init"
  primary={{ label: "Get started", href: "#" }}
  secondary={{ label: "GitHub", href: "#" }}
/>

Add to your site

npx docs-sitekit add cta-band

It writes these files, and keeps a file you changed:

src/presentation/components/site/cta-band.astro

It requires these entries of the registry, which add restores first:

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of cta-band
Key	Type	Default	Allowed values	Description
`title`	string	required	-	The headline, as an h2.
`text`	string	-	-	A sentence under the headline.
`command`	string	-	-	A command to copy, in a CommandBox.
`primary`	{ label: string; href: string; }	required	-	The main action.
`secondary`	{ label: string; href: string; }	-	-	A second action, as an outline button.

Variants and states

Only what is required

A headline and one action. The text, the command and the second action are optional.

Ready when you are

Get started

src/examples/cta-band/minimal.astro

---
import CtaBand from "@/presentation/components/site/cta-band.astro";
---

<CtaBand title="Ready when you are" primary={{ label: "Get started", href: "#" }} />

About

The band at the end of a page: a headline, an optional sentence and command, and up to two actions.

Accessibility

The headline is an h2, so it sits under the h1 of the page.
The actions are links styled by buttonVariants at the lg size, which is 40 px high.
The glow behind the text is aria-hidden and outside the text.
The command is a CommandBox, see its notes for the copy button.

Source

cta-band.astro

Edit this page

Last updated 5 November 2026