Profile - Web Component
...
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-profile> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot |
|---|---|---|---|
config | string | The main parameter has three components following the pattern:
| |
status | string | Defines the status of the profile. Possible values are: | |
initials | string | Defines the initials of the user. Only the first two characters will be displayed. | |
image-src | 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 | The text to be displayed inside the profile. |
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.