Avatar Overview

The Telerik UI Avatar for ASP.NET Core is typically used to display images, icons or initials representing people or other entities.

It also gives you the flexibility to customize its border radius, size, color, etc.

Telerik UI for ASP.NET Core Ninja image

The Avatar is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the Avatar

The following example demonstrates how to initialize an Avatar component.

    @(Html.Kendo().Avatar()
        .Name("avatar-text")
        .Type(AvatarType.Text)
        .Text("JS")
    )
    <kendo-avatar name="avatar-text"
        type="AvatarType.Text"
        text="JS">
    </kendo-avatar>

Referencing Existing Instances

You can access an existing Avatar instance by using the .data() jQuery method which gets executed by the jQuery object of the originating element.

    @(Html.Kendo().Avatar()
        .Name("avatar")
        .Type(AvatarType.Text)
        .Text("MJ")
    )
    <kendo-avatar name="avatar"
        type="AvatarType.Text"
        rounded="Rounded.Full"
        text="MJ">
    </kendo-avatar>
    <script>
        var avatar = $('#avatar').data('kendoAvatar');
    </script>

Accessibility and Keyboard Navigation

The Alt option can be used when the Type is set to Image. This value will be used to populate the alt attribute of the <img> element.

The Avatar is a non-focusable element.

See Also

In this article