Avatar

Avatars are user interface (UI) elements that display textual or visual content to represent a user’s identity.

Sass Variables

The Telerik and Kendo UI Avatar enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-avatar-default-theme-color"primary""primary"Default: "primary"Computed: "primary"
Description: The default theme color of the Avatar.
kendo-avatar-default-fill-mode"solid""solid"Default: "solid"Computed: "solid"
Description: The default fill mode of the Avatar.
kendo-avatar-default-roundness"full""full"Default: "full"Computed: "full"
Description: The default roundness of the Avatar.
kendo-avatar-default-size"md""md"Default: "md"Computed: "md"
Description: The default size of the Avatar.
kendo-avatar-border-width1px1pxDefault: 1pxComputed: 1px
Description: The border width of the Avatar.
kendo-avatar-border-radiusnullnullDefault: nullComputed: null
Description: The border radius of the Avatar.
kendo-avatar-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the Avatar.
kendo-avatar-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the Avatar.
kendo-avatar-line-heightvar( --kendo-line-height-xs, normal )var(--kendo-line-height-xs, normal)Default: var( --kendo-line-height-xs, normal )Computed: var(--kendo-line-height-xs, normal)
Description: The line height of the Avatar.
kendo-avatar-sm-sizek-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The small size of the Avatar.
kendo-avatar-md-sizek-spacing(8)var(--kendo-spacing-8, 2rem)Default: k-spacing(8)Computed: var(--kendo-spacing-8, 2rem)
Description: The medium size of the Avatar.
kendo-avatar-lg-sizek-spacing(16)var(--kendo-spacing-16, 4rem)Default: k-spacing(16)Computed: var(--kendo-spacing-16, 4rem)
Description: The large size of the Avatar.
kendo-avatar-sizes
sm: var(--kendo-spacing-4, 1rem)
md: var(--kendo-spacing-8, 2rem)
lg: var(--kendo-spacing-16, 4rem)
Computed: (sm: var(--kendo-spacing-4, 1rem), md: var(--kendo-spacing-8, 2rem), lg: var(--kendo-spacing-16, 4rem))
Description: The sizes map of the Avatar.
kendo-avatar-theme-colors("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse")("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse")Default: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse")Computed: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse")
Description: The theme colors map of the Avatar.
Feedback