CtaBand

section · static (no JavaScript) · no children. All components: component playground.

Description for the model

Closing call to action: a banner or a newsletter-style band.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "CtaBand",
  "props": {
    "variant": "banner",
    "eyebrow": "Ready?",
    "title": "Start your first lesson today",
    "text": "No account needed for the preview.",
    "cta": {
      "label": "Try a lesson",
      "href": "/courses/1"
    },
    "secondary": {
      "label": "Talk to us",
      "href": "/contact"
    }
  }
}

Props

Prop	Type	Required	Notes
variant	"banner" | "newsletter" | "terminal"		Style; terminal shows code lines in a terminal window. default "banner"
eyebrow	string		Small label above the title. max length 80
title	string	yes	Section title. max length 160
text	string		One or two sentences under the title. max length 600
code	array of string		Terminal lines (terminal variant); lines starting with $ are commands. max 10 items
cta	object	yes	A link or call to action
cta.label	string	yes	Visible text. max length 80
cta.href	string (href)	yes	Target URL. max length 2048
secondary	object		A link or call to action
secondary.label	string	yes	Visible text. max length 80
secondary.href	string (href)	yes	Target URL. max length 2048
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Start your first lesson today
No account needed for the preview.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "title": "Missing the button"
}

Issues:

• /cta is required

Rendered as:

Missing the button

Accessibility

axe-core: 14 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.