Avatar - CSS Component ​

...

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

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

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Avatar.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Badge.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Profile.css" />
Code
html
<div z-avatar="horizontal">
  <div z-badge="text:xs" text="1" fill="peach">
    <div z-profile="m" status="online">
      <img src="/0.5.0/sample.webp" alt="AZ" />
    </div>
  </div>

  <header>
    <p>John Doe</p>
    <span>Lorem ipsum</span>
  </header>
</div>


<div z-avatar="horizontal">
  <div z-badge="text:xs" text="1" fill="peach">
    <div z-profile="m" status="online">
      <span>AZ</span>
    </div>
  </div>

  <header>
    <p>John Doe</p>
    <span>Lorem ipsum</span>
  </header>
</div>