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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Now booking Q3" | Small monospace label above the heading. |
| heading | string | "Let's build something that actually ships" | Large left-weighted headline. |
| sealLabel | string | "Start a project" | Text inside the circular seal button. |
| sealHref | string | "#" | Link target for the seal button. |
| indexLabel | string | "01" | Index number shown in the baseline row, e.g. a section number. |
| totalLabel | string | "CTA" | Short label paired with the index number, e.g. a section name. |
| className | string | none | Extra 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.
More CTA Blocks
View all →centered-newsletter-cta
Centered Newsletter CTA
Minimal centered call-to-action with heading, description, and action buttons.
split-layout-newsletter-cta
Split Layout Newsletter CTA
Two-column call-to-action with a decorative image on one side and a feature list plus subscribe form on the other.
newsletter-social-proof-cta
Newsletter CTA with Social Proof
Newsletter call-to-action with an avatar stack, subscriber count, and a testimonial quote.
banner-cta
Banner CTA
Horizontal banner call-to-action with heading and action buttons side by side.
stats-cta
Stats CTA
Call-to-action section with impressive statistics and trust indicators above action buttons.
multi-card-cta
Multi-Card CTA
Three action cards side by side, each offering a different path to conversion.