Portrait Art
BackgroundsA drawn portrait for a slot that has no photograph yet: a speaker, an artist, a host, a member of a team.
every browserhover
Agent Cards
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.
Live demo
The people you will meet
Rosa Vidal
Partner, sales
- homes sold last year
- 41
I will tell you what a house is worth on the first visit, and why.
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
tone
density
Measured
JavaScript of its own
0 B
Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.
CSS 15.6 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
every browser. Elsewhere: nothing to fall back from.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/agent-cards---
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 } },
]}
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: portrait-art, reveal.
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. |
Theming and overrides
The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.
Classes
.ma-agents.ma-agents__body.ma-agents__call.ma-agents__card.ma-agents__copy.ma-agents__email.ma-agents__eyebrow.ma-agents__head.ma-agents__headline.ma-agents__inner.ma-agents__links.ma-agents__list.ma-agents__meta.ma-agents__name.ma-agents__portrait.ma-agents__quote.ma-agents__role.ma-agents__stats
Slots
slot="headline"
Reduced motion
The cards arrive at once.
With ClientRouter
CSS and Reveal.
Why it is built this way
- 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. See the migration table.
Related
Contact · sample page
Write to the team.
Sample channels on the left. The form on the right is real and sends nothing here: fill it in and watch the button.
- Email (sample)
- hello@studio.example
- Phone (sample)
- +1 555 0100
- Office (sample)
- 1 Sample Street, Springfield
Demo: nothing is sent.
A contact section in two columns: the ways to reach you (email, phone, office) on one side, a form that really sends on the other.
Chrome 135 · not Firefox · Safari 27click
The Boathouse
Southbank, on the river path
$1,150,000 Guide price (a sample)
- Bedrooms
- 4
- Bathrooms
- 3
- Floor area
- 204 m²
- Built
- 2019
The top of a home's own page: its pictures on one side, each a building drawn by HomeArt under a Lens that magnifies it at the pointer, with a row of thumbnails that picks one (radios and :has(), so the arrow keys move along them); on the other side the price, the title, the address, the facts and two actions.
newly · Chrome 105 · Firefox 121 · Safari 15.4clickpointer
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown