Person card
Who a person or agent is.
<mm-person-card framed name="Jane Doe" job-title="Senior analytics engineer" team="Analytics Engineering" email="jane.doe@marmot.internal"></mm-person-card>
<mm-person-card framed kind="agent" name="support-triage-agent" team="Customer Operations" service-account="svc-support-triage@marmot"></mm-person-card>
Guidance
Person cards say who someone is: an owner, a member, or an agent acting on someone's behalf.
People and agents are told apart by icon and word first (person and "Person", smart-toy and
"Agent"), and by tint second: the initials avatar sits on mm-info-soft for people and
mm-primary-tint for agents. Agents also show the service account they run as, in mono (an
identifier people copy). The name and email links are ink, underlined on hover and focus.
Built for mm-hover-card and usable on its own; set framed for a bordered surface outside a
panel or popover. loading and error behave as on mm-asset-card.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
name | name | string | '' | Full name, or the agent's identifier (support-triage-agent). |
kind | kind | 'person' | 'agent' | 'person' | person (default) or agent. |
jobTitle | job-title | string | '' | Job title, e.g. "Analytics engineer", or what an agent does. (Not role, which is the ARIA role.) |
team | team | string | '' | Team, e.g. "Analytics Engineering". For agents, the team that owns it. |
email | email | string | '' | Email address, shown as a mail link. |
serviceAccount | service-account | string | '' | For agents: the service account it runs as, e.g. svc-support-triage@marmot. |
href | href | string | '' | Link to the profile page. Makes the name a link. |
loading | loading | boolean | false | Shows a skeleton while loading. |
error | error | string | '' | An error message in place of the content. |
framed | framed | boolean | false | A bordered surface for use outside a panel or popover. |
CSS parts
| Part | Description |
|---|---|
card | The content grid. |
avatar | The initials avatar. |
name | The name, a link when href is set. |
kind | The person or agent label. |
CSS custom properties
| Property | Description |
|---|---|
--mm-card-width | Card width. Defaults to 320px. |
Examples
Every state of mm-person-card in Storybook, with keyboard and screen reader tests.