Profile - Web Component
...
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-profile> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
config(optional) | string | The main parameter has three components following the pattern:
|
status(optional) | string | Defines the status of the profile. Possible values are: |
initials(optional) | string | Defines the initials of the user. Only the first two characters will be displayed. |
image-src(optional) | string | Defines the `src` attribute pointing to the user's profile picture. Default fallback it's a user icon |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span |
config
The config parameter is used to define the profile size, color and outline. Following the pattern: <size><?:color><?:outline>
size
The modifier size is used to define the size of the profile. Possible values are: l, m, s
color
The modifier color is used to define the color of the profile. Possible values are: 1, 2, 3, 4, 5, 6
outline
The modifier outline is used to define the profile with a border.
Attention!
If the outline parameter is present, the color parameter will be ignored.
status
The status parameter is used to define the profile status. Possible values are: online, absent,occupied
initials
The initials parameter is used to define the initials of the profile. Only the first two characters will be displayed.
image-src
The image-src parameter is used to define the image URL to be displayed. If the image is not found, a default user icon will be displayed.
Both, background and foreground color can be customized using the --z-profile--bg and --z-profile--color custom tokens, respectively.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@zurich/web-components/badge.js"></script>
<script type="module" src="/0.4.5/@zurich/web-components/profile.js"></script>Code
html
<z-profile>AZ</z-profile>
<z-profile image-src="/0.4.5/sample.png"></z-profile>
<z-profile image-src="/wrong.png"></z-profile>
<!-- Status: online, absent or occupied -->
<z-profile status="absent"></z-profile>
<z-profile image-src="/0.4.5/sample.png" status="absent"></z-profile>
<z-profile image-src="/wrong.png" status="absent"></z-profile>
<z-profile config="6"></z-profile>
<z-profile config="outline"></z-profile>
<z-badge config="text" text="+99" fill="peach">
<z-profile status="occupied"></z-profile>
</z-badge>