# Service Index (Moonarc)

What a practice does, by group: each group's name and a line about it on one side, its services on the other as rows, each with a line of what it is, how long it takes and what it costs from, and a link to its own page. One group sets its rows alone. The row is the link, its arrow moving a little on hover and focus; nothing else moves. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/service-index` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<ServiceIndex groups={[{ name, services: [{ title, text, duration, price, href }] }]} />`
- 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 10.4 kB raw)
- Page: https://moonarc.dev/components/service-index/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `groups` | `{ name; text?; services: { title; text?; duration?; price?; href? }[] }[]` | none | The groups and their services; a service with an href is a link to its page. |
| `more` | `{ href; label }` | none | A link under the index. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading; groups are one below and services one below them (one group: the services are one below). 1 under a page's own heading. |
| `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 ServiceIndex from '@/components/moonarc/pro/ServiceIndex.astro';
---
<ServiceIndex
  headline="What we do"
  groups={[
    { name: 'Check-ups', text: 'For every patient, twice a year.', services: [
      { title: 'Check-up', text: 'An examination and a plan, with X-rays when they are due.', duration: '30 minutes', price: 'From $85', href: '/services/check-up/' },
    ] },
  ]}
/>
```

## Reduced motion

The groups arrive at once and the arrows stay still.

## With ClientRouter

CSS and Reveal.

## Craft

- Every service is a heading inside its link, so a screen reader's list of headings is the list of services.
- The duration and the price sit in a column of their own, numbers aligned, and drop under the words on a phone.
- One group drops the side column, so a practice with one kind of service gets a plain list.

## Replaces

- Services grid blocks

## Source

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