Examples
Examples
Basic Usage
The Person Item only needs a minimal amount of provided data to be used. It requires at a minimum that the name field is provided.

Best Practices:
- The name should only be used for a person's full name or nickname
- The name should use title-case
- The name should not include emojis
- The profile-image should show a portrait of the person
- The profile-image should be a square (1:1 aspect ratio) image.
- The profile-image should not display a partially cropped head.
- For optimal quality on high-resolution displays, the profile-image should be 280px in dimension.
Extended Usage

Best Practices:
- All meta information should be kept short and scannable, as each item is truncated to a single line of text.
- meta-text-primary above the name should be used for high-priority or standout details.
- meta-text-secondary and additional-info can be used on their own if more appropriate to provide further context; however, additional-info should only be used if meta-text-secondary is true.
- For visual support, each piece of meta information can have a prefix in which, for example, an icon or flag can be used.
- Redirects to external links (e.g. an athletes social media profile) should open in a new tab.
Size
The size of the Person Item can be controlled via the size property.

Best Practices:
- Use the 'small' size when you want to create a more condensed layout where multiple items are displayed in a list or a rail.
- Use the 'medium' size when there is greater space available to show only a single Person Item.
Image Fallback
As per the functionality of the Avatar, the Person Item generates a fallback based on the initials of the first and last name of the person.

Number
Essential for displaying player identifiers in Person Items, especially important in sports where the number is strongly associated with athletes.

Use Cases
Contained Usage
The Person Item can be contained inside longer-form text and properly denoted within the link's tooltip.


Sidebar