Profile - CSS Component ​

The Profile component can be used imported from:

Playground ​

Construction ​

The CSS component uses a <div> tag.

z-profile ​

The z-profile is the main HTML custom attribute used to render the profile CSS component. If modifiers are omitted, the default m size with the Zurich Blue background will be applied.

The z-profile has three optional modifiers, that can be applied in order using color(:) as the separator. The pattern would be: <size><?:color><?:style>

  • The first modifier is size and it defines the size of the profile. The default value is m, being omitted from the parameter. The possible values for size are: s or l. Check the size section.
  • The second modifier is color and it defines the color of the profile. The possible values for color are: 1, 2, 3, 4, 5, 6. Check the theme section for the color palette.
1
2
3
4
5
6
  • The third modifier is style and it can receive the value outline to render the profile with a border. If the outline modifier is present, the color modifier will be ignored.

INFO

You can insert a <span> tag with the initials of the user. Only the first two characters will be displayed. Also it's possible to insert a <img> tag with the src attribute pointing to the user's profile picture. Default fallback it's a user icon.

AZ
Alternative text

status ​

The status attribute is used to define the status of the profile. The possible values are: online, absent, occupied.

Attention!

For the CSS component, in order to get rid of the default fallback display (the alt attribute and the broken image icon), use the onerror attribute with the fallback src to place an empty SVG that can be set as a global variable. Or use the @zurich/css-components/javascript.js import.

Special uses ​

Badge ​

Check in badge docs

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​