Customizing Avatar

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber

1px

1px

Description
Border width of the avatar.
$kendo-avatar-font-familyString

$font-family

inherit

Description
Font family of the avatar.
$kendo-avatar-font-sizeNumber

$font-size

14px

Description
Font size of the avatar.
$kendo-avatar-line-heightNumber

$line-height

1.4285714286

Description
Line height of the avatar.
$kendo-avatar-sizesMap

( sm: map-get( $spacing, 4 ), md: map-get( $spacing, 8 ), lg: map-get( $spacing, 16 ) )

(sm: 16px, md: 32px, lg: 64px)

Description
The sizes of the avatar.
$kendo-avatar-theme-colorsMap

$kendo-theme-colors

("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)

Description
Theme colors map of the avatar.

In this article

Not finding the help you need?