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: |
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
html
<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
html
<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>