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

Types

Card Title
Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Action 1 Action 2
Card Title
Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Action 1 Action 2
Card Title
Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Action 1
Card Footer
Sofia
☀
Sunny
2ºC
Passenger
George Hudson
Departure
Arrival
SOF
6 Dec 2017
10:30
✈
LON
6 Dec 2017
12:30
LON
12 Dec 2017
18:30
✈
SOF
12 Dec 2017
22:30
Total
BGN 234
Card Title
Actions Center

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Footer

Description

This example shows a few unique layouts using different combination of settings and Card components.

  • 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="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;">&#9728;</div>
                    <telerik:CardSubtitleComponent runat="server" Content="Sunny"></telerik:CardSubtitleComponent>
                </telerik:CardHeaderComponent>
                <telerik:CardBodyComponent runat="server">
                    <div style="font-size: 3em;">2&ordm;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;">&#9992;</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;">&#9992;</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>

Support & Learning Resources

Find Assistance