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.
San Francisco, officially City and County of San Francisco and colloquially known as SF, San Fran or "The City", is the cultural, commercial, and financial center of Northern California.
RadCard is a UI component that incorporates a set of classes from the Kendo UI suite to create flexible containers.
RadCard and 120+ other controls are part of Telerik UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.
<%@ 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"> <div class="card-container"> <telerik:RadCard runat="server"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Rome"></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:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched"> <telerik:CardActionComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" CssClass="k-button k-flat k-primary" Font-Size="14px" runat="server" Text="Map"></telerik:RadLinkButton> </telerik:CardActionComponent> <telerik:CardActionComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" CssClass="k-button k-flat k-primary" Font-Size="14px" runat="server" Text="Weather"></telerik:RadLinkButton> </telerik:CardActionComponent> </telerik:CardActionsContainerComponent> <telerik:CardFooterComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-facebook"> </telerik:RadLinkButton> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-pinterest"></telerik:RadLinkButton> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-twitter"></telerik:RadLinkButton> </telerik:CardFooterComponent> </telerik:RadCard> <telerik:RadCard runat="server"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Barcelona"></telerik:CardTitleComponent> </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:CardActionsContainerComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" CssClass="k-button k-flat k-primary" Font-Size="14px" runat="server" Text="Map"></telerik:RadLinkButton> <telerik:RadLinkButton EnableEmbeddedSkins="false" CssClass="k-button k-flat k-primary" Font-Size="14px" runat="server" Text="Weather"></telerik:RadLinkButton> </telerik:CardActionsContainerComponent> <telerik:CardFooterComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-facebook"> </telerik:RadLinkButton> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-pinterest"></telerik:RadLinkButton> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-twitter"></telerik:RadLinkButton> </telerik:CardFooterComponent> </telerik:RadCard> <telerik:RadCard runat="server"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="San Francisco"></telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" Content="City in California"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardImageComponent runat="server" src="../Images/sanfran.jpg"></telerik:CardImageComponent> <telerik:CardBodyComponent runat="server"> <p>San Francisco, officially City and County of San Francisco and colloquially known as SF, San Fran or "The City", is the cultural, commercial, and financial center of Northern California.</p> </telerik:CardBodyComponent> <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical" CardActionsAlignment="Stretched"> <telerik:CardActionComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" CssClass="k-button k-flat k-primary" Font-Size="14px" runat="server" Text="Map"></telerik:RadLinkButton> </telerik:CardActionComponent> <telerik:CardActionComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" CssClass="k-button k-flat k-primary" Font-Size="14px" runat="server" Text="Weather"></telerik:RadLinkButton> </telerik:CardActionComponent> </telerik:CardActionsContainerComponent> <telerik:CardFooterComponent runat="server"> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-facebook"> </telerik:RadLinkButton> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-pinterest"></telerik:RadLinkButton> <telerik:RadLinkButton EnableEmbeddedSkins="false" runat="server" Font-Size="14px" CssClass="k-button k-flat k-button-icon" Icon-CssClass="p-icon p-i-twitter"></telerik:RadLinkButton> </telerik:CardFooterComponent> </telerik:RadCard> </div> </div> </form> </body> </html>