Customizing Avatar

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-avatar-border-width	Number	`1px`	`1px`
Description The border width of the Avatar.
$kendo-avatar-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Avatar.
$kendo-avatar-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Avatar.
$kendo-avatar-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Avatar.
$kendo-avatar-sizes	Map	`( sm: k-map-get( $kendo-spacing, 4 ), md: k-map-get( $kendo-spacing, 8 ), lg: k-map-get( $kendo-spacing, 16 ) )`	`(sm: 1rem, md: 2rem, lg: 4rem)`
Description The sizes map of the Avatar.
$kendo-avatar-theme-colors	Map	`$kendo-theme-colors`	`("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)`
Description The theme colors map of the Avatar.