Block CTA

The closing call on a colour block: a short line, a large heading that ends on a phrase in the emphasis face, a sentence and two pill actions, on one of the palette's blocks with a drawing (Motif) rising out of its lower corner. The panel opens a little as it arrives (Reveal); the actions fill from below on hover, the primary with the page's own colours so its text always reads. Zero JavaScript of its own.

Start a project

Something coming up? Tell us about it.

A new menu, or a busy season around the corner. Send a message and the content is planned around it.

Start a projectEmail

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Variants · each row writes the attribute the prop writes; the section's own CSS answers

densitycompactcozyroomy

Measured

JavaScript of its own

0 B

Uses Magnetic and the shared runtime (1.9 kB raw, once per site) and Reveal. With those included: 3.6 kB raw.

CSS 18.8 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 105 · Firefox 110 · Safari 16; needs container-units.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/block-cta

src/pages/index.astro

---
import BlockCta from '@/components/moonarc/pro/BlockCta.astro';
---
<BlockCta
  eyebrow="Start a project"
  copy="A new menu, or a busy season around the corner. Send a message and we will plan the content around it."
  primary={{ href: '/contact/', label: 'Start a project' }}
  secondary={{ href: 'mailto:hello@example.com', label: 'Email us' }}
  motif="sun"
>
  <span slot="headline">Something coming up? <em>Tell us about it.</em></span>
</BlockCta>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: magnetic, motif, reveal.

Props

Prop	Type	Default	Description
`headline`	`string`	none	The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour.
`eyebrow`	`string`	none	A short line above the heading.
`copy`	`string`	none	The sentence beside the actions. Slot "copy" wins.
`primary`	`{ href: string; label: string; external?: boolean }`	none	The first action: the block's text colour as a pill; on hover the page's ground wells up under the page's text.
`secondary`	`{ href: string; label: string; external?: boolean }`	none	The second action: an outlined pill. Slot "actions" replaces both.
`magnetic`	`boolean`	`true`	The primary action follows the pointer a little (Magnetic).
`block`	`1 \| 2 \| 3 \| 4 \| 5`	`1`	The colour block the panel paints.
`motif`	`'sun' \| 'gate' \| 'flower' \| 'grid' \| 'phone' \| 'plate' \| 'wave' \| 'shapes'`	none	The drawing rising out of the lower corner; none when unset.
`level`	`2 \| 3`	`2`	Heading level.
`density`	`'compact' \| 'cozy' \| 'roomy'`	`'cozy'`	Padding ×0.8 / ×1 / ×1.25 through --ma-density.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-blockcta.ma-blockcta__actions.ma-blockcta__art.ma-blockcta__copy.ma-blockcta__eyebrow.ma-blockcta__foot.ma-blockcta__headline.ma-blockcta__panel.ma-blockcta__primary.ma-blockcta__secondary

Slots

slot="eyebrow"slot="headline"slot="copy"slot="actions"

Reduced motion

The panel is in place; the actions fill at once on hover.

With `ClientRouter`

Inherits Reveal and Magnetic; nothing of its own to rebind.

Why it is built this way

The primary's hover fill is the page's own ground under the page's own text: the one pair every palette guarantees, whatever the block.
The heading is the largest type on the page after the hero: the closing call is a second opening.
The drawing rises out of the lower corner and is cut by the panel, so it never competes with the actions for the eye.

Replaces: CTA sections (Tailwind Plus). See the migration table.

Motif

Backgrounds

A drawn picture for a slot that has no photograph yet: a sun over the sea, a split gate, a flower, a grid of tiles, a phone going live, a plate set for dinner, waves under a moon or three shapes.

every browserhover

Call to Action

Pro

A closing call to action: a deep brand panel with an aurora and film grain behind it, a headline that catches a shine, a magnetic primary action, a secondary one, and a typed command.

every browserscrollpointer

Sample agency

A feed that lives up to the real thing.

SAMPLE AGENCY • SINCE 2023 •

A sample agency that plans, shoots, designs and posts for restaurants, stays and lifestyle brands.

Start a projectSee the work

Hero Blocks

Pro

The opening of a colour-block site: the headline rises line by line out of its masks, its last word turns through a few in the emphasis face (RotatingText), a round badge with text running around it links further down the page, the lede and two pill actions sit under it, and a strip of tiles in the palette's blocks runs across the bottom (Marquee), each a drawing (Motif) or a picture with a caption.

every browserloadhover

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown