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

INFO

Check the z-avatar anatomy to know the specifications for this component. Use the Playground to see how you can customize this component.

TIP

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

Playground

Customization

HTML Examples

Imports

<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

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