Person

Props

• label: string (optional) -- accessible label for the person
• children: slot (required) -- person content
• ...restProps: Any additional HTML attributes

Keyboard Interactions

• None -- person components are informational, not interactive

ARIA

• Implicit article role from <article> element
• aria-label -- describes the person for screen readers

When to Use

• Use to display person-related information such as a patient, clinician, or contact.
• Use when structured person data (name, role, contact details) needs semantic grouping.
• Use for team member listings, staff directories, or user profile cards.
• Use when a person's information should be self-contained and reusable across contexts.
• Use in combination with Avatar, EmailLink, and TelLink for rich person displays.

When Not to Use

• Do not use for simple avatar display -- use Avatar instead.
• Do not use for organisations -- use Organization instead.
• Do not use for plain text mentions of a person's name -- use a paragraph or inline text.
• Do not use for user authentication status -- use a dedicated auth indicator.

Headless

This component provides an <article> element with optional aria-label, with zero visual styling. The consumer is responsible for all CSS including layout, avatar placement, and typography.

Styles

The consumer provides all CSS styling. The component renders with a .person class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders an <article> element with class person
• Verify aria-label is applied when provided
• Verify child content is rendered correctly
• Verify pass-through attributes are applied

Advice

• Designers: Use consistent layouts across person entries. Include avatar, name, and role prominently.
• Developers: Use the label prop to identify the person for screen readers.

Implementation Notes

• Uses <article> element for self-contained person semantics
• aria-label describes the person for screen readers
• Contains slots for avatar, name, role, bio, and contact information

Related components

• organization — an organization component that contains other organization-related information
• place — a place component that contains other place-related information
• avatar — an avatar indicator that shows an avatar image or avatar text

References

• MDN article element