New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms Avatar Overview

Contacts

About Telerik WebForms Avatar for ASP.NET AJAX

The Telerik WebForms Avatar is typically used to display images, icons or initials representing people or other entities.

It is part of Telerik UI for ASP.NET AJAX, which a comprehensive toolset containing over 120 controls and taking care of the common functionalities, allowing you more time to focus mainly on the business-specific logic of your application.

For more information about the WebForms Avatar Control, please refer to the documentation.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"   %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <telerik:RadCard runat="server">
            <telerik:CardBodyComponent runat="server">
                <div class="contact-list">Contacts</div>
                <div class="user-data-container">
                    <div class="user-box flex-row">
                        <telerik:RadAvatar runat="server" Text="JS" />
                        <div class="user-info">
                            <h2 class="contact-name">Jason Smith</h2>
                            <p class="contact-position">UX Designer</p>
                        </div>
                    </div>
                    <div class="user-box">
                        <telerik:RadAvatar runat="server" Text="GP" />
                        <div class="user-info">
                            <h2 class="contact-name">George Porter</h2>
                            <p class="contact-position">Software Engineer</p>
                        </div>
                    </div>
                </div>
                <div class="user-data-container flex-row">
                    <div class="user-box flex-row">
                        <telerik:RadAvatar runat="server" Type="Image" Image="https://demos.telerik.com/aspnet-ajax/Img/Northwind/Customers/Thumbs/RICSU.jpg" />
                        <div class="user-info">
                            <h2 class="contact-name">Michael Holz</h2>
                            <p class="contact-position">Manager</p>
                        </div>
                    </div>
                    <div class="user-box">
                        <telerik:RadAvatar runat="server" Type="Image" Image="https://demos.telerik.com/aspnet-ajax/Img/Northwind/Customers/Thumbs/GOURL.jpg" />
                        <div class="user-info">
                            <h2 class="contact-name">Andre Steward</h2>
                            <p class="contact-position">Product Manager</p>
                        </div>
                    </div>
                </div>
                <div class="user-data-container">
                    <div class="user-box">
                        <telerik:RadAvatar runat="server" Type="Icon" Icon="user" Rounded="None" />
                        <div class="user-info">
                            <h2 class="contact-name">Unknown</h2>
                            <p class="contact-position">Not Specified</p>
                        </div>
                    </div>
                </div>
            </telerik:CardBodyComponent>
        </telerik:RadCard>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance