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

WebForms Card Overview

Rome
Capital of Italy

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

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
City in California

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.

About RadCard for ASP.NET AJAX

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.

  • 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">
                <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>

Support & Learning Resources

Find Assistance