Skip to content

Profile - Web Component

The Profile component can be used imported from:

Playground

Parameters

...

Slots

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

NameTagsDescription
defaultspanThe 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