ClosingCta

Closing call-to-action band: inverse or tinted section with a title, lead, and action cluster.

DesktopPhone

View code

tsx

<ClosingCta
	title="Start watching your endpoints today"
	description={
		<>
			Five monitors and a status page, <strong>free for as long as you need them</strong>.
		</>
	}
	actions={
		<>
			<Button color="brand" mix={[landingCtaChrome()]}>Create an account</Button>
			<LinkButton href="/examples/sales" variant="surface" mix={[landingCtaChrome()]}>
				Talk to us
			</LinkButton>
		</>
	}
/>

<ClosingCta
	tone="brand"
	inset
	eyebrow="Ready when you are"
	title="Your next outage is already scheduled"
	description="…"
	actions={…}
/>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { ClosingCta } from "@sdxc/ui/landing";

Renders a centered closing band with chapter title, optional lead, and CTAs.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`tone`	`Tone`	No	Band fill. Defaults to DEFAULT_TONE.
`eyebrow`	`RemixNode`	No	Optional eyebrow above the title.
`title`	`RemixNode`	Yes	Closing title — required, always supplied by the page.
`description`	`RemixNode`	No	Supporting lead under the title.
`actions`	`RemixNode`	No	Primary/secondary actions rendered inside a CtaGroup.
`parts`	`PartsProps`	No	Per-part styling for title, lead, and actions.

Also accepts everything in Omit< LandingSection.Props, "children" | "tone" | "align" | "title" | "parts" >.