Profile - Web Component

The Profile component can be used imported from:

Playground

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
`config`	`string`	The main parameter has three components following the pattern: `<size><?:color><?:style>` `size`: Defines the size of the profile. Possible values are: `l`, `m`, `s` `color`: Defines the color of the profile. Possible values are: `1`, `2`, `3`, `4`, `5`, `6` `outline`: If `outline` parameter is present, the profile will be rendered with a border.
`status`	`string`	Defines the status of the profile. Possible values are: `online`, `absent`,`occupied`
`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

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
`default`	`span`	The text to be displayed inside the profile.

Parameters use

`initials`

The initials parameter is used to define the initials of the profile. Only the first two characters will be displayed. It can also use the default slot.

If nothing is provided, it will fallback to a generic user icon.

`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

`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.

Profile - Web Component ​

Playground ​

Parameters ​

Slots ​

Parameters use ​

initials ​

config ​

size ​

color ​

outline ​

status ​

image-src ​

Browser support ​

HTML Examples ​

CodeSandbox example ​