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

Media

DevReach

DevReach 2019 Day 2 Morning Keynote: Technical Leadership: Lessons Learned at NASA with Jody Davis

Seaview Apartments

A luxurious two-bedroom apartment with the best views over Santorini

Description

The Card allows you to display an image or a video within its content.

  • DefaultCS.aspx
  • 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>
    <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>

Support & Learning Resources

Find Assistance