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	Slot	A11y
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.

AA

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

AZAZ

color

The modifier color is used to define the color of the profile. Possible values are: 1, 2, 3, 4, 5, 6

123456

outline

The modifier outline is used to define the profile with a border.

AZ

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

AZAZAZ

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.

Special uses

Badge

Check in badge docs

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example