# Service Detail (Moonarc)

A service's own page, top to bottom: its name and what it is in a sentence, then the parts a reader looks for before booking (what it is, who it is for, what happens step by step, what to bring, what comes after), each under its own heading; beside them a card that stays in view while the page scrolls (position: sticky, nothing animated) with the facts (how long, from what price, whether insurance covers it), the two actions and a line of small print. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/service-detail` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<ServiceDetail title parts={[{ heading, text, steps }]} facts primary />`
- 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 13.5 kB raw)
- Page: https://moonarc.dev/components/service-detail/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | none | The service's name, the page's heading. |
| `summary` | `string` | none | What it is, in a sentence. |
| `eyebrow` | `string` | none | A short line above the title. |
| `parts` | `{ heading; text?; list?; steps? }[]` | none | The parts in order: paragraphs, a list of points, or numbered steps. |
| `facts` | `{ label; value }[]` | none | The card's facts. |
| `primary` | `{ href; label }` | none | The card's first action: book. |
| `secondary` | `{ href; label }` | none | The second: call, or see the fees. |
| `fine` | `string` | none | Small print under the actions. |
| `back` | `{ href; label }` | none | A link back to every service, over the title. |
| `block` | `1 | 2 | 3 | 4 | 5` | `1` | The card's colour block. |
| `level` | `1 | 2` | `1` | Heading level of the title; each part is 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 ServiceDetail from '@/components/moonarc/pro/ServiceDetail.astro';
---
<ServiceDetail
  title="Check-up"
  summary="An examination of your teeth and gums, and a plan for what, if anything, comes next."
  parts={[
    { heading: 'What happens', steps: ['We ask about your health and anything that hurts.', 'The dentist examines your teeth and gums.', 'You leave with a plan and its price.'] },
  ]}
  facts={[{ label: 'Takes', value: '30 minutes' }, { label: 'Costs', value: 'From $85' }]}
  primary={{ href: '/book/', label: 'Request this appointment' }}
/>
```

## Reduced motion

The parts arrive at once; the card is sticky either way, which is a position and not a motion.

## With ClientRouter

CSS and Reveal.

## Craft

- The card is an aside named by the service, so a screen reader can jump to the facts and the booking link.
- Steps are an ordered list counted in circles by a CSS counter, so the numbers are the list's and not typed.
- The card keeps in view below the site's bar through --ma-bar, the height the templates set.

## Replaces

- Service page templates

## Source

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