# Block CTA (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/block-cta` (license key required)
- Tier B · category section · trigger scroll, hover
- Readout: `<BlockCta headline="…" primary={{ href, label }} motif="sun" />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16)
- Measured cost: 0 B JS of its own · uses Magnetic + runtime + Reveal (with dependencies 3.6 kB raw; CSS 18.8 kB raw)
- Page: https://moonarc.dev/components/block-cta/

## 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. |

## Usage

```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>
```

## 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.

## Craft

- 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)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/block-cta` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: magnetic, motif, reveal.