# Press Kit (Moonarc)

What a writer needs on one page: the app's icon, the fact sheet (a description list a reader can copy from), the files to download with their format and size, the colours with their values, a few words from the people who make it, and who to write to. Every part is plain HTML; the downloads are links with the download attribute, and the colours are written out beside their swatches. The parts arrive in turn. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/press-kit` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<PressKit facts={[{ term, value }]} downloads={[{ label, href, meta }]} contact={{ email }} />`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 11.1 kB raw)
- Page: https://moonarc.dev/components/press-kit/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `facts` | `{ term: string; value: string }[]` | none | The fact sheet, in order. |
| `contact` | `{ email: string; name?: string; note?: string }` | none | Who to write to; the address is a mailto link. |
| `downloads` | `{ label: string; href: string; meta?: string }[]` | none | The files. meta is the format and size as words ("a 180 kB PNG, 1024 px"). |
| `colors` | `{ name: string; value: string }[]` | none | The colours, each a swatch with its name and value written out. |
| `quote` | `{ text: string; name: string; role?: string }` | none | A few words from the people who make it. |
| `icon` | `{ src: string; alt: string }` | none | The app's icon, drawn in a rounded square. Slot "icon" wins (an <svg> or an <Image>). |
| `words` | `{ facts?; downloads?; colors?; contact? }` | `Fact sheet, Downloads, Colours, Press contact` | The parts' headings, in the page's language. |
| `headline` | `string` | none | The heading. Slot "headline" wins. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading: what the material may be used for. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading: 1 when the kit opens its own page; the parts' headings are one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import PressKit from '@/components/moonarc/pro/PressKit.astro';
---
<PressKit
  headline="Press kit"
  copy="Everything here may be used in writing about the app."
  icon={{ src: '/press/icon.svg', alt: 'The app icon' }}
  facts={[
    { term: 'Launched', value: 'March 2025' },
    { term: 'Platforms', value: 'iPhone, iPad, Android, Apple Watch' },
    { term: 'Price', value: 'Free, or $3.99 a month' },
  ]}
  downloads={[{ label: 'App icon', href: '/press/icon.svg', meta: 'SVG' }]}
  colors={[{ name: 'Coral', value: '#ff6a4d' }]}
  quote={{ text: 'We wanted the smallest possible daily habit.', name: 'Ada Park', role: 'Founder' }}
  contact={{ email: 'press@example.com', note: 'We answer within a working day.' }}
/>
```

## Reduced motion

The parts are there at once.

## With ClientRouter

CSS and Reveal.

## Craft

- Nothing is behind a click: a writer on deadline selects the fact sheet's text, and every value is the page's own text, not a picture of it.
- Each download says its format and size before it is fetched, as a link with the download attribute.
- A colour's value is written beside its swatch, so it reads without the swatch and copies as text.

## Replaces

- Press kit pages built as PDFs
- Media kit pages in site builders

## Source

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