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

Appearance

  • Demo Configurator
Size
Theme Color
FillMode
Rounded
Border

The Telerik WebForms Avatar allows you to render its content by using a number of options to set the size, theme color, rounding, fill mode, and more.

Play with the demo to apply different styles to the Avatar.

As the introduction of the styling options is an ongoing effort, there could be minor changes and touch-ups added to the options in the future.

  • DefaultCS.aspx
  • scripts.js
  • 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" />
    <script src="scripts.js"></script>
</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" runat="server">
        <telerik:RadCard runat="server">
            <telerik:CardBodyComponent runat="server">
                <div class="flex">
                    <telerik:RadAvatar runat="server" ID="RadAvatar1" Type="Image" Image="https://demos.telerik.com/aspnet-ajax/Img/Northwind/Customers/Thumbs/RICSU.jpg" Size="Large" />
                    <telerik:RadAvatar runat="server" ID="RadAvatar2" Type="Text" Size="Large" Text="JS" />
                    <telerik:RadAvatar runat="server" ID="RadAvatar3" Type="Icon" Icon="user" Size="Large" />
                </div>
            </telerik:CardBodyComponent>
        </telerik:RadCard>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Size" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbSize" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="sizeChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" Selected="true" />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Theme Color" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbThemeColor" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="themeColorChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Primary" Value="Primary" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Secondary" Value="Secondary" />
                                    <telerik:RadComboBoxItem Text="Tertiary" Value="Tertiary" />
                                    <telerik:RadComboBoxItem Text="Info" Value="Info" />
                                    <telerik:RadComboBoxItem Text="Success" Value="Success" />
                                    <telerik:RadComboBoxItem Text="Warning" Value="Warning" />
                                    <telerik:RadComboBoxItem Text="Error" Value="Error" />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="FillMode" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="optionFillMode" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="fillModeChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Solid" Value="Solid" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Outline" Value="Outline" />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Title="Rounded" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="optionRounded" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="roundedChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                    <telerik:RadComboBoxItem Text="Full" Value="Full" Selected="true" />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Title="Border" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Switch runat="server" ID="optionBorder" AutoPostBack="false" Size="Narrow" OnClientCheckedChanged="borderChanged">
                                <ToggleStates>
                                    <ToggleStateOn Text="Show" />
                                    <ToggleStateOff Text="Hide" />
                                </ToggleStates>
                            </qsf:Switch>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance