Avatar - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-avatar> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
config	string	Custom attribute for the article card component. Possible values are: horizontal, vertical or dropdown
name	string	The name of the user profile
dropdown-elements	object[]	The dropdown elements in case layout is dropdown
image-src	string	The URL of the image for the profile
initials	string	The initials of the user profile
status	string	The status of the user profile
badge	object	The badge for the profile
content	string	The content of the user profile

The available slots for the component are:

Name	Tags	Description
default	span

TIP

Check the badge and the profile components to learn more about the component.

config

The config attribute is used to set the orientation of the avatar. Possible values are: horizontal, vertical or dropdown.

name

The name attribute is used to set the name for the avatar.

dropdown-elements

The dropdown configuration requires the dropdown-elements attribute to be set.

Profile attributes

image-src

The image-src parameter is used to define the image URL to be displayed inside the avatar.

You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.

initials

The initials it`s used to set the initials for the avatar.

status

The status it's used to set the status for the avatar. Possible values are: online,occupied or absent

Badge attributes

badge

The badge it's used to set the badge for the avatar. It requires an object with the badge configuration.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/avatar.js"></script>

Code

<z-avatar config="m" image-src="/0.5.1/sample.webp" initials="AZ" layout="horizontal"
  badge='{ "config":"text", "text":"1", "fill": "peach" }' name="User name" content="Description">
</z-avatar>

<z-avatar config="m" initials="AZ" layout="horizontal" badge='{ "config":"text", "text":"1", "fill": "peach" }'
  name="User name" content="Description">
</z-avatar>