# People List (Moonarc)

The people of a practice as cards: each drawn by PortraitArt on a colour block, with the name, the role, the qualifications after the name, and the facts a patient or a client checks (the days they are in, the languages they speak, the register they are on and their number), a line in their own words and a link to their page. The cards sit in FocusSiblings: the one pointed at or focused stays, the others step back in grey, their text at full contrast. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/people-list` (license key required)
- Tier B · category section · trigger scroll, hover
- Readout: `<PeopleList people={[{ name, role, credentials, registration, days, portrait }]} />`
- 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 16.1 kB raw)
- Page: https://moonarc.dev/components/people-list/

## 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. |
| `people` | `{ id?; name; role; credentials?; registration?; days?; languages?; text?; href?; portrait }[]` | none | The people; portrait is PortraitArt's seed, hair, extra and block. With an href the name links the whole card; id names the card, for a link to it. |
| `words` | `{ days?; languages?; registration? }` | `In on, Speaks, Registered` | The facts' labels. |
| `columns` | `2 | 3 | 4` | `3` | Cards a row on a wide screen. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading; each name is 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 PeopleList from '@/components/moonarc/pro/PeopleList.astro';
---
<PeopleList
  headline="Who you will see"
  people={[
    { name: 'Dr Ada Lind', role: 'Dentist', credentials: 'BDS, MJDF', registration: 'Dental council 123456', days: 'Monday to Thursday', languages: 'English, Swedish', portrait: { seed: 'Ada Lind', block: 2 } },
  ]}
/>
```

## Reduced motion

The others still dim, at once and without shrinking.

## With ClientRouter

CSS and Reveal.

## Craft

- The name is the card's link and its ::after covers the card, so the card is one target and one tab stop.
- The registration is a fact of the card, written as the register prints it, so a reader can look the number up.
- FocusSiblings steps the others back in grey and a little smaller, at full opacity, so their text keeps its contrast while one card is pointed at.

## Replaces

- Team cards blocks

## Source

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