Guidelines
Guidelines
Usage
An Avatar should:
- Be used to reference a person visually.
- Be non-interactive. For interactivity, like linking to a profile page, it should be used in a container that acts as the link with required states.
Content
An Avatar should:
- Include a portrait image of the person to improve recognition of them. For optimal identification, the image should be of their face without a helmet and goggles or sunglasses.
- Have its fallback present initials derived from the given name when no image is provided. The name can consist of one, two, or more words while the initials should contain a maximum of 2 characters.
Appearance
An Avatar should:
- By default be using the 'light' appearance.
- Have its appearance set to 'light' in a light mode environment. In a dark mode environment, we recommend changing its appearance to 'dark' for a more balanced contrast.
- Have its framed property set to 'true' when the Avatar is placed on images or texturized surfaces to make it stand out.
- Be displayed in a circle shape.
Size
An Avatar should:
- Have its size set to 'x-small' when used in dense layouts like options lists, where space is limited, and compact representation is preferred.
- Have its size set to 'small' to provide a balanced presence without overwhelming the content, as with a small-sized Person Item.
- Have its size set to 'medium' for more generous layouts, like a medium-sized Person Item.
- Have its size set to 'large' when a more prominent presence is required for compact layouts to ensure an appropriately balanced presence without overwhelming the layout, for example, in a Person Card.
- Have its size set to 'x-large when it's used in spacious layouts as a primary focal point or as a header element, making a bold statement in contexts like landing pages or a hero panel.