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
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
Card Title
Actions Center

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


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