All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
DevReach 2019 Day 2 Morning Keynote: Technical Leadership: Lessons Learned at NASA with Jody Davis
A luxurious two-bedroom apartment with the best views over Santorini
The Card allows you to display an image or a video within its content.
<%@ 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="Vertical"> <telerik:CardHeaderComponent runat="server" CssClass="k-display-flex k-align-items-center"> <telerik:CardTitleComponent runat="server" Content="DevReach"></telerik:CardTitleComponent> </telerik:CardHeaderComponent> <telerik:CardMediaComponent runat="server" height="267" TagKey="Iframe" src="https://www.youtube-nocookie.com/embed/00EMMRFocNs"></telerik:CardMediaComponent> <telerik:CardBodyComponent runat="server"> <p><strong>DevReach 2019 Day 2 Morning Keynote:</strong> Technical Leadership: Lessons Learned at NASA with Jody Davis</p> </telerik:CardBodyComponent> <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent> <telerik:CardActionsContainerComponent runat="server"> <span class="k-button k-flat k-button-icon"><span class="p-icon p-i-heart-outline"></span></span> <span class="k-button k-flat k-button-icon"><span class="p-icon p-i-add-comment"></span></span> <span class="k-button k-flat k-button-icon"><span class="p-icon p-i-share"></span></span> </telerik:CardActionsContainerComponent> </telerik:RadCard> <telerik:RadCard runat="server" Orientation="Vertical"> <telerik:CardHeaderComponent runat="server" CssClass="k-display-flex k-align-items-center"> <telerik:CardTitleComponent runat="server" Content="Seaview Apartments"></telerik:CardTitleComponent> </telerik:CardHeaderComponent> <telerik:CardImageComponent runat="server" src="../Images/seaview-appartments.png"></telerik:CardImageComponent> <telerik:CardBodyComponent runat="server"> <p>A luxurious two-bedroom apartment with the best views over Santorini</p> </telerik:CardBodyComponent> <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent> <telerik:CardActionsContainerComponent runat="server"> <span class="k-button k-flat k-button-icon"><span class="p-icon p-i-heart-outline"></span></span> <span class="k-button k-flat k-button-icon"><span class="p-icon p-i-add-comment"></span></span> <span class="k-button k-flat k-button-icon"><span class="p-icon p-i-share"></span></span> </telerik:CardActionsContainerComponent> </telerik:RadCard> </div> </div> </form> </body> </html>