Staaarter

Framed Studio Call

A gallery-like call to action: a full-width hairline frame with small corner tick marks in each corner, holding a centered eyebrow, an oversized heading, and a single pill action. Understated and editorial, like a museum wall label.

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/framed-studio-call.json

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

Usage

The file also exports cta71Demo, 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 { Cta71, cta71Demo } from "@/components/blocks/cta/cta71";

export default function Page() {
  return <Cta71 {...cta71Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Studio hours"Small centered label above the heading.
headingstring"Book a quiet hour to talk through your idea"Large centered headline.
actionLabelstring"Reserve a slot"Label for the single pill action button.
actionHrefstring"#"Link target for the action button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The four corner tick marks are purely decorative, absolutely-positioned border segments; they carry no state and don't respond to scroll or hover.
  • The single action button is an inert link (`render={<Link/>}`), not a real form submission.