Staaarter

Editorial Asymmetric CTA

An asymmetric, editorial-style call to action: a small monospace eyebrow sits above a very large left-weighted headline, with a circular, stamp-like seal button pinned to the right. A hairline `border-t` baseline row underneath carries small monospace index text, like a magazine spread's folio line.

By Staaarter Team
CTA
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/editorial-asymmetric-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta70.tsx instead.

Usage

The file also exports cta70Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta70, cta70Demo } from "@/components/blocks/cta/cta70";

export default function Page() {
  return <Cta70 {...cta70Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Now booking Q3"Small monospace label above the heading.
headingstring"Let's build something that actually ships"Large left-weighted headline.
sealLabelstring"Start a project"Text inside the circular seal button.
sealHrefstring"#"Link target for the seal button.
indexLabelstring"01"Index number shown in the baseline row, e.g. a section number.
totalLabelstring"CTA"Short label paired with the index number, e.g. a section name.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The seal button is an inert link (`render={<Link/>}`) styled as a circular, stamp-like badge, not a real form submission.
  • The bottom baseline row is purely decorative typography (a folio-style index mark and a static 'Scroll for more' hint), no scroll tracking or real pagination.