New to Kendo UI for Vue? Start a free 30-day trial

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-familyList

$font-family

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

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

$font-size

1rem

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

$line-height

1.5

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: 1rem, md: 2rem, lg: 4rem)

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

$kendo-theme-colors

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)

Description
Theme colors map of the avatar.

In this article

Not finding the help you need?