Avatar
...
Browser support
...
Parameters
The CSS component uses a <div>
tag with the z-avatar
HTML custom attribute.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
z-avatar | 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 |
INFO
Check the z-avatar
anatomy to know the specifications for this component. Use the Playground to see how you can customize this component.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Avatar.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Badge.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Profile.css" />
Code
html
<div z-avatar="horizontal">
<div z-badge="text:xs" text="1" fill="peach">
<img z-profile="m" status="online" src="/0.3.3-rc.2/sample.png" alt="AZ" />
</div>
<header>
<p>John Doe</p>
<span>Lorem ipsum</span>
</header>
</div>