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
Some quick example text to build on the card title and make up the bulk of the card's content.
This example shows a few unique layouts using different combination of settings and Card components.
<%@ 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" Orientation="Horizontal"> <telerik:CardMediaComponent TagKey="Img" src="../Images/sofia.jpg" runat="server"></telerik:CardMediaComponent> <div class="k-vbox k-column"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Card Title"></telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" Content="Card Subtitle"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </telerik:CardBodyComponent> <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched" Orientation="Horizontal"> <span class="k-button k-flat">Action 1</span> <span class="k-button k-flat k-primary">Action 2</span> </telerik:CardActionsContainerComponent> </div> </telerik:RadCard> <telerik:RadCard runat="server" Orientation="Horizontal"> <telerik:CardImageComponent runat="server" TagKey="Span"> <telerik:CardSeparatorComponent runat="server" Orientation="Vertical"></telerik:CardSeparatorComponent> <telerik:CardMediaComponent runat="server" TagKey="Img" src="../Images/sofia.jpg"></telerik:CardMediaComponent> </telerik:CardImageComponent> <telerik:CardSeparatorComponent runat="server" Orientation="Vertical"></telerik:CardSeparatorComponent> <div class="k-vbox k-column"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Card Title"></telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" Content="Card Subtitle"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </telerik:CardBodyComponent> <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched" Orientation="Horizontal"> <span class="k-button k-flat">Action 1</span> <span class="k-button k-flat k-primary">Action 2</span> </telerik:CardActionsContainerComponent> </div> </telerik:RadCard> <telerik:RadCard runat="server" Orientation="Horizontal"> <telerik:CardMediaComponent runat="server" TagKey="Img" src="../Images/sofia.jpg"></telerik:CardMediaComponent> <div class="k-vbox k-column"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Card Title"></telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" Content="Card Subtitle"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </telerik:CardBodyComponent> <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched" Orientation="Horizontal"> <span class="k-button k-flat k-primary">Action 1</span> </telerik:CardActionsContainerComponent> <telerik:CardFooterComponent runat="server"> <span>Card Footer</span> </telerik:CardFooterComponent> </div> </telerik:RadCard> <telerik:RadCard runat="server" Orientation="Vertical" CssClass="k-text-center"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Sofia"></telerik:CardTitleComponent> <div class="sunny" style="font-family: Segoe UI Emoji; font-size: 3rem;">☀</div> <telerik:CardSubtitleComponent runat="server" Content="Sunny"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <div style="font-size: 3em;">2ºC</div> </telerik:CardBodyComponent> <telerik:CardActionsContainerComponent runat="server" Orientation="Horizontal" CardActionsAlignment="Stretched"> <button class="k-button k-flat">Action 1</button> <button class="k-button k-primary k-flat">Action 2</button> </telerik:CardActionsContainerComponent> </telerik:RadCard> <telerik:RadCard runat="server" Orientation="Vertical"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Passenger"></telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" Content="George Hudson"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <div class="k-hbox"> <div class="k-column k-text-left">Departure</div> <div class="k-column k-text-right">Arrival</div> </div> <div class="k-hbox"> <div class="k-column k-text-left"> <div>SOF</div> <div> 6 Dec 2017<br> 10:30 </div> </div> <div class="k-column k-text-center" style="font-family: Segoe UI Emoji; font-size: 2rem;">✈</div> <div class="k-column k-text-right"> <div>LON</div> <div> 6 Dec 2017<br> 12:30 </div> </div> </div> <telerik:CardSeparatorComponent runat="server" style="margin: 8px 0;"></telerik:CardSeparatorComponent> <div class="k-hbox"> <div class="k-column k-text-left"> <div>LON</div> <div> 12 Dec 2017<br> 18:30 </div> </div> <div class="k-column k-text-center" style="font-family: Segoe UI Emoji; font-size: 2rem;">✈</div> <div class="k-column k-text-right"> <div>SOF</div> <div> 12 Dec 2017<br> 22:30 </div> </div> </div> </telerik:CardBodyComponent> <telerik:CardFooterComponent runat="server"> <div class="k-hbox"> <div class="k-column k-text-left">Total</div> <div class="k-column k-text-right">BGN 234</div> </div> </telerik:CardFooterComponent> </telerik:RadCard> <telerik:RadCard runat="server" Orientation="Horizontal"> <div class="k-vbox k-column"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="Card Title"></telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" Content="Actions Center"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </telerik:CardBodyComponent> <telerik:CardFooterComponent runat="server"> <span>Card Footer</span> </telerik:CardFooterComponent> </div> <telerik:CardSeparatorComponent runat="server" Orientation="Vertical"></telerik:CardSeparatorComponent> <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical" CardActionsAlignment="Centered"> <button class="k-button k-flat">Action 1</button> <button class="k-button k-primary k-flat">Action 2</button> </telerik:CardActionsContainerComponent> </telerik:RadCard> </div> </div> </form> </body> </html>