# Package Cards (Moonarc)

Fixed packages with what they cost: each card names a package and who it suits, gives the price and what it is counted in (or "Price on request", for a business that quotes), lists what is included with a tick in a colour block, can carry a bonus line on that block, and ends in an action that asks about that package. The cards lift a hover step under the pointer. The action is a link: a contact page, a mailto, a chat. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/package-cards` (license key required)
- Tier B · category section · trigger hover
- Readout: `<PackageCards packages={[{ name, price, unit, includes, href }]} />`
- Browser support: widely (every browser)
- Measured cost: 0 B JS (CSS 11.9 kB raw)
- Page: https://moonarc.dev/components/package-cards/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `packages` | `{ name, tagline?, price?, unit?, note?, includes, bonus?, href, action?, external? }[]` | none | The packages, in order. A package without a price shows the section's onRequest line; note sits under the price; action replaces "Ask about <name>"; external opens the link in a new tab. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `copy` | `string` | none | A line under the heading. Slot "copy" wins. |
| `block` | `1 | 2 | 3 | 4 | 5` | `1` | The colour block the ticks and the bonus line paint. |
| `onRequest` | `string` | `'Price on request'` | What a package without a price says instead. |
| `ask` | `string` | `'Ask about'` | The action's first words, followed by the package's name. |
| `includesLabel` | `string` | `'Included'` | Accessible name of each card's list. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading; the packages' names are one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; on ink and brand the cards follow the tone's card colour. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import PackageCards from '@/components/moonarc/pro/PackageCards.astro';
---
<PackageCards
  headline="Monthly packages"
  packages={[
    { name: 'Starter', tagline: 'One channel, kept alive', price: '4.5 m', unit: 'a month', includes: ['12 posts', 'Captions', 'A monthly report'], href: '/contact/?package=starter' },
    { name: 'Growth', tagline: 'Two channels and ads', price: '8 m', unit: 'a month', includes: ['20 posts', '8 short videos', 'Ads set-up'], bonus: 'First month: a free shoot', href: '/contact/?package=growth' },
    { name: 'Custom', tagline: 'For groups and launches', includes: ['Everything above', 'A team on call'], href: '/contact/?package=custom' },
  ]}
/>
```

## Reduced motion

The cards do not lift and the action fills at once.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The price is the largest thing on the card after nothing: a package is chosen by what it costs and then by what it holds.
- "Price on request" is set a size smaller than a price, so a quoted package does not shout louder than a priced one.
- The action names the package ("Ask about Growth"), so a page of three cards has three distinct links, not three "Learn more".
- The lift is one hover step and the shadow does not grow: the card answers the pointer without leaving the grid.

## Replaces

- Pricing cards (Tailwind Plus)
- Package cards (Framer agency templates)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/package-cards` with a key in components.json (https://moonarc.dev/account/).