Avatar - CSS Component ​

...

Browser support ​

Construction ​

TIP

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

The CSS component uses a <div> tag with the z-avatar HTML custom attribute.

Name

description

Name

description

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.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Avatar.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Badge.css" />
<link rel="stylesheet" href="/0.3.7/@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.7/sample.png" alt="AZ" />
  </div>
  <header>
    <p>John Doe</p>
    <span>Lorem ipsum</span>
  </header>
</div>