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

Playground

Customization

HTML Examples

Imports

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