# Agent Cards (Moonarc)

The people a buyer deals with: each drawn by PortraitArt on a colour block, with the name, the role, the areas and languages, a figure or two, a line in their own words, and a call and an email as links. One card lays the portrait beside the words, for a listing's page; three or four are the team. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/agent-cards` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<AgentCards agents={[{ name, role, phone, email, 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 15.6 kB raw)
- Page: https://moonarc.dev/components/agent-cards/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `agents` | `{ name; role; areas?; languages?; stats?; quote?; phone?; email?; portrait }[]` | none | The people. portrait is PortraitArt's seed, hair, extra and block; phone is dialled as written, without its spaces. |
| `words` | `{ call?; email? }` | `Call, Email` | The words of the two links. |
| `headline` | `string` | none | The heading. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading; each name is one below. 1 under a page's own heading when the cards have none of their own. |
| `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 AgentCards from '@/components/moonarc/pro/AgentCards.astro';
---
<AgentCards
  headline="The people you will meet"
  agents={[
    { name: 'Rosa Vidal', role: 'Partner, sales', areas: 'Linden Hill, Southbank', languages: 'English, Spanish', stats: [{ value: '41', label: 'homes sold last year' }], phone: '+1 555 0142', email: 'rosa@example.com', portrait: { seed: 'Rosa Vidal', block: 1 } },
  ]}
/>
```

## Reduced motion

The cards arrive at once.

## With ClientRouter

CSS and Reveal.

## Craft

- The call link dials the number as written with its spaces taken out, and shows it, so a reader on a laptop can copy it.
- The email link says whose it is to a screen reader, where every card's link would otherwise be a plain "Email".
- One agent lays the portrait beside the words; more stack portrait over words in a grid that fits the box.

## Replaces

- Agent profile cards with a headshot

## Source

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