Focus Siblings
PointerA group whose item pointed at or focused stays as it is while its siblings step back: dimmed, and a little smaller or softer if you ask.
every browserhoverpointer
People List
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.
Live demo
Who you will see
Point at a card: the others step back. Made-up people and numbers.
Dr Ada Lind
Dentist BDS, MJDF
- In on
- Monday to Thursday
- Speaks
- English, Swedish
- Registered
- No. 123456 (sample)
Tomás Ruiz
Hygienist Dip DH
- In on
- Tuesday and Friday
- Speaks
- English, Spanish
- Registered
- No. 234567 (sample)
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
columns
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 16.1 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/people-list---
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 } },
]}
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: focus-siblings, portrait-art, reveal.
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. |
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-people.ma-people__body.ma-people__card.ma-people__copy.ma-people__cred.ma-people__eyebrow.ma-people__facts.ma-people__head.ma-people__headline.ma-people__inner.ma-people__list.ma-people__name.ma-people__portrait.ma-people__role.ma-people__text
Slots
slot="headline"
Reduced motion
The others still dim, at once and without shrinking.
With ClientRouter
CSS and Reveal.
Why it is built this way
- 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. See the migration table.
Related
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
ProThe 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.
every browserscroll
Team Grid
ProShows team members in a hairline grid: portraits that tilt toward the cursor with a glare, initials when there is no photo, names and roles revealed with a stagger..
every browserscrollpointer
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown