Avatar - Web Component

...

Browser support

Parameters

The Web component uses a <z-avatar> tag.

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

Name	Type	Description
layout	string	Custom attribute for the article card component. Possible values are: horizontal, vertical or dropdown
config	string	The configuration of the profile
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
dropdown-elements	array	The dropdown elements in case layout is dropdown
content	string	The content of the user profile
name	string	The name of the user profile

Playground

Customization

HTML Examples

Imports

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

Code

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