Avatar Ready

Avatar is used for showing a thumbnail representation of a user or entity. Default avatar illustration is displayed when no src is specified.

Open in new window

View RTL

<nord-stack align-items="center" direction="horizontal">
  <nord-avatar name="Laura Williams" size="m"></nord-avatar>
  <nord-avatar name="Laura Williams" size="l"></nord-avatar>
  <nord-avatar name="Laura Williams" size="xl"></nord-avatar>
  <nord-avatar name="Laura Williams" size="xxl"></nord-avatar>
</nord-stack>

<nord-stack align-items="center" direction="horizontal">
  <nord-avatar src="https://nordhealth.design/img/avatar.jpg" name="Laura Williams" size="m"></nord-avatar>
  <nord-avatar src="https://nordhealth.design/img/avatar.jpg" name="Laura Williams" size="l"></nord-avatar>
  <nord-avatar src="https://nordhealth.design/img/avatar.jpg" name="Laura Williams" size="xl"></nord-avatar>
  <nord-avatar src="https://nordhealth.design/img/avatar.jpg" name="Laura Williams" size="xxl"></nord-avatar>
</nord-stack>

<nord-avatar aria-describedby="tooltip" name="Laura Williams" size="l"></nord-avatar>
<nord-tooltip id="tooltip" position="inline-end">Laura Williams (online)</nord-tooltip>

Properties

Property	Attribute	Description	Type	Default
`size`	`size`	The size of the avatar.	`"m" \| "l" \| "xl" \| "xxl"`	`"m"`
`src`	`src`	The URL of the avatar image uploaded by the user.	`string \| undefined`	`undefined`
`name`	`name`	The name of the person.	`string`	`""`

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

Always add the name of the person using the name property.
For the best results, use square images or images cropped into a square.

Don’t #

Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.