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.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/badge.js"></script>
<script type="module" src="/0.5.0/@zurich/web-components/profile.js"></script>
Code
html
<z-profile>AZ</z-profile>
<z-profile image-src="/0.5.0/sample.webp"></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.5.0/sample.webp" 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>