New to Kendo UI for Angular? Start a free 30-day trial
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
Border width of the avatar. | |||
| $kendo-avatar-font-family | Null | $kendo-font-family | null |
Description
Font family of the avatar. | |||
| $kendo-avatar-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the avatar. | |||
| $kendo-avatar-line-height | Number | $kendo-line-height-md | 1.5 |
Description
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 of the avatar. | |||
| $kendo-avatar-theme | Map | k-process-variant-matrices(
$kendo-avatar-theme-matrix,
$kendo-avatar-palette-matrix
) | (solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null)) |
Description
Theme colors map of the avatar. | |||
