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:

For optimal quality on high-resolution displays, the profile-image should be 280px in dimension.

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.

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.

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.

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

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