Cta

Live, interactive React component · light themeResponsive

About the Neo-Brutal Cta

The closing call to action. panel is an ink-outlined block on its tone (the cobalt band by default, white text, volt focus ring, and primary keys stay volt): a kicker eyebrow, a big narrow h2 (text-headline; put the second key word of the page in <span className="uline">), text, then a bottom row with the media at the start and the actions and note at the end. The column guides sit behind the panel unless backdrop={false} (the landing turns them off). plain has no box and takes its tone from the Section around it.

It is part of Neo-Brutal. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.

See it on a full page

The same piece, drawn for a different look. Open one to compare it live.

All 8 in CTA & Newsletter

Noir Aurora Cta

The closing call to action: eyebrow (with the section index), an h2 in moonlight silver, text, actions and a note, with optional media beside it (hidden under lg). panel with tone="accent" (the default) is a large night block in both themes (near-black, lit only by the curtain rising from its bottom edge; not the green band); the copy stays on night above the hem. default and muted panels follow the page's theme, inverse takes the other one. plain has no box and takes its tone from the Section around it.

Soft Bento Cta

The closing call to action: eyebrow, h2, text, actions and a note, with optional media beside it (hidden under lg). panel is a rounded block in its tone: by default the blue slab with drifting wind grooves (the view's one loop, so its floating cards don't float); plain has no box and takes its tone from the Section around it.

Swiss Tech Mono Cta

The closing call: the ruled index row (with index), a headline across 9 columns (type-display text-headline) with the actions and note on the last 3, and a mono meta row under a rule at the foot. panel is a rounded block in its tone (the acid band by default) over the column guides; plain has no box and takes its tone from the Section around it (the full-bleed acid band in SKILL.md).