Version: 2023.1

Web Components - Avatar

The avatar component is used to graphically represent a user or an object.

Set-up

import { provideDesignSystem, alphaAvatar } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaAvatar());

Live Editor

<alpha-avatar alt="User profile image" link="#" name="John Doe" shape="circle" fill="accent-primary"></alpha-avatar>

<alpha-avatar alt="User profile image" link="#" name="John Doe" shape="circle" fill="accent-primary"></alpha-avatar>

Result

Live Editor

<alpha-avatar alt="User profile image" link="#" name="John Doe" shape="circle" fill="accent-primary" shape="square"></alpha-avatar>

<alpha-avatar alt="User profile image" link="#" name="John Doe" shape="circle" fill="accent-primary" shape="square"></alpha-avatar>

Result

The fill and color attributes of the avatar create CSS custom properties, which can be used to style the control.

alpha-avatar {
  --avatar-fill-primary: #0EAFE2;
  --avatar-fill-danger: #ff0000;
  --avatar-color-light: #ffffff;
  --avatar-color-dark: #000000;
}