Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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, 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.
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.
<%@ Page Language="vb" 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>