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

Appearance

Rome
Capital of Italy

Rome is a sprawling, cosmopolitan city with nearly 3,000 years of globally influential art, architecture and culture on display.

Ancient ruins such as the Forum and the Colosseum evoke the power of the former Roman Empire.

Barcelona
Capital of Spain

Barcelona, the cosmopolitan capital of Spain's Catalonia region, is known for its art and architecture.

The fantastical Sagrada Família church and other modernist landmarks designed by Antoni Gaudí dot the city.

  • Demo Configurator
Size
Theme Color
FillMode
Rounded
Icon

The Telerik WebForms Badge offers various options which allow you to control its appearance, such as size, border radius, theme color, fill mode, ьха icon, as demonstrated in this demo.

You can also easily switch between the built-in Skins at the top right corner of the page.

  • 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>
    <script src="scripts.js"></script>
    <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" />
    <style>
        .carTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
    </style>

    <div class="demo-container" runat="server">
        <div class="card-container">
            <telerik:RadCard runat="server" Width="300">
                <telerik:CardHeaderComponent runat="server">
                    <telerik:CardTitleComponent runat="server">
                        <div class="carTitle">
                            <span>Rome</span>
                            <telerik:RadBadge runat="server" ID="RadBadge1" Text="New" Rounded="Small" />
                        </div>
                    </telerik:CardTitleComponent>
                    <telerik:CardSubtitleComponent runat="server" Content="Capital of Italy"></telerik:CardSubtitleComponent>
                </telerik:CardHeaderComponent>
                <telerik:CardImageComponent runat="server" src="Images/rome.jpg"></telerik:CardImageComponent>
                <telerik:CardBodyComponent runat="server">
                    <p>Rome is a sprawling, cosmopolitan city with nearly 3,000 years of globally influential art, architecture and culture on display.</p>
                    <p>Ancient ruins such as the Forum and the Colosseum evoke the power of the former Roman Empire. </p>
                </telerik:CardBodyComponent>
            </telerik:RadCard>

            <telerik:RadCard runat="server" Width="300">
                <telerik:CardHeaderComponent runat="server">
                    <telerik:CardTitleComponent runat="server">
                        <div class="carTitle">
                            <span>Barcelona</span>
                            <telerik:RadBadge runat="server" ID="RadBadge2" Icon="home" />
                        </div>
                    </telerik:CardTitleComponent>
                    <telerik:CardSubtitleComponent runat="server" Content="Capital of Spain"></telerik:CardSubtitleComponent>
                </telerik:CardHeaderComponent>
                <telerik:CardImageComponent runat="server" src="Images/barcelona.jpg"></telerik:CardImageComponent>
                <telerik:CardBodyComponent runat="server">
                    <p>Barcelona, the cosmopolitan capital of Spain's Catalonia region, is known for its art and architecture.</p>
                    <p>The fantastical Sagrada Família church and other modernist landmarks designed by Antoni Gaudí dot the city.</p>
                </telerik:CardBodyComponent>
            </telerik:RadCard>
        </div>
    </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" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeSize">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="0" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="1" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="2" />
                                </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" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeThemeColor">
                                <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" />
                                </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" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeFillMode">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Solid" Value="Solid" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Outline" Value="Outline" />
                                </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" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeRounded">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                    <telerik:RadComboBoxItem Text="Full" Value="Full" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Title="Icon">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ComboBox1" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeIcon">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Home" Value="home" Selected="true" />
                                    <telerik:RadComboBoxItem Text="User" Value="user" />
                                    <telerik:RadComboBoxItem Text="Plus" Value="plus" />
                                    <telerik:RadComboBoxItem Text="Eye" Value="eye" />
                                    <telerik:RadComboBoxItem Text="Gear" Value="gear" />
                                    <telerik:RadComboBoxItem Text="Search" Value="search" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance