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

Orientation

The Ultimate Beach Guide
Life is indeed better at the beach

The ultimate guide for all of you beach lovers. Planning your 2020 vacation or just longing to tuck your toes in the sand, feel the sea breeze and gather as much vitamin D as possible? Just continue reading to find out our favorite beach spots for 2020.

Read more
Save for later
58 7 15 m
Tulip Time

The tulip season is just around the corner. If you still haven't decided on your spring destination, we have a suggestion- Holland, a.k.a the "flower shop of the world"!

Read more
Save for later
32 2 10 m

Description

Card Orientation allows the content to be arranged horizontally or vertically by setting the Orientation property of the RadCard to Vertical or Horizontal.

  • 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:CardImageComponent runat="server" src="../Images/shells.jpg"></telerik:CardImageComponent>
                <div class="k-vbox k-column">
                    <telerik:CardHeaderComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="The Ultimate Beach Guide"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="Life is indeed better at the beach"></telerik:CardSubtitleComponent>
                    </telerik:CardHeaderComponent>
                    <telerik:CardBodyComponent runat="server">
                        <p>The ultimate guide for all of you beach lovers. Planning your 2020 vacation or just longing to tuck your toes in the sand, feel the sea breeze and gather as much vitamin D as possible? Just continue reading to find out our favorite beach spots for 2020.</p>
                    </telerik:CardBodyComponent>
                    <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent>
                    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched" Orientation="Vertical">
                        <span class="k-button k-flat k-primary">Read more</span>
                        <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent>
                        <span class="k-button k-flat k-primary">Save for later</span>
                    </telerik:CardActionsContainerComponent>
                    <telerik:CardFooterComponent runat="server">
                        <span class="footer-item"><span class="p-icon p-i-heart-outline"></span>58</span>
                        <span class="footer-item"><span class="p-icon p-i-comment"></span>7</span>
                        <span class="footer-item"><span class="p-icon p-i-clock"></span>15 m</span>
                    </telerik:CardFooterComponent>
                </div>
            </telerik:RadCard>

            <telerik:RadCard runat="server" Orientation="Vertical">
                <telerik:CardImageComponent runat="server" src="../Images/tulips.jpg"></telerik:CardImageComponent>
                <telerik:CardBodyComponent runat="server">
                    <telerik:CardTitleComponent Content="Tulip Time" runat="server"></telerik:CardTitleComponent>
                    <p>The tulip season is just around the corner. If you still haven't decided on your spring destination, we have a suggestion- Holland, a.k.a the "flower shop of the world"!</p>
                </telerik:CardBodyComponent>
                <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent>
                <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
                    <span class="k-button k-flat k-primary">Read more</span>
                    <telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
                    </telerik:CardSeparatorComponent>
                    <span class="k-button k-flat k-primary">Save for later</span>
                </telerik:CardActionsContainerComponent>
                <telerik:CardFooterComponent runat="server">
                    <span class="footer-item"><span class="p-icon p-i-heart-outline"></span>32</span>
                    <span class="footer-item"><span class="p-icon p-i-comment"></span>2</span>
                    <span class="footer-item"><span class="p-icon p-i-clock"></span>10 m</span>
                </telerik:CardFooterComponent>
            </telerik:RadCard>

        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance