docs / patterns / cta-banner

CtaBanner

the panel that closes a marketing page: a title, a line of copy, and the one action you want next. everything below the title is optional, so it degrades to just a headline and a button.

intensity · structuresrsc · server

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

the last section of a landing page, before the footera proof row of Chips under the action when you have receipts to shownot mid-page. one per page, at the closenever nest one inside a Card. it is already a panel

a11y

the title is a real heading at headingLevel · the footer rule is aria-hiddenjest-axe
live demo · try it out

Have something in mind?

Design engineering for teams that sweat the details. A short call is the fastest way to start.

Recent work
FintechHealthDeveloper tools
customize
headingLevelmatch the page outline
footertrailing proof row, drawn under a rule
usagecopy
import { CtaBanner } from "@usva-ui/react/patterns/cta-banner";
import { Button } from "@usva-ui/react/primitives/button";
import { Chip } from "@usva-ui/react/primitives/chip";

<CtaBanner
  title="Have something in mind?"
  body="Design engineering for teams that sweat the details. A short call is the fastest way to start."
  action={<Button>Start a project</Button>}
  footerLabel="Recent work"
  footer={<><Chip>Fintech</Chip><Chip>Health</Chip></>}
/>

props

proptypedefaultnotes
titleReactNode—the panel headline.
bodyReactNode—supporting copy.
headingLevel"h2" | "h3" | "h4""h2"heading element for the title. match the page outline.
actionReactNode—the call to action. pass a Button.
footerReactNode—trailing proof row. draws a rule above itself.
footerLabelReactNode—mono kicker beside the footer content.

get it

bun add @usva-ui/reactcopy
usagecopy
import { CtaBanner } from "@usva-ui/react/patterns/cta-banner";
import { Button } from "@usva-ui/react/primitives/button";
import { Chip } from "@usva-ui/react/primitives/chip";

<CtaBanner
  title="Have something in mind?"
  body="Design engineering for teams that sweat the details."
  action={<Button>Start a project</Button>}
  footerLabel="Recent work"
  footer={<><Chip>Fintech</Chip><Chip>Health</Chip></>}
/>