Skip to content

Profile

Profile is used to represent a user and add visual information in form of an icon, initials or image.

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-profile--bgcolorBackground color
--z-profile--colorcolorForeground color
--z-profile--sizedistanceSize fof the profile
--z-profile--border-colorcolorBorder color

The background, color and size of the profile can be customized using the --z-profile--background, --z-profile--color and --z-profile--size CSS custom properties respectively or the custom attribute.

AZ
AZ

Also for the outline version of the profile, the border color can be customized using the --z-profile--border-color CSS custom property.

AZ
AZ