AvatarReady

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

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-stack align-items="center" direction="horizontal" wrap>
  <nord-avatar name="Laura Williams" size="s"></nord-avatar>
  <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-avatar name="Laura Williams" size="xxxl"></nord-avatar>
</nord-stack>

Properties

PropertyAttributeDescriptionTypeDefault
sizesize

The size of the avatar.

"s" | "m" | "l" | "xl" | "xxl" | "xxxl""m"
srcsrc

The URL of the avatar image uploaded by the user.

string | undefinedundefined
namename

The name of the person or entity.

string""
iconicon

The fallback icon.

string""
variantvariant

The style variant of the avatar.

"default" | "square""default"

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-avatar-color

Controls the color of the avatar fallback, using color tokens.

var(--n-color-status-highlight)
--n-avatar-size

Controls the size of the avatar, using icon sizing tokens.

var(--n-size-icon-l)
--n-avatar-box-shadow

Controls the box shadow for the avatar.

none
--n-avatar-text-color

Controls the color of the avatar’s text and icon, using color tokens.

var(--n-color-text-on-accent)

Dependencies

This component is internally dependent on the following components:


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.
  • Use the avatar to represent a single user, pet or entity.

Don’t #

  • Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.
  • Don't use an avatar when an icon is more suitable, for example when denoting groups or "things".

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

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.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.